Add webgl-compute-texture demo

9ballsyndrome · Apr 9, 2019 · 9ff5507 · 9ff5507
1 parent 015f9ec
commit 9ff5507
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 0 deletions.
diff --git a/document/190409_webgl-compute-texture_demo.png b/document/190409_webgl-compute-texture_demo.png
diff --git a/webgl-compute-texture/css/style.css b/webgl-compute-texture/css/style.css
@@ -0,0 +1,52 @@
+body {
+    margin: 0;
+    padding: 0;
+    background-color: white;
+    overflow: hidden;
+    font-family: sans-serif;
+}
+
+#myCanvas {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+}
+
+body.error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(85%, 35%, 35%);
+}
+
+body.error #contents {
+    display: none;
+}
+
+#error {
+    margin: 0;
+    padding: 0;
+    width: 50vw;
+    display: none;
+    text-align: center;
+}
+
+@media (max-width: 480px) {
+    #error {
+        width: 100vw;
+    }
+}
+
+body.error #error {
+    display: block;
+}
+
+#error h2 {
+    font-weight: bold;
+    font-size: 40px;
+    margin-bottom: 20px;
+}
+
+#error p {
+    font-size: 30px;
+}
diff --git a/webgl-compute-texture/index.html b/webgl-compute-texture/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, user-scalable=no"/>
+    <meta name="google" content="notranslate"/>
+    <title>WebGL ComputeShader Texture Demo</title>
+    <link rel="stylesheet" href="css/style.css"/>
+    <script defer src="js/script.js"></script>
+  </head>
+  <body>
+    <div id="error">
+      <h2>WebGL 2.0 Compute not available</h2>
+      <p>
+        Make sure you are on a system with WebGL 2.0 Compute enabled.
+        Windows Google Chrome or <a href="https://www.microsoftedgeinsider.com/en-us/download/?platform=win10">Microsoft Edge Insider Channels</a> with Command Line Switches:
+        "--enable-webgl2-compute-context", "--use-angle=gl" and "--use-cmd-decoder=passthrough".
+      </p>
+    </div>
+    <div id="contents">
+      <canvas id="myCanvas"></canvas>
+    </div>
+  </body>
+</html>
diff --git a/webgl-compute-texture/js/script.js b/webgl-compute-texture/js/script.js
@@ -0,0 +1,70 @@
+const CANVAS_WIDTH = 512;
+const CANVAS_HEIGHT = 512;
+
+const script = async () => {
+  // Canvas setup
+  const canvas = document.getElementById('myCanvas');
+  canvas.width = CANVAS_WIDTH;
+  canvas.height = CANVAS_HEIGHT;
+
+  // create WebGL2ComputeRenderingContext
+  const context = canvas.getContext('webgl2-compute', {antialias: false});
+  if (!context) {
+    document.body.className = 'error';
+    return;
+  }
+
+  // ComputeShader source
+  // language=GLSL
+  const computeShaderSource = `#version 310 es
+  layout (local_size_x = 16, local_size_y = 16, local_size_z = 1) in;
+  layout (rgba8, binding = 0) writeonly uniform highp image2D destTex;
+
+  void main() {
+    ivec2 storePos = ivec2(gl_GlobalInvocationID.xy);
+    imageStore(destTex, storePos, vec4(vec2(gl_WorkGroupID.xy) / vec2(gl_NumWorkGroups.xy), 0.0, 1.0));
+  }
+  `;
+
+  // create WebGLShader for ComputeShader
+  const computeShader = context.createShader(context.COMPUTE_SHADER);
+  context.shaderSource(computeShader, computeShaderSource);
+  context.compileShader(computeShader);
+  if (!context.getShaderParameter(computeShader, context.COMPILE_STATUS)) {
+    console.log(context.getShaderInfoLog(computeShader));
+    return;
+  }
+
+  // create WebGLProgram for ComputeShader
+  const computeProgram = context.createProgram();
+  context.attachShader(computeProgram, computeShader);
+  context.linkProgram(computeProgram);
+  if (!context.getProgramParameter(computeProgram, context.LINK_STATUS)) {
+    console.log(context.getProgramInfoLog(computeProgram));
+    return;
+  }
+
+  // create texture for ComputeShader write to
+  const texture = context.createTexture();
+  context.bindTexture(context.TEXTURE_2D, texture);
+  context.texStorage2D(context.TEXTURE_2D, 1, context.RGBA8, CANVAS_WIDTH, CANVAS_HEIGHT);
+  context.bindImageTexture(0, texture, 0, false, 0, context.WRITE_ONLY, context.RGBA8);
+
+  // create frameBuffer to read from texture
+  const frameBuffer = context.createFramebuffer();
+  context.bindFramebuffer(context.READ_FRAMEBUFFER, frameBuffer);
+  context.framebufferTexture2D(context.READ_FRAMEBUFFER, context.COLOR_ATTACHMENT0, context.TEXTURE_2D, texture, 0);
+
+  // execute ComputeShader
+  context.useProgram(computeProgram);
+  context.dispatchCompute(CANVAS_WIDTH / 16, CANVAS_HEIGHT / 16, 1);
+  context.memoryBarrier(context.SHADER_IMAGE_ACCESS_BARRIER_BIT);
+
+  // show computed texture to Canvas
+  context.blitFramebuffer(
+    0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+    0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+    context.COLOR_BUFFER_BIT, context.NEAREST);
+};
+
+window.addEventListener('DOMContentLoaded', script);