Add shape bin files, shape selection

src/regl_index.js

@@ -0,0 +1,132 @@
+import hexsphere_0 from "./shapes/hexsphere_r1_d0.bin"
+import hexsphere_1 from "./shapes/hexsphere_r1_d1.bin"
+import hexsphere_2 from "./shapes/hexsphere_r1_d2.bin"
+import hexsphere_3 from "./shapes/hexsphere_r1_d3.bin"
+import hexsphere_4 from "./shapes/hexsphere_r1_d4.bin"
+import hexsphere_5 from "./shapes/hexsphere_r1_d5.bin"
+import hexsphere_6 from "./shapes/hexsphere_r1_d6.bin"
+import icosahedron_0 from "./shapes/icosahedron_r1_d0.bin"
+import icosahedron_1 from "./shapes/icosahedron_r1_d1.bin"
+import icosahedron_2 from "./shapes/icosahedron_r1_d2.bin"
+import icosahedron_3 from "./shapes/icosahedron_r1_d3.bin"
+import icosahedron_4 from "./shapes/icosahedron_r1_d4.bin"
+import icosahedron_5 from "./shapes/icosahedron_r1_d5.bin"
+import icosahedron_6 from "./shapes/icosahedron_r1_d6.bin"
+import icosahedron_7 from "./shapes/icosahedron_r1_d7.bin"
+
+const shapes = {
+  "hexsphere_0": hexsphere_0,
+  "hexsphere_1": hexsphere_1,
+  "hexsphere_2": hexsphere_2,
+  "hexsphere_3": hexsphere_3,
+  "hexsphere_4": hexsphere_4,
+  "hexsphere_5": hexsphere_5,
+  "hexsphere_6": hexsphere_6,
+  "icosahedron_0": icosahedron_0,
+  "icosahedron_1": icosahedron_1,
+  "icosahedron_2": icosahedron_2,
+  "icosahedron_3": icosahedron_3,
+  "icosahedron_4": icosahedron_4,
+  "icosahedron_5": icosahedron_5,
+  "icosahedron_6": icosahedron_6,
+  "icosahedron_7": icosahedron_7,
+}
+
+const regl = require("regl")({
+  extensions: ["OES_element_index_uint"],
+})
+const camera = require("regl-camera")(regl, {
+  center: [0, 0, 0],
+  distance: 3,
+})
+
+const drawShape = hexsphere => regl({
+  vert: `
+  precision mediump float;
+  uniform mat4 projection, view;
+  attribute vec3 position, normal, color;
+  varying vec3 fragNormal, fragPosition, fragColor;
+  void main() {
+    fragNormal = normal;
+    fragPosition = position;
+    fragColor = color;
+    gl_Position = projection * view * vec4(position, 1.0);
+  }`,
+
+  frag: `
+  precision mediump float;
+  struct Light {
+    vec3 color;
+    vec3 position;
+  };
+  uniform Light lights[1];
+  varying vec3 fragNormal, fragPosition, fragColor;
+  void main() {
+    vec3 normal = normalize(fragNormal);
+    vec3 light = vec3(0.1, 0.1, 0.1);
+    for (int i = 0; i < 1; i++) {
+      vec3 lightDir = normalize(lights[i].position - fragPosition);
+      float diffuse = max(0.0, dot(lightDir, normal));
+      light += diffuse * lights[i].color;
+    }
+    gl_FragColor = vec4(fragColor * light, 1.0);
+  }`,
+
+  attributes: {
+    position: hexsphere.positions,
+    normal: hexsphere.normals,
+    color: hexsphere.colors,
+  },
+  elements: hexsphere.cells,
+  uniforms: {
+    "lights[0].color": [1, 1, 1],
+    "lights[0].position": ({ tick }) => {
+      const t = 0.008 * tick
+      return [
+        1000 * Math.cos(t),
+        1000 * Math.sin(t),
+        1000 * Math.sin(t)
+      ]
+    },
+  },
+})
+
+let draw = null
+
+const loadShape = shape => {
+  fetch(shape)
+    .then(response => response.arrayBuffer())
+    .then(buffer => {
+      let reader = new DataView(buffer);
+      let numVertices = reader.getUint32(0, true);
+      let numCells = reader.getUint32(4, true);
+      const shapeData = {
+        positions: new Float32Array(buffer, 8, numVertices * 3),
+        normals: new Float32Array(buffer, numVertices * 12 + 8, numVertices * 3),
+        colors: new Float32Array(buffer, numVertices * 24 + 8, numVertices * 3),
+        cells: new Uint32Array(buffer, numVertices * 36 + 8, numCells * 3),
+      }
+      draw = drawShape(shapeData)
+      regl.frame(() => {
+        regl.clear({
+          depth: 1,
+          color: [0, 0, 0, 1]
+        })
+
+        camera(() => {
+          draw()
+        })
+      })
+      shapeSelectLoading.style.display = "none"
+    })
+}
+
+const shapeSelect = document.querySelector("select#shape-select")
+const shapeSelectLoading = document.querySelector("#shape-loading")
+shapeSelect.value = "hexsphere_4"
+loadShape(hexsphere_4)
+
+shapeSelect.addEventListener("change", event => {
+  shapeSelectLoading.style.display = "inline"
+  loadShape(shapes[event.target.value])
+})