この記事の概要
前回や前々回の記事で、静的なグラフィック表現をいくつか実装しました。
今回は時間にあわせて見た目が変化するようにしてみます。
ユニフォーム変数の使用
TypeScript 側から時間に関する変数を渡して、シェーダー側で受け取って変化を実現します。
また、アニメーションさせるために requestAnimationFrame を使用します。
main.ts
// シェーダーの渡すデータの設定
const positionAttributeLocation = gl.getAttribLocation(
shaderProgram,
"aPosition"
);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+ const timeUniformLocation = gl.getUniformLocation(shaderProgram, "uTime");
// 描画の実行
- function drawScene() {
+ function drawScene(time: number) {
+ const currentTime = time * 0.001;
+ gl.uniform1f(timeUniformLocation, currentTime);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ requestAnimationFrame(drawScene);
}
// ウィンドウサイズに合わせてcanvasのサイズを変更する
function resizeCanvasToDisplaySize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
- drawScene();
+ drawScene(0.0);
}
次にシェーダーで受け取ります。
ハイライトしている箇所で時間を扱い、見た目を変化させています。
plane.frag
precision mediump float;
+ uniform float uTime;
out vec4 outColor;
void main() {
+ float red = sin(uTime * 0.5) + 0.5;
+ float green = cos(uTime * 0.7) + 0.5;
+ float blue = sin(uTime * 1.3) + 0.5;
outColor = vec4(red, green, blue, 1.0);
}
ただのベタ塗りですが、時間経過にあわせて変化するようになりました。
最後に
ここにグラデーションやノイズをあわせて行こうと思ったのですが、一旦分割します。
次回の記事で、静的に表現していたものに時間経過を組み合わせていきます。