WIP gldemo spin tiles

Author: jcorbin

cube/gldemo.frag.glsl

@@ -7,11 +7,12 @@ precision highp sampler2DArray;
 uniform sampler2DArray sheet;
 
 in float sheetLayer;
+in mat3 tileTransform;
 
 out lowp vec4 color;
 
 void main(void) {
-  mediump vec2 tileAt = gl_PointCoord;
+  mediump vec2 tileAt = (tileTransform * vec3(gl_PointCoord, 1)).xy;
 
   color = texture(sheet, vec3(tileAt, sheetLayer));
 }

cube/gldemo.js

@@ -111,6 +111,7 @@ export default async function demo({
 
   const attr = {
     loc: mustGetAttr('loc'), // vec2
+    spin: mustGetAttr('spin'), // float
     size: mustGetAttr('size'), // float
     tileID: mustGetAttr('tileID'), // uvec2
   };
@@ -193,8 +194,8 @@ export default async function demo({
       const H = Math.ceil(height / cellSize);
       const N = (W + 1) * H;
 
-      if (locData.length != 2 * N)
-        locData = new Float32Array(2 * N)
+      if (locData.length != 3 * N)
+        locData = new Float32Array(3 * N)
       else
         locData.fill(0);
 
@@ -205,9 +206,15 @@ export default async function demo({
 
       for (let rand = 0xdeadbeefn, i = 0, j = 0, x = 0, y = 0; i < N;) {
         rand = rand * 6364136223846793005n + 1442695040888963407n;
-        tileData[i++] = Number(rand >> 17n & 0xffffffffn) % maxTileID;
+        const tileID = Number(rand >> 17n & 0xffffffffn) % maxTileID;
+
+        rand = rand * 6364136223846793005n + 1442695040888963407n;
+        const spin = (Number(rand >> 17n & 0xffffffffn) % 0xffff) / 0x10000;
+
+        tileData[i++] = tileID;
         locData[j++] = x;
         locData[j++] = y;
+        locData[j++] = spin;
         if (++x > W) x = 0, y++;
       }
     }
@@ -262,11 +269,15 @@ export default async function demo({
     // to gl.draw* if/as we scale out to multiple draw calls
 
     gl.enableVertexAttribArray(attr.loc);
+    gl.enableVertexAttribArray(attr.spin);
     gl.enableVertexAttribArray(attr.tileID);
     gl.vertexAttrib1f(attr.size, cellSize);
 
+    const locStride = 3 * locData.BYTES_PER_ELEMENT;
+
     gl.bindBuffer(gl.ARRAY_BUFFER, locBuffer)
-    gl.vertexAttribPointer(attr.loc, 2, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(attr.loc, 2, gl.FLOAT, false, locStride, 0);
+    gl.vertexAttribPointer(attr.spin, 1, gl.FLOAT, false, locStride, 2 * locData.BYTES_PER_ELEMENT);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, tileBuffer)
     gl.vertexAttribIPointer(attr.tileID, 1, gl.UNSIGNED_SHORT, 0, 0);

cube/gldemo.vert.glsl

@@ -1,15 +1,19 @@
 #version 300 es
 
+#define TAU 6.283185307179586
+
 precision highp float;
 precision highp int;
 
 uniform mat4 perspective;
 
 in vec2 loc;
+in float spin;
 in float size;
 in uint tileID;
 
 out float sheetLayer;
+out mat3 tileTransform;
 
 void main(void) {
   gl_Position = perspective * vec4(
@@ -18,6 +22,22 @@ void main(void) {
     1.0  // w
   );
 
+  float theta = spin * TAU;
+  float cost = cos(theta);
+  float sint = sin(theta);
+
+  mat3 spinOffset = mat3(
+    vec3(1.0, 0.0, 0.0),
+    vec3(0.0, 1.0, 0.0),
+    vec3(0.5, 0.5, 1.0)
+  );
+
+  tileTransform = spinOffset * mat3(
+    vec3(cost, -sint, 0.0),
+    vec3(sint, cost, 0.0),
+    vec3(0.0, 0.0, 1.0)
+  ) * inverse(spinOffset);
+
   gl_PointSize = size;
 
   sheetLayer = float(tileID);