Moved textureAllocator to separate repo.

Author: jacklehamster

build/index.js

@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "avl": "^1.5.3",
-    "gl-matrix": "^3.4.3"
+    "gl-matrix": "^3.4.3",
+    "texture-slot-allocator": "github:jacklehamster/texture-slot-allocator"
   }
 }

build/index.js.map

@@ -14,15 +14,17 @@ import {
   TRANSFORM_LOC,
   SLOT_SIZE_LOC,
   CAM_LOC,
+  MAX_TEXTURE_SIZE_LOC,
 } from './gl/attributes/Contants';
 import { TextureManager } from './gl/texture/TextureManager';
+import { ImageManager } from 'gl/texture/ImageManager';
 import vertexShader from 'generated/src/gl/resources/vertexShader.txt';
 import fragmentShader from 'generated/src/gl/resources/fragmentShader.txt';
 import { replaceTilda } from 'gl/utils/replaceTilda';
 import Matrix from 'gl/transform/Matrix';
 import { GLCamera } from 'gl/camera/GLCamera';
-import { ImageManager } from 'gl/texture/ImageManager';
-import { TextureSlotAllocator } from 'gl/texture/TextureSlotAllocator';
+//import { TextureSlotAllocator } from 'gl/texture/TextureSlotAllocator';
+import { TextureSlotAllocator } from 'texture-slot-allocator/src';
 
 const DEFAULT_ATTRIBUTES: WebGLContextAttributes = {
   alpha: true,
@@ -93,8 +95,6 @@ export class GLEngine extends Disposable {
     this.camera = new GLCamera(this.gl, this.uniforms);
 
     window.addEventListener('resize', this.checkCanvasSize.bind(this));
-
-    console.log(this.gl.getParameter(GL.MAX_VERTEX_ATTRIBS));
   }
 
   checkCanvasSize() {
@@ -122,9 +122,12 @@ export class GLEngine extends Disposable {
       replaceTilda(vertexShader, replacementMap),
       replaceTilda(fragmentShader, replacementMap),
     );
+
+    console.log(performance.now(), 11);
     this.programs.useProgram(PROGRAM_NAME);
     console.log(this.uniforms.getUniformLocation(CAM_LOC));
 
+    console.log(performance.now(), 22);
     //  enable depth
     this.gl.enable(GL.DEPTH_TEST);
     this.gl.depthFunc(GL.LESS);
@@ -140,6 +143,7 @@ export class GLEngine extends Disposable {
       this.gl.drawingBufferHeight,
     );
 
+    console.log(performance.now(), 33);
     {
       /*
           0  1
@@ -185,6 +189,7 @@ export class GLEngine extends Disposable {
         GL.STATIC_DRAW,
       );
     }
+    console.log(performance.now(), 44);
 
     {
       const location = TRANSFORM_LOC;
@@ -228,6 +233,13 @@ export class GLEngine extends Disposable {
         0,
         GL.DYNAMIC_DRAW,
       );
+
+      const loc = this.uniforms.getUniformLocation(MAX_TEXTURE_SIZE_LOC);
+      if (loc) {
+        this.gl.uniform1f(loc, this.textureAllocator.maxTextureSize);
+      }
+
+      console.log(performance.now(), 55);
     }
 
     await this.loadLogoTexture();
@@ -265,8 +277,9 @@ export class GLEngine extends Disposable {
   }
 
   async loadLogoTexture() {
-    const TEXTURE_SLOT_SIZE = 512;
-    const LOGO_SIZE = 2048;
+    const maxTextureSize = this.textureAllocator.maxTextureSize;
+    const TEXTURE_SLOT_SIZE = maxTextureSize;
+    const LOGO_SIZE = maxTextureSize / 4;
     await this.imageManager.drawImage('logo', (ctx) => {
       const { canvas } = ctx;
       canvas.width = LOGO_SIZE;
@@ -320,16 +333,23 @@ export class GLEngine extends Disposable {
       ctx.stroke();
     });
 
+    console.log(performance.now(), 1);
     const slot = this.textureAllocator.allocate(TEXTURE_SLOT_SIZE, TEXTURE_SLOT_SIZE);
     const logoMediaInfo = this.imageManager.getMedia('logo');
+    console.log(performance.now(), 2);
     this.textureManager.applyImageToSlot(logoMediaInfo, slot)
+    console.log(performance.now(), 3);
 
     const groundSlot = this.textureAllocator.allocate(TEXTURE_SLOT_SIZE, TEXTURE_SLOT_SIZE);
+    console.log(performance.now(), 4);
     const groundMediaInfo = this.imageManager.getMedia('ground');
+    console.log(performance.now(), 5);
     this.textureManager.applyImageToSlot(groundMediaInfo, groundSlot)
+    console.log(performance.now(), 6);
 
     console.log(slot, groundSlot);
 
+    console.log(performance.now(), 7);
     this.textureManager.generateMipMap("TEXTURE0");
 
     {

bun.lockb

@@ -17,5 +17,6 @@ export const SLOT_SIZE_LOC: LocationName = 'slotSize_and_number';
 //  Uniform
 export const CAM_LOC: LocationName = 'cam';
 export const PROJECTION_LOC: LocationName = 'projection';
+export const MAX_TEXTURE_SIZE_LOC: LocationName = 'maxTextureSize';
 
 export const DEBUG = false;

example/package-lock.json

@@ -31,6 +31,7 @@ export class GLCamera {
   camTiltMatrix = Matrix.create().getMatrix();
   camTurnMatrix = Matrix.create().getMatrix();
   private camMatrix: mat4 = mat4.create();
+
   refresh() {
     //  camMatrix =  camTiltMatrix * camTurnMatrix * cameraMatrix;
     mat4.mul(this.camMatrix, this.camTiltMatrix, this.camTurnMatrix);

package.json

@@ -3,8 +3,6 @@
 
 precision highp float;
 
-const float TEXTURE_SIZE = 4096.;
-
 //  IN
 //  shape
 layout(location = 0) in vec4 position_and_tex;
@@ -14,6 +12,7 @@ layout(location = 1) in mat4 transform;
 layout(location = 5) in vec3 slotSize_and_number;
 
 //  UNIFORM
+uniform float maxTextureSize;
 uniform mat4 cam;
 uniform mat4 projection;
 
@@ -29,6 +28,6 @@ void main() {
   vec2 slotOffset = vec2(mod(slotNumber, slotSize.x), floor(slotNumber / slotSize.x));
 
   gl_Position = projection * cam * transform * vec4(position, 0.0, 1.0);
-  vTex = (slotOffset + tex) * (slotSize / TEXTURE_SIZE);
+  vTex = (slotOffset + tex) * (slotSize / maxTextureSize);
   textureIndex = 0.;
 }

src/GLEngine.ts

@@ -1,9 +1,7 @@
 import { Disposable } from '../../disposable/Disposable';
 import { GL } from '../attributes/Contants';
 import { MediaInfo } from './MediaInfo';
-import { Slot, calculatePosition, calculateTextureIndex } from './TextureSlot';
-
-export type TextureIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31;
+import { Slot, TextureIndex } from "texture-slot-allocator/dist/src/texture/TextureSlot";
 
 type TextureId = `TEXTURE${TextureIndex}`;
 
@@ -128,9 +126,7 @@ export class TextureManager extends Disposable {
    * @returns null or a callback to refresh the texture. Mainly used to refresh videos on texture
    */
   applyImageToSlot(mediaInfo: MediaInfo, slot: Slot, generateMipMap: boolean = false): (() => void) | null {
-    const slotPosition = calculatePosition(slot);
-    const textureIndex: TextureIndex = calculateTextureIndex(slot);
-    const textureId: TextureId = `TEXTURE${textureIndex}`;
+    const textureId: TextureId = `TEXTURE${slot.textureIndex}`;
     const webGLTexture = this.getTexture(textureId);
     if (!webGLTexture) {
       console.warn(`Invalid texture Id ${textureId}`);
@@ -142,7 +138,7 @@ export class TextureManager extends Disposable {
       textureId,
       webGLTexture,
       [0, 0, mediaInfo.width, mediaInfo.height],
-      [slotPosition.x, slotPosition.y, ...slotPosition.size],
+      [slot.x, slot.y, ...slot.size],
     );
     if (generateMipMap) {
       this.generateMipMap(textureId);