マルチメディアを学ぶ WebGL、ダブルバッファリング、画像、形式、ビットマップ

ハンズオンJavaScript
楽天ブックス
Yahoo!
au PAY マーケット

開発環境

ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の15章(マルチメディアを学ぶ)、15.9(練習問題)の15-4の解答を求めてみる。

コード

let jscanvas = document.querySelector('#jscanvas'),
    offscreen = new OffscreenCanvas(jscanvas.width, jscanvas.height),
    gl = offscreen.getContext('webgl'),
    vertices = [
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5
    ],
    vertexBuffer = gl.createBuffer();

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

let vertexCode = `
  attribute vec2 coordinates;
  void main(void) {
    gl_Position = vec4(coordinates, 0., 1.);
  }
`,
    vertexShader = gl.createShader(gl.VERTEX_SHADER);

gl.shaderSource(vertexShader, vertexCode);
gl.compileShader(vertexShader);

let fragmentCode = `
  void main(void) {
      gl_FragColor = vec4(1., 1., 1., 1.);
  }
`,
    fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(fragmentShader, fragmentCode);
gl.compileShader(fragmentShader);

let shaderProgram = gl.createProgram();

gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

let coordinates = gl.getAttribLocation(shaderProgram, 'coordinates');

gl.vertexAttribPointer(coordinates, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coordinates);

gl.clearColor(0., 0., 0., 1.);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0, 0, jscanvas.width, jscanvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 3);

let ctx = jscanvas.getContext('bitmaprenderer'),
    bitmap = offscreen.transferToImageBitmap();

ctx.transferFromImageBitmap(bitmap);