examples/mulitple-render-targets-3d-texture.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8">
    <!--

    @license twgl.js Copyright (c) 2015, Gregg Tavares All Rights Reserved.
    Available via the MIT license.
    see: http://github.com/greggman/twgl.js for details

    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <meta property="og:title" content="TWGL.js - multiple render targets 3d texture" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="http://twgljs.org/examples/screenshots/samplers.png" />
    <meta property="og:description" content="TWGL.js -  - multiple render targets 3d texture" />
    <meta property="og:url" content="http://twgljs.org" />

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@greggman">
    <meta name="twitter:creator" content="@greggman">
    <meta name="twitter:domain" content="twgljs.org">
    <meta name="twitter:title" content="TWGL.js -  - multiple render targets 3d texture">
    <meta name="twitter:url" content="http://twgljs.org/examples/samplers.html">
    <meta name="twitter:description" content="TWGL.js -  - multiple render targets 3d texture">
    <meta name="twitter:image:src" content="http://twgljs.org/examples/screenshots/samplers.png">

    <link href="/resources/images/twgljs-icon.png" rel="shortcut icon" type="image/png">

    <title>twgl.js -  - multiple render targets 3d texture</title>
    <style>
      body {
          margin: 0;
          font-family: monospace;
      }
      canvas {
          display: block;
          width: 100vw;
          height: 100vh;
      }
      #b {
        position: absolute;
        top: 10px;
        width: 100%;
        text-align: center;
        z-index: 2;
      }
      #no-webgl2 {
        position: absolute;
        left: 0;
        top: 0;
        background: red;
        color: white;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <canvas id="c"></canvas>
    <div id="b"><a href="http://twgljs.org">twgl.js</a> - multiple render targets 3d texture</div>
    <div id="no-webgl2" style="display: none;">
      <div>Sorry but your browser doesn't appear to support WebGL2</div>
    </div>
  </body>
  <script type="module">
import * as twgl from '../dist/6.x/twgl-full.module.js';

function main() {
  const gl = document.getElementById("c").getContext("webgl2");
  if (!gl) {
    document.querySelector("#no-webgl2").style.display = "";
    return;
  }

  const pointVS = `
  #version 300 es

  uniform int size;
  uniform highp sampler3D tex;
  out vec4 v_color;

  void main() {
    int x = gl_VertexID % size;
    int y = (gl_VertexID / size) % size;
    int z = gl_VertexID / (size * size);
    
    v_color = texelFetch(tex, ivec3(x, y, z), 0);
    
    gl_PointSize = 8.0;
    
    vec3 normPos = vec3(x, y, z) / float(size); 
    gl_Position = vec4(
       mix(-0.9, 0.6, normPos.x) + mix(0.0,  0.3, normPos.y),
       mix(-0.6, 0.9, normPos.z) + mix(0.0, -0.3, normPos.y),
       0,
       1);
  }
  `;

  const pointFS = `
  #version 300 es
  precision highp float;

  in vec4 v_color;
  out vec4 outColor;

  void main() {
    outColor = v_color;
  }
  `;

  const rtVS = `
  #version 300 es
  in vec4 position;
  void main() {
    gl_Position = position;
  }
  `;

  const rtFS = `
  #version 300 es
  precision highp float;

  uniform vec2 resolution;
  out vec4 outColor[4];

  void main() {
    vec2 xy = gl_FragCoord.xy / resolution;
    outColor[0] = vec4(1, 0, xy.x, 1);
    outColor[1] = vec4(0.5, xy.yx, 1);
    outColor[2] = vec4(xy, 0, 1);
    outColor[3] = vec4(1, vec2(1) - xy, 1);
  }
  `;

  const pointProgramInfo = twgl.createProgramInfo(gl, [pointVS, pointFS]);
  const rtProgramInfo = twgl.createProgramInfo(gl, [rtVS, rtFS]);

  const size = 4;
  const numPoints = size * size * size;
  const tex = twgl.createTexture(gl, {
    target: gl.TEXTURE_3D,
    width: size,
    height: size,
    depth: size,
  });

  const clipspaceFullSizeQuadBufferInfo = twgl.createBufferInfoFromArrays(gl, {
    position: {
      data: [
        -1, -1,
         1, -1,
        -1,  1,

        -1,  1,
         1, -1,
         1,  1,
      ],
      numComponents: 2,
    },
  });

  const fbi = twgl.createFramebufferInfo(gl, [
    { attachment: tex, target: gl.TEXTURE_3D, layer: 0, },
    { attachment: tex, target: gl.TEXTURE_3D, layer: 1, },
    { attachment: tex, target: gl.TEXTURE_3D, layer: 2, },
    { attachment: tex, target: gl.TEXTURE_3D, layer: 3, },
  ], 4, 4);

  gl.drawBuffers([
     gl.COLOR_ATTACHMENT0,
     gl.COLOR_ATTACHMENT1,
     gl.COLOR_ATTACHMENT2,
     gl.COLOR_ATTACHMENT3,
  ]);

  twgl.bindFramebufferInfo(gl, fbi);
  gl.useProgram(rtProgramInfo.program);
  twgl.setBuffersAndAttributes(
      gl,
      rtProgramInfo,
      clipspaceFullSizeQuadBufferInfo);
  twgl.setUniforms(rtProgramInfo, {
    resolution: [size, size],
  });
  twgl.drawBufferInfo(gl, clipspaceFullSizeQuadBufferInfo);

  twgl.bindFramebufferInfo(gl, null);
  gl.drawBuffers([
     gl.BACK,
  ]);

  gl.useProgram(pointProgramInfo.program);
  twgl.setUniforms(pointProgramInfo, {
    tex,
    size,
  });
  gl.drawArrays(gl.POINTS, 0, numPoints);
}
main();
  </script>
</html>