Fix: graphics tint using mix instead of multiply

src/scene/container/utils/mixColors.ts

@@ -37,3 +37,25 @@ export function mixStandardAnd32BitColors(localColorRGB: number, localAlpha: num
     return sharedBGRColor + (globalAlpha << 24);
 }
 
+/**
+ * Takes two hex colors, multiplies them together and returns the result.
+ * @param color1 - the first color to multiply
+ * @param color2 - the second color to multiply
+ * @returns - the multiplied color
+ */
+export function multiplyHexColors(color1: number, color2: number): number
+{
+    const r1 = (color1 >> 16) & 0xFF;
+    const g1 = (color1 >> 8) & 0xFF;
+    const b1 = color1 & 0xFF;
+
+    const r2 = (color2 >> 16) & 0xFF;
+    const g2 = (color2 >> 8) & 0xFF;
+    const b2 = color2 & 0xFF;
+
+    const r = r1 * r2;
+    const g = g1 * g2;
+    const b = b1 * b2;
+
+    return (r << 16) + (g << 8) + b;
+}

src/scene/graphics/gl/GlGraphicsAdaptor.ts

@@ -73,6 +73,8 @@ export class GlGraphicsAdaptor implements GraphicsAdaptor
         // WebGL specific..
         shader.groups[0] = renderer.globalUniforms.bindGroup;
 
+        renderer.state.set(graphicsPipe.state);
+
         renderer.shader.bind(shader);
 
         renderer.geometry.bind(geometry, shader.glProgram);

src/scene/graphics/shared/BatchableGraphics.ts

@@ -1,4 +1,4 @@
-import { mixColors } from '../../container/utils/mixColors';
+import { multiplyHexColors } from '../../container/utils/multiplyHexColors';
 
 import type { Batch, BatchableObject, Batcher } from '../../../rendering/batcher/shared/Batcher';
 import type { IndexBufferArray } from '../../../rendering/renderers/shared/geometry/Geometry';
@@ -70,7 +70,7 @@ export class BatchableGraphics implements BatchableObject
 
         if (this.applyTransform)
         {
-            const argb = mixColors(bgr, graphics.groupColor)
+            const argb = multiplyHexColors(bgr, graphics.groupColor)
             + ((this.alpha * graphics.groupAlpha * 255) << 24);
 
             const wt = graphics.groupTransform;

tests/visual/scenes/graphics/graphics-blend.scene.ts

@@ -0,0 +1,19 @@
+import { Graphics } from '../../../../src/scene/graphics/shared/Graphics';
+
+import type { Container } from '../../../../src/scene/container/Container';
+import type { TestScene } from '../../types';
+
+export const scene: TestScene = {
+    it: 'should set blend of graphics correctly',
+    only: true,
+    create: async (scene: Container) =>
+    {
+        const rect = new Graphics().rect(0, 0, 100, 100).fill('red');
+
+        rect.context.batchMode = 'no-batch';
+
+        rect.blendMode = 'erase';
+
+        scene.addChild(rect);
+    },
+};

tests/visual/scenes/graphics/graphics-tint.scene.ts

@@ -0,0 +1,18 @@
+import { Graphics } from '../../../../src/scene/graphics/shared/Graphics';
+
+import type { Container } from '../../../../src/scene/container/Container';
+import type { TestScene } from '../../types';
+
+export const scene: TestScene = {
+    it: 'should set tint of graphics correctly',
+    only: true,
+    create: async (scene: Container) =>
+    {
+        const rect = new Graphics().rect(0, 0, 100, 100).fill('black');
+
+        // should remain black!
+        rect.tint = 0xff0000;
+
+        scene.addChild(rect);
+    },
+};