From 227102f330ac73c92d5277e46e24f38bda9e9ef4 Mon Sep 17 00:00:00 2001
From: Tom Aisthorpe <tomaisthorpe@gmail.com>
Date: Tue, 17 Sep 2024 00:17:45 +0100
Subject: [PATCH] fix(graphics): set alpha on context to false to improve
 blending

---
 .changeset/proud-sheep-tan.md                 |  5 ++
 .../examples/2d/animated-sprite-component.ts  | 57 ++++++++++++++++++-
 packages/ted/src/renderer/renderer.ts         |  4 +-
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/proud-sheep-tan.md

diff --git a/.changeset/proud-sheep-tan.md b/.changeset/proud-sheep-tan.md
new file mode 100644
index 0000000..bc8c8d2
--- /dev/null
+++ 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
index 2eda654..1cf4983 100644
--- 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
index 70ec00d..ce4054d 100644
--- 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) {