feat(graphics): add uv scaling option

tomaisthorpe · Oct 1, 2024 · 93312c5 · 93312c5
1 parent b338423
commit 93312c5
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 5 deletions.
diff --git a/.changeset/tender-nails-prove.md b/.changeset/tender-nails-prove.md
@@ -0,0 +1,5 @@
+---
+'@tedengine/ted': minor
+---
+
+Add instance UV scaling
diff --git a/packages/ted/src/actor-components/sprite-component.ts b/packages/ted/src/actor-components/sprite-component.ts
@@ -75,6 +75,7 @@ export default class TSpriteComponent extends TTexturedMeshComponent {
         options: {
           texture: this.texture.uuid!,
           colorFilter: this.colorFilter,
+          instanceUVScales: this.instanceUVScales,
         },
       },
       layer: this.layer,

diff --git a/packages/ted/src/actor-components/textured-mesh-component.ts b/packages/ted/src/actor-components/textured-mesh-component.ts
@@ -17,6 +17,8 @@ export default class TTexturedMeshComponent extends TSceneComponent {
 
   public colorFilter?: vec4;
 
+  public instanceUVScales?: [number, number];
+
   constructor(actor: TActor, bodyOptions?: TPhysicsBodyOptions) {
     super(actor, bodyOptions);
 
@@ -42,6 +44,7 @@ export default class TTexturedMeshComponent extends TSceneComponent {
         options: {
           texture: this.texture.uuid!,
           colorFilter: this.colorFilter,
+          instanceUVScales: this.instanceUVScales,
         },
       },
     };

diff --git a/packages/ted/src/renderer/frame-params.ts b/packages/ted/src/renderer/frame-params.ts
@@ -65,6 +65,7 @@ export interface TSerializedTexturedMaterial {
   options: {
     texture: string;
     instanceUVs?: number[];
+    instanceUVScales?: [number, number];
     colorFilter?: vec4;
   };
 }
diff --git a/packages/ted/src/renderer/program.ts b/packages/ted/src/renderer/program.ts
@@ -114,6 +114,12 @@ export default class TProgram implements IAsset {
       this.program,
       'uPalette',
     );
+
+    this.uniformLocations.uInstanceUVScale = gl.getUniformLocation(
+      this.program,
+      'uInstanceUVScale',
+    );
+
     this.uniformLocations.uEnableInstanceUVs = gl.getUniformLocation(
       this.program,
       'uEnableInstanceUVs',

diff --git a/packages/ted/src/renderer/renderable-texture.ts b/packages/ted/src/renderer/renderable-texture.ts
@@ -37,8 +37,8 @@ export default class TRenderableTexture {
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, this.filter);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, this.filter);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
     gl.generateMipmap(gl.TEXTURE_2D);
   }

diff --git a/packages/ted/src/renderer/renderable-textured-mesh.ts b/packages/ted/src/renderer/renderable-textured-mesh.ts
@@ -22,7 +22,6 @@ export default class TRenderableTexturedMesh {
 
   // Instance buffers, used to override the UVs of the mesh
   private instanceUVBuffer?: WebGLBuffer;
-
   private colorFilterUniformLocation?: WebGLUniformLocation;
 
   private vao?: WebGLVertexArrayObject;
@@ -33,6 +32,7 @@ export default class TRenderableTexturedMesh {
     texture: TRenderableTexture,
     m: mat4,
     instanceUVs?: number[],
+    instanceUVScales?: [number, number],
     colorFilter: vec4 = vec4.fromValues(1, 1, 1, 1),
   ) {
     if (this.positionBuffer === undefined) {
@@ -95,6 +95,18 @@ export default class TRenderableTexturedMesh {
       );
     }
 
+    if (instanceUVScales) {
+      gl.uniform2fv(
+        texturedProgram.program!.uniformLocations.uInstanceUVScale,
+        new Float32Array(instanceUVScales),
+      );
+    } else {
+      gl.uniform2fv(
+        texturedProgram.program!.uniformLocations.uInstanceUVScale,
+        new Float32Array([1, 1]),
+      );
+    }
+
     const vertexCount = this.indexes.length;
     const type = gl.UNSIGNED_SHORT;
     const offset = 0;

diff --git a/packages/ted/src/renderer/renderer.ts b/packages/ted/src/renderer/renderer.ts
@@ -197,6 +197,7 @@ export default class TRenderer {
           texture,
           task.transform,
           task.material.options.instanceUVs,
+          task.material.options.instanceUVScales,
           task.material.options.colorFilter,
         );
       }
@@ -222,6 +223,7 @@ export default class TRenderer {
           texture,
           task.transform,
           task.material.options.instanceUVs,
+          task.material.options.instanceUVScales,
           task.material.options.colorFilter,
         );
       }

diff --git a/packages/ted/src/shaders/textured.program b/packages/ted/src/shaders/textured.program
@@ -14,10 +14,12 @@ uniform Settings {
 
 out highp vec2 vUV;
 
+uniform vec2 uInstanceUVScale;
+
 void main() {
   gl_Position = uVPMatrix * uMMatrix * aVertexPosition;
 
-  vUV = aVertexInstanceUV * uEnableInstanceUVs + aVertexUV * (1.0 - uEnableInstanceUVs);
+  vUV = (aVertexInstanceUV * uEnableInstanceUVs + aVertexUV * (1.0 - uEnableInstanceUVs)) * uInstanceUVScale;
 }
 ----
 #version 300 es
@@ -33,4 +35,4 @@ out vec4 outputColor;
 void main() {
   vec4 textureColor = texture(uTexture, vUV);
   outputColor = textureColor * uColorFilter;
-}
+}