webglを使用してテクスチャを個別に回転する

Question

レンダリングで個々のテクスチャを個別に回転させたいとします。私はthisチュートリアルを読んで、回転がすべてのオブジェクトに適用されていることを除いて（回転値が一様であるため）、それが欲しいので機能します。

私はバッファを使用するように書き換えましたが、正しく動作するようにはできません。

HERESに私のシェーダ：

attribute vec2 a_position; 
attribute vec2 a_texture_coord; 
attribute vec2 a_rotation; 
attribute vec4 a_color; 

uniform vec2 u_resolution; 

varying highp vec2 v_texture_coord; 
varying vec4 v_color; 

void main() { 
    v_color = a_color; 
    vec2 rotatedPosition = vec2(
    a_position.x * a_rotation.y + a_position.y * a_rotation.x, 
    a_position.y * a_rotation.y - a_position.x * a_rotation.x); 
    vec2 zeroToOne = rotatedPosition/u_resolution; 
    vec2 zeroToTwo = zeroToOne * 2.0; 
    vec2 clipSpace = zeroToTwo - 1.0; 

    gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); 
    v_texture_coord = a_texture_coord; 
} 

とtypescriptですコード

this.gl.enableVertexAttribArray(this.rotationAttributeLocation); 

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.rotationBuffer); 
this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(renderCall.rotation), this.gl.STATIC_DRAW); 

this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.rotationBuffer); 
this.gl.vertexAttribPointer(this.rotationAttributeLocation, 2, this.gl.FLOAT, false, 0, 0); 

私はWebGLのからまたはブラウザからエラーを取得していないが、空白のキャンバスで終わります。何か案は？

Answer 1

行列演算を大量に掘り下げ、webglでどのように使用するのか。 私は、私の特定の問題でうまくいきました。 各オブジェクト（四角形6頂点）のレンダリングを作成すると、パフォーマンスが大幅に向上しました。

私はちょうどいくつかのオブジェクトを回転させるために必要なたびに、私はJavaScriptを使って頂点を直接回転させました。このような

何か：

let x1 = x + width; 
    let x2 = x; 
    let y1 = y; 
    let y2 = y + height; 

    let rotatePointX = x2; 
    let rotatePointY = y1; 

    let moveToRotationPointMatrix = Matrix3.createTranslationMatrix(-rotatePointX, -rotatePointY); 
    let rotationMatrix = Matrix3.createRotationMatrix(angle); 
    let moveBackMatrix = Matrix3.createTranslationMatrix(rotatePointX, rotatePointY); 

    let matrix = Matrix3.multiply(moveToRotationPointMatrix, rotationMatrix); 
    matrix = Matrix3.multiply(matrix, moveBackMatrix); 

    let x1y1 = Matrix3.positionConvertion(x1, y1, matrix); 
    let x2y2 = Matrix3.positionConvertion(x2, y2, matrix); 
    let x2y1 = Matrix3.positionConvertion(x2, y1, matrix); 
    let x1y2 = Matrix3.positionConvertion(x1, y2, matrix); 

    let newVertecies = [ 
     x1y1[0], x1y1[1], 
     x2y2[0], x2y2[1], 
     x2y1[0], x2y1[1], 
     x1y1[0], x1y1[1], 
     x2y2[0], x2y2[1], 
     x1y2[0], x1y2[1] 
    ]; 

Matrix3は、3×3行列の数学のためのWebglfundamentalsヘルパークラスから多かれ少なかれコピーである、here

public static positionConvertion(x: number, y: number, matrix: number[]) { 
    x = x * matrix[0] + y * matrix[3] + 1 * matrix[6]; 
    y = x * matrix[1] + y * matrix[4] + 1 * matrix[7]; 

    return [x, y]; 
} 

からも簡単な例えばthis答えをチェックしてくださいシェーダの回転をどのように行うかについて説明します。

その他の役立つ情報源

webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html 
webglfundamentals.org/webgl/lessons/webgl-2d-matrix-stack.html 
webglfundamentals.org/webgl/lessons/webgl-2d-rotation.html