0
WebGLを使用してソリティアカードを獲得するようなアニメーションを作ろうとしています。私は複数のカードを描くために次のコードを書いた。その後drawArraysを何度か呼び出してレンダリングバッファを維持する
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 400;
document.body.appendChild(canvas);
const gl = canvas.getContext('webgl');
const program = gl.createProgram();
const shaderSources = {
VERTEX_SHADER: `
precision highp float;
attribute vec2 aCoord;
uniform float uOffset;
void main(void) {
gl_Position = vec4(aCoord + vec2(uOffset, 0.0), 0.0, 1.0);
}
`,
FRAGMENT_SHADER: `
precision highp float;
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
}
for (let i in shaderSources) {
const shader = gl.createShader(gl[i]);
gl.shaderSource(shader, shaderSources[i]);
gl.compileShader(shader);
gl.attachShader(program, shader);
}
gl.linkProgram(program);
gl.useProgram(program);
const aCoordLocation = gl.getAttribLocation(program, 'aCoord');
const aCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, aCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-0.75, -0.25, -0.25, -0.25, -0.25, 0.25,
-0.75, -0.25, -0.75, 0.25, -0.25, 0.25
]), gl.STATIC_DRAW);
gl.enableVertexAttribArray(aCoordLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, aCoordBuffer);
gl.vertexAttribPointer(aCoordLocation, 2, gl.FLOAT, false, 0, 0);
私は、次のコードを実行すると、予想通り、2つの赤色の四角が描かれています。
gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 1);
gl.drawArrays(gl.TRIANGLES, 0, 6);
アニメーションのために1つの図面が遅れた場合、1つの正方形だけがレンダリングされます（最初の四角形は消えます）。
gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
setTimeout(() => {
gl.uniform1f(gl.getUniformLocation(program, 'uOffset'), 1);
gl.drawArrays(gl.TRIANGLES, 0, 6);
});
drawArrayを複数回実行したときにレンダリングバッファを残す方法はありますか？ WebGLContextAttributes dictionaryで