v0.2.2

mmmurray · Oct 6, 2023 · aa68181 · aa68181
1 parent 0225fdd
commit aa68181
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "triangular",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Type safe wrapper for WebGL.",
   "author": "Mark Murray",
   "license": "MIT",

diff --git a/src/__tests__/gl.test.ts b/src/__tests__/gl.test.ts
@@ -18,6 +18,38 @@ const createMockCanvas = (
   const calls: string[] = [];
 
   const context: WebGLRenderingContext = {
+    TEXTURE0: 'TEXTURE0',
+    TEXTURE1: 'TEXTURE1',
+    TEXTURE2: 'TEXTURE2',
+    TEXTURE3: 'TEXTURE3',
+    TEXTURE4: 'TEXTURE4',
+    TEXTURE5: 'TEXTURE5',
+    TEXTURE6: 'TEXTURE6',
+    TEXTURE7: 'TEXTURE7',
+    TEXTURE8: 'TEXTURE8',
+    TEXTURE9: 'TEXTURE9',
+    TEXTURE10: 'TEXTURE10',
+    TEXTURE11: 'TEXTURE11',
+    TEXTURE12: 'TEXTURE12',
+    TEXTURE13: 'TEXTURE13',
+    TEXTURE14: 'TEXTURE14',
+    TEXTURE15: 'TEXTURE15',
+    TEXTURE16: 'TEXTURE16',
+    TEXTURE17: 'TEXTURE17',
+    TEXTURE18: 'TEXTURE18',
+    TEXTURE19: 'TEXTURE19',
+    TEXTURE20: 'TEXTURE20',
+    TEXTURE21: 'TEXTURE21',
+    TEXTURE22: 'TEXTURE22',
+    TEXTURE23: 'TEXTURE23',
+    TEXTURE24: 'TEXTURE24',
+    TEXTURE25: 'TEXTURE25',
+    TEXTURE26: 'TEXTURE26',
+    TEXTURE27: 'TEXTURE27',
+    TEXTURE28: 'TEXTURE28',
+    TEXTURE29: 'TEXTURE29',
+    TEXTURE30: 'TEXTURE30',
+    TEXTURE31: 'TEXTURE31',
     COLOR_BUFFER_BIT: 1,
     DEPTH_BUFFER_BIT: 2,
     ARRAY_BUFFER: 'array_buffer',
@@ -52,6 +84,7 @@ const createMockCanvas = (
     ...createTrackedFn('shaderSource', calls),
     ...createTrackedFn('compileShader', calls),
     ...createTrackedFn('bindBuffer', calls),
+    ...createTrackedFn('activeTexture', calls),
     ...createTrackedFn('bindTexture', calls),
     ...createTrackedFn('bufferData', calls),
     ...createTrackedFn('enableVertexAttribArray', calls),
@@ -71,7 +104,7 @@ const createMockCanvas = (
 
       return context;
     },
-  } as HTMLCanvasElement;
+  } as any;
 
   return { canvas, getCalls };
 };
@@ -234,6 +267,7 @@ test('can draw triangles with texture', () => {
     'enableVertexAttribArray("aloc:program-1:a_at1")',
     'vertexAttribPointer("aloc:program-1:a_at1", 2, "float", false, 0, 0)',
     'uniformMatrix2fv("uloc:program-1:u_un1", false, {"0":1,"1":0,"2":0,"3":1})',
+    'activeTexture("TEXTURE0")',
     'bindTexture("texture-2d", "texture-1")',
     'uniform1i("uloc:program-1:t_tx1", 0)',
     'drawArrays("triangles", 0, 3)',

diff --git a/src/gl.ts b/src/gl.ts
@@ -5,7 +5,7 @@ import {
   UniformShaderTypeName,
 } from './types';
 
-const isPowerOf2 = (value: number) => (value & (value - 1)) == 0;
+const isPowerOf2 = (value: number) => (value & (value - 1)) === 0;
 
 const getSizeOfType = (type: AttributeShaderTypeName): number => {
   switch (type) {
@@ -115,6 +115,41 @@ const createGL = (canvas: HTMLCanvasElement): GL => {
   const buffers: { [id: number]: WebGLBuffer | undefined } = {};
   const textures: { [id: number]: WebGLTexture | undefined } = {};
 
+  const textureUnits = [
+    ctx.TEXTURE0,
+    ctx.TEXTURE1,
+    ctx.TEXTURE2,
+    ctx.TEXTURE3,
+    ctx.TEXTURE4,
+    ctx.TEXTURE5,
+    ctx.TEXTURE6,
+    ctx.TEXTURE7,
+    ctx.TEXTURE8,
+    ctx.TEXTURE9,
+    ctx.TEXTURE10,
+    ctx.TEXTURE11,
+    ctx.TEXTURE12,
+    ctx.TEXTURE13,
+    ctx.TEXTURE14,
+    ctx.TEXTURE15,
+    ctx.TEXTURE16,
+    ctx.TEXTURE17,
+    ctx.TEXTURE18,
+    ctx.TEXTURE19,
+    ctx.TEXTURE20,
+    ctx.TEXTURE21,
+    ctx.TEXTURE22,
+    ctx.TEXTURE23,
+    ctx.TEXTURE24,
+    ctx.TEXTURE25,
+    ctx.TEXTURE26,
+    ctx.TEXTURE27,
+    ctx.TEXTURE28,
+    ctx.TEXTURE29,
+    ctx.TEXTURE30,
+    ctx.TEXTURE31,
+  ];
+
   return {
     setViewport: (x, y, width, height) => {
       ctx.viewport(x, y, width, height);
@@ -164,7 +199,7 @@ const createGL = (canvas: HTMLCanvasElement): GL => {
 
         if (arrayData.length % sizeOfType !== 0) {
           throw new Error(
-            `Buffer data for attribute ${name} does not contain a multiple of ${sizeOfType} elements which is required for attributes of type ${type}`,
+            `Buffer data for attribute does not contain a multiple of ${sizeOfType} elements which is required for attributes of type ${type}`,
           );
         }
 
@@ -467,17 +502,21 @@ const createGL = (canvas: HTMLCanvasElement): GL => {
             setUniform(ctx, location, type, value);
           });
 
-          Object.entries(textureBuffers).forEach(([name, textureReference]) => {
-            const location = textureLocations[name];
-            const texture = textures[textureReference.id];
+          Object.entries(textureBuffers).forEach(
+            ([name, textureReference], textureIndex) => {
+              const location = textureLocations[name];
+              const texture = textures[textureReference.id];
 
-            if (!texture) {
-              throw new Error('Invalid texture reference');
-            }
+              if (!texture) {
+                throw new Error('Invalid texture reference');
+              }
 
-            ctx.bindTexture(ctx.TEXTURE_2D, texture);
-            ctx.uniform1i(location, 0);
-          });
+              const textureUnit = textureUnits[textureIndex];
+              ctx.activeTexture(textureUnit);
+              ctx.bindTexture(ctx.TEXTURE_2D, texture);
+              ctx.uniform1i(location, textureIndex);
+            },
+          );
 
           if (count === null) {
             throw new Error('No attribute buffer data supplied');