2

WebGL でキューブを作成しました。アニメーションを考えていますが、それをまとめるのに苦労しています。

完全なコードは約 150 lns のコードなので、実際のサンプルは次のとおりです: Working Plunkr Code

これがアニメーションのビデオ ワイヤーフレームです 。

1 - アニメーションは、立方体の左下にアンカー ポイントを設定します。

2 - アニメーションは、アンカー ポイントから立方体をスケーリングします。

3 - アニメーションは、立方体をアンカー ポイントからスケールのほぼ半分まで回転させます。

シェーダ: (頂点)

attribute vec4 coords;
attribute float pointSize;
uniform mat4 transformMatrix;
attribute vec4 colors;
varying vec4 varyingColors;
uniform mat4 perspectiveMatrix;
void main(void) {
    gl_Position = perspectiveMatrix * transformMatrix  * coords;
    gl_PointSize = pointSize;
    varyingColors = colors;
}

（断片）

precision mediump float;
uniform vec4 color;
varying vec4 varyingColors;
void main(void) {
    gl_FragColor = varyingColors;
}

gl-matrixを使用して壁のマトリックス変換を行っています

変換は draw fn に入り、gl-matrix mat4 を使用します。

function draw() {

  var transformMatrix = gl.getUniformLocation(shaderProgram, "transformMatrix");
  gl.uniformMatrix4fv(transformMatrix, false, matrix);
  // mat4.rotateY(matrix, matrix, 0.01); // This is example of rotations
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawElements(gl.TRIANGLES, indexCount, gl.UNSIGNED_BYTE, 0);
  requestAnimationFrame(draw);
}
4

1 に答える 1