🐛 webgl output fixed when passing in offscreencanvas

src/nodes/WebGL/Channels.js

@@ -25,6 +25,13 @@ export default class Channels extends WebGL {
                 min: 0,
                 max: 1,
                 step: 0.1,
+            },
+            amount: {
+                type: 'Number',
+                default: 0,
+                min: 0,
+                max: 1,
+                step: 0.1,
             }
         })
     }
@@ -40,18 +47,24 @@ export default class Channels extends WebGL {
         varying vec2 v_texCoord;
 
         uniform vec3 u_weights;
+        uniform float u_strength;
 
         void main() {
             vec4 pixelColor = texture2D(u_image, v_texCoord).rgba;
             vec3 weights = u_weights / max((u_weights.r + u_weights.g + u_weights.b), 1.0);
             float grey = dot(pixelColor.rgb, weights);
 
-            gl_FragColor = vec4(grey, grey, grey, pixelColor.a);
+            gl_FragColor = vec4(
+                mix(pixelColor.r, grey, u_strength),
+                mix(pixelColor.g, grey, u_strength),
+                mix(pixelColor.b, grey, u_strength),
+                pixelColor.a);
         }
         `
     }
 
     _setParams(gl, program) {
         gl.uniform3f(gl.getUniformLocation(program, "u_weights"), this.in.red.value, this.in.green.value, this.in.blue.value);
+        gl.uniform1f(gl.getUniformLocation(program, 'u_strength'), this.in.amount.value);
     }
 }

src/nodes/WebGL/WebGl.js

@@ -180,7 +180,7 @@ export default class WebGL extends Node {
 
         if (this.image) {
             // Upload the image into the texture.
-            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this.image);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, await createImageBitmap(this.image));
         }