adds an example for 3D texture use

fixes amandaghassaei#8
clindsey · Feb 1, 2023 · 347ccfa · 347ccfa
1 parent 6991cde
commit 347ccfa
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -267,7 +267,7 @@ More info about using gpu-io with Threejs can be found in the [Threejs Example](
 
 ### Limitations
 
-- gpu-io currently only supports GPULayers with 1D or 2D arrays of dense data.  3D textures are not officially supported by the library.  You can still compute 3D simulations in gpu-io, you will just need to pass in your 3D position data as a 1D list to a GPULayer and then access it in the fragment shader using .xyz.  TODO: make example for this.
+- gpu-io currently only supports GPULayers with 1D or 2D arrays of dense data.  3D textures are not officially supported by the library.  You can still compute 3D simulations in gpu-io, you will just need to pass in your 3D position data as a 1D list to a GPULayer and then access it in the fragment shader using .xyz.  See [this example](https://github.com/amandaghassaei/gpu-io/blob/main/examples/texture-3d/index.js) for more details.
 - gpu-io does not currently allow you to pass in your own vertex shaders.  Currently all computation is happening in user-specified fragment shaders; vertex shaders are managed internally.
 - In order for the WRAP/FILTER polyfilling to work correctly, any calls to texture() must contain a direct reference to the sampler2D that it should operate on.  For example:
 

diff --git a/examples/texture-3d/index.html b/examples/texture-3d/index.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <title>GPU-IO - 3D Texture</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta charset="utf-8"/>
+    <script src="../../dist/gpu-io.min.js"></script>
+    <style>
+      body, html, canvas {
+        width: 32px; /* assuming texture cube will be 32x32x32 */
+        height: calc(32px * 32);
+        padding: 0;
+        margin: 0 auto;
+      }
+      </style>
+  </head>
+  <body>
+  </body>
+  <script src="index.js"></script>
+</html>
diff --git a/examples/texture-3d/index.js b/examples/texture-3d/index.js
@@ -0,0 +1,124 @@
+const {
+  GPUComposer,
+  GPULayer,
+  GPUProgram,
+  renderRGBProgram,
+  FLOAT,
+  INT,
+  REPEAT,
+  NEAREST,
+} = GPUIO;
+
+// Init a canvas element.
+const canvas = document.createElement('canvas');
+document.body.appendChild(canvas);
+
+// Init a composer.
+const composer = new GPUComposer({ canvas });
+
+// Create a texture of size [width, height * depth], this will be the 3D texture cube.
+// Draw a sphere inside the texture cube, sliced through the z-axis and vertically stacked
+const width = height = depth = 32
+const data = new Float32Array(width * height * depth * 3) // 1D array to store 3D texture data
+const sphereSDF = (x, y, z, radius) => Math.sqrt(x ** 2 + y ** 2 + z ** 2) - radius
+const step = (edge, x) => edge > x ? 0 : 1
+for (let z = 0; z < depth; z++) {
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const index = (y * width + x + (z * height * width)) * 3 // 3D texture coordinates to 1D array index
+      const xPos = x / width - 0.5 // put the sphere in the center
+      const yPos = y / height - 0.5
+      const zPos = z / depth - 0.5
+      const pct = step(sphereSDF(xPos, yPos, zPos, 0.5), 0) // 1 = inside sphere, 0 = outside sphere
+      data[index + 0] = pct * x / width // color the sphere slices
+      data[index + 1] = pct * y / height
+      data[index + 2] = pct * z / depth
+    }
+  }
+}
+const state = new GPULayer(composer, {
+  name: 'state',
+  dimensions: [width, height * depth],
+  numComponents: 3, // state data has three components.
+  type: FLOAT,
+  filter: NEAREST,
+  numBuffers: 2, // Use 2 buffers so we can toggle read/write from one to the other.
+  wrapX: REPEAT,
+  wrapY: REPEAT,
+  array: data,
+});
+
+// Init a program to move the sphere in the texture downwards.
+// Demonstrates how to access texture cube using x, y, z coordinates.
+const textureCubeProgram = new GPUProgram(composer, {
+  name: 'render',
+  fragmentShader: `
+    in vec2 v_uv;
+
+    uniform sampler2D u_state;
+    uniform vec3 u_size;
+
+    out vec3 out_result;
+
+    // assumes cube texture is size [width, height * depth]
+    vec3 uvToCube (vec2 uv, vec3 cubeSize) {
+      return vec3(
+        uv.x,
+        mod(uv.y, 1.0 / cubeSize.y) * cubeSize.y,
+        floor(uv.y / (1.0 / cubeSize.y)) / cubeSize.z
+      );
+    }
+
+    // cubeCoord components are [0..1]
+    vec2 cubeToUv (vec3 cubeCoord, vec3 cubeSize) {
+      float x = cubeCoord.x;
+      float y = cubeCoord.z + cubeCoord.y / cubeSize.z;
+      return vec2(x, y);
+    }
+
+    void main() {
+      vec3 cubeCoord = uvToCube(v_uv, u_size);
+      cubeCoord.z += 1.0 / u_size.z; // sphere falls down
+      vec2 uv = cubeToUv(cubeCoord, u_size);
+      out_result = texture(u_state, uv).xyz;
+    }
+  `,
+  uniforms: [
+    { // Index of sampler2D uniform to assign to value "u_state".
+      name: 'u_state',
+      value: 0,
+      type: INT,
+    },
+    { // Need dimensions for projecting coordinates between cube and plane.
+      name: 'u_size',
+      value: [width, height ,depth],
+      type: FLOAT,
+    },
+  ],
+});
+
+// Init a program to render state to canvas.
+// See https://github.com/amandaghassaei/gpu-io/tree/main/docs#gpuprogram-helper-functions for more built-in GPUPrograms to use.
+const renderProgram = renderRGBProgram(composer, {
+  name: 'render',
+  type: state.type,
+});
+
+// Simulation/render loop.
+function loop() {
+  window.requestAnimationFrame(loop);
+
+  // Compute state and write result to state.
+  composer.step({
+    program: textureCubeProgram,
+    input: state,
+    output: state,
+  });
+
+  // If no "output", will draw to canvas.
+  composer.step({
+    program: renderProgram,
+    input: state,
+  });
+}
+loop(); // Start animation loop.