WIP glsl es 3.0 re-integration

Author: jcorbin

cube/gldemo.frag.glsl

@@ -1,11 +1,21 @@
+#version 300 es
+
+precision highp float;
+precision highp int;
+precision highp sampler2DArray;
+
 uniform sampler2D sheet;
 
-uniform highp vec2 sheetCellSize;
-uniform highp vec2 sheetBounds;
+uniform uvec2 sheetBounds;
+
+in vec2 sheetAt;
 
-varying highp vec2 sheetAt;
+out lowp vec4 color;
 
 void main(void) {
   mediump vec2 tileAt = gl_PointCoord;
-  gl_FragColor = texture2D(sheet, (sheetAt + tileAt) / sheetBounds);
+  color = texture(sheet,
+    (sheetAt + tileAt)
+    / vec2(float(sheetBounds.x), float(sheetBounds.y))
+  );
 }

cube/gldemo.js

@@ -101,15 +101,15 @@ export default async function demo({
   };
 
   const uni = {
-    sheetBounds: mustGetUniform('sheetBounds'), // mediump vec2
+    sheetBounds: mustGetUniform('sheetBounds'), // uvec2
     sheet: mustGetUniform('sheet'), // sampler2D
     perspective: mustGetUniform('perspective'), // mediump mat4
   };
 
   const attr = {
-    tileID: mustGetAttr('tileID'), // float
     loc: mustGetAttr('loc'), // vec2
     size: mustGetAttr('size'), // float
+    tileID: mustGetAttr('tileID'), // uvec2
   };
 
   /// notes from https://webglfundamentals.org/webgl/lessons/webgl-and-alpha.html
@@ -156,7 +156,6 @@ export default async function demo({
 
   let tileSize = 0;
   let maxTileID = 0;
-  let sheetBounds = { x: 0, y: 0 };
 
   const perspective = mat4.identity(new Float32Array(16));
 
@@ -267,7 +266,7 @@ export default async function demo({
     gl.vertexAttribPointer(attr.loc, 2, gl.FLOAT, false, 0, 0);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, tileBuffer)
-    gl.vertexAttribPointer(attr.tileID, 1, gl.UNSIGNED_SHORT, false, 0, 0);
+    gl.vertexAttribIPointer(attr.tileID, 1, gl.UNSIGNED_SHORT, 0, 0);
 
     /// per frame drawing pass
     gl.clear(gl.COLOR_BUFFER_BIT);
@@ -277,10 +276,16 @@ export default async function demo({
 
   }
 
+  // [.WebGL-0x104015f3800] GL_INVALID_OPERATION: Uniform size does not match uniform method.
+  // gldemo.html:1 [.WebGL-0x104015f3800] GL_INVALID_OPERATION: Uniform size does not match uniform method.
+  // 253[.WebGL-0x104015f3800] GL_INVALID_OPERATION: Vertex shader input type does not match the type of the bound vertex attribute.
+  // gldemo.html:1 [.WebGL-0x104015f3800] GL_INVALID_OPERATION: Uniform size does not match uniform method.
+  // gldemo.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.
+
   function updateSheetTex() {
-    sheetBounds.x = Math.floor($sheet.width / tileSize);
-    sheetBounds.y = Math.floor($sheet.height / tileSize);
-    gl.uniform2f(uni.sheetBounds, sheetBounds.x, sheetBounds.y);
+    gl.uniform2ui(uni.sheetBounds,
+      Math.floor($sheet.width / tileSize),
+      Math.floor($sheet.height / tileSize));
 
     gl.activeTexture(sheetTexUnit);
     gl.bindTexture(sheetTexTarget, sheetTex);

cube/gldemo.vert.glsl

@@ -1,18 +1,17 @@
-uniform highp vec2 sheetCellSize;
-uniform highp vec2 sheetBounds;
+#version 300 es
 
-uniform highp mat4 perspective;
+precision highp float;
+precision highp int;
 
-attribute vec2 loc;
-attribute float size;
-attribute float tileID; // id
+uniform uvec2 sheetBounds;
 
-varying vec2 sheetAt;
+uniform mat4 perspective;
 
-vec2 intmodiv(float a, float b) {
-  float m = a - floor((a + 0.5) / b) * b;
-  return vec2(floor(m + 0.5), floor(a / b));
-}
+in vec2 loc;
+in float size;
+in uint tileID;
+
+out vec2 sheetAt;
 
 void main(void) {
   gl_Position = perspective * vec4(
@@ -23,5 +22,7 @@ void main(void) {
 
   gl_PointSize = size;
 
-  sheetAt = intmodiv(tileID, sheetBounds.x);
+  sheetAt = vec2(
+    tileID % sheetBounds.x,
+    tileID / sheetBounds.x);
 }