fix(graphics): set alpha on context to false to improve blending

tomaisthorpe · Sep 16, 2024 · 227102f · 227102f
1 parent 8689535
commit 227102f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/.changeset/proud-sheep-tan.md b/.changeset/proud-sheep-tan.md
@@ -0,0 +1,5 @@
+---
+'@tedengine/ted': patch
+---
+
+Set alpha to false on webgl2 context to improve blending
diff --git a/apps/docs/src/examples/2d/animated-sprite-component.ts b/apps/docs/src/examples/2d/animated-sprite-component.ts
@@ -1,5 +1,5 @@
 import asteroidTexture from '@assets/person.png';
-import { vec3 } from 'gl-matrix';
+import { vec3, vec4 } from 'gl-matrix';
 import type { TResourcePackConfig } from '@tedengine/ted';
 import {
   TGameState,
@@ -41,6 +41,61 @@ class Sprite extends TActor {
       },
     );
     sprite.applyTexture(engine, asteroidTexture);
+    sprite.colorFilter = vec4.fromValues(0, 0, 0, 0.5);
+
+    const filterSection = engine.debugPanel.addSection('Color Filter', true);
+    filterSection.addInput(
+      'Red',
+      'range',
+      '1',
+      (value) => {
+        sprite.colorFilter[0] = parseFloat(value);
+      },
+      {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    );
+    filterSection.addInput(
+      'Green',
+      'range',
+      '1',
+      (value) => {
+        sprite.colorFilter[1] = parseFloat(value);
+      },
+      {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    );
+    filterSection.addInput(
+      'Blue',
+      'range',
+      '1',
+      (value) => {
+        sprite.colorFilter[2] = parseFloat(value);
+      },
+      {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    );
+    filterSection.addInput(
+      'Alpha',
+      'range',
+      '1',
+      (value) => {
+        sprite.colorFilter[3] = parseFloat(value);
+      },
+      {
+        min: 0,
+        max: 1,
+        step: 0.01,
+      },
+    );
 
     this.rootComponent.transform.translation = vec3.fromValues(0, 0, -3);
 

diff --git a/packages/ted/src/renderer/renderer.ts b/packages/ted/src/renderer/renderer.ts
@@ -132,7 +132,9 @@ export default class TRenderer {
   }
 
   public context(): WebGL2RenderingContext {
-    return this.canvas.getContext('webgl2')!;
+    return this.canvas.getContext('webgl2', {
+      alpha: false,
+    })!;
   }
 
   public render(frameParams: TFrameParams) {