WIP gldemo switch to 2d array texture

Author: jcorbin

cube/gldemo.frag.glsl

@@ -4,18 +4,14 @@ precision highp float;
 precision highp int;
 precision highp sampler2DArray;
 
-uniform sampler2D sheet;
+uniform sampler2DArray sheet;
 
-uniform uvec2 sheetBounds;
-
-in vec2 sheetAt;
+in float sheetLayer;
 
 out lowp vec4 color;
 
 void main(void) {
   mediump vec2 tileAt = gl_PointCoord;
-  color = texture(sheet,
-    (sheetAt + tileAt)
-    / vec2(float(sheetBounds.x), float(sheetBounds.y))
-  );
+
+  color = texture(sheet, vec3(tileAt, sheetLayer));
 }

cube/gldemo.js

@@ -13,11 +13,13 @@ const shaderSources = [
 /**
  * @param {object} param
  * @param {HTMLCanvasElement} param.$world
+ * @param {number} [param.cellSize]
  * @param {string} [param.glyphFont]
  * @param {{glyph: string}[]} param.tiles
  */
 export default async function demo({
   $world,
+  cellSize = 64,
   glyphFont = 'sans',
   tiles,
 }) {
@@ -103,7 +105,6 @@ export default async function demo({
   };
 
   const uni = {
-    sheetBounds: mustGetUniform('sheetBounds'), // uvec2
     sheet: mustGetUniform('sheet'), // sampler2D
     perspective: mustGetUniform('perspective'), // mediump mat4
   };
@@ -148,16 +149,17 @@ export default async function demo({
   gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
   // NOTE: must be a power of 2
-  const tileSize = 128;
+  const tileSize = 256;
 
   const sheetTex = gl.createTexture();
   const sheetTexUnit = gl.TEXTURE0;
-  const sheetTexTarget = gl.TEXTURE_2D;
+  const sheetTexTarget = gl.TEXTURE_2D_ARRAY;
+  const sheetMipLevels = 4;
+  const sheetLayers = 2048;
 
-  // TODO we're using a classic gl.TEXTURE_2D atlas for now, but are probably
-  // better suited by gl.TEXTURE_2D_ARRAY from webgl2.
-  // The biggest immediate difference would be less concern around translating
-  // texel coordinates (the divide-by-sheetBounds in the fragment shader.)
+  gl.activeTexture(sheetTexUnit);
+  gl.bindTexture(sheetTexTarget, sheetTex);
+  gl.texStorage3D(sheetTexTarget, sheetMipLevels, gl.RGBA8, tileSize, tileSize, sheetLayers);
 
   let maxTileID = 0;
 
@@ -184,14 +186,11 @@ export default async function demo({
 
     const { width, height } = $world;
 
-    // increase to "zoom out"
-    const zoom = 1;
-
     /// build world data
     // NOTE: typically this isn't done per-frame, but this is a demo
     {
-      const W = Math.ceil(width / tileSize) * zoom;
-      const H = Math.ceil(height / tileSize) * zoom;
+      const W = Math.ceil(width / cellSize);
+      const H = Math.ceil(height / cellSize);
       const N = (W + 1) * H;
 
       if (locData.length != 2 * N)
@@ -264,7 +263,7 @@ export default async function demo({
 
     gl.enableVertexAttribArray(attr.loc);
     gl.enableVertexAttribArray(attr.tileID);
-    gl.vertexAttrib1f(attr.size, tileSize / zoom);
+    gl.vertexAttrib1f(attr.size, cellSize);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, locBuffer)
     gl.vertexAttribPointer(attr.loc, 2, gl.FLOAT, false, 0, 0);
@@ -285,8 +284,8 @@ export default async function demo({
 
     const glyphs = tiles.map(({ glyph }) => glyph);
 
-    $sheet.width = tileSize * glyphs.length;
-    $sheet.height = tileSize;
+    $sheet.width = tileSize;
+    $sheet.height = tileSize * glyphs.length;
 
     // TODO this is necessary to stop topline clipping, but why...
     const fontSize = tileSize * 0.9;
@@ -334,19 +333,22 @@ export default async function demo({
         ctx.fillStyle = 'black';
         ctx.fillText(glyph, x + Math.floor(widthRem / 2), y);
 
-        x += tileSize;
+        y += tileSize;
         maxTileID++;
       }
     }
 
-    gl.uniform2ui(uni.sheetBounds,
-      Math.floor($sheet.width / tileSize),
-      Math.floor($sheet.height / tileSize));
+    const haveLayers = $sheet.height / tileSize;
 
     gl.activeTexture(sheetTexUnit);
     gl.bindTexture(sheetTexTarget, sheetTex);
 
-    gl.texImage2D(sheetTexTarget, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, $sheet);
+    gl.texSubImage3D(
+      sheetTexTarget, 0,
+      0, 0, 0,
+      tileSize, tileSize, haveLayers,
+      gl.RGBA, gl.UNSIGNED_BYTE, $sheet);
+
     gl.generateMipmap(sheetTexTarget);
 
     gl.texParameteri(sheetTexTarget, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

cube/gldemo.vert.glsl

@@ -3,15 +3,13 @@
 precision highp float;
 precision highp int;
 
-uniform uvec2 sheetBounds;
-
 uniform mat4 perspective;
 
 in vec2 loc;
 in float size;
 in uint tileID;
 
-out vec2 sheetAt;
+out float sheetLayer;
 
 void main(void) {
   gl_Position = perspective * vec4(
@@ -22,7 +20,5 @@ void main(void) {
 
   gl_PointSize = size;
 
-  sheetAt = vec2(
-    tileID % sheetBounds.x,
-    tileID / sheetBounds.x);
+  sheetLayer = float(tileID);
 }