Update Grayscale Filter

filters/adjustment/src/AdjustmentFilter.ts

@@ -1,4 +1,4 @@
-import { vertex } from '@tools/fragments';
+import { vertex, wgslVertex } from '@tools/fragments';
 import fragment from './adjustment.frag';
 import source from './adjustment.wgsl';
 import { Filter, GlProgram, GpuProgram, UniformGroup } from 'pixi.js';
@@ -106,7 +106,7 @@ export class AdjustmentFilter extends Filter
 
         const gpuProgram = new GpuProgram({
             vertex: {
-                source,
+                source: wgslVertex,
                 entryPoint: 'mainVertex',
             },
             fragment: {

filters/adjustment/src/adjustment.wgsl

@@ -1,12 +1,3 @@
-struct GlobalFilterUniforms {
-  uInputSize:vec4<f32>,
-  uInputPixel:vec4<f32>,
-  uInputClamp:vec4<f32>,
-  uOutputFrame:vec4<f32>,
-  uGlobalFrame:vec4<f32>,
-  uOutputTexture:vec4<f32>,
-};
-
 struct AdjustmentUniforms {
   uGamma: f32,
   uContrast: f32,
@@ -15,51 +6,9 @@ struct AdjustmentUniforms {
   uColor: vec4<f32>,
 };
 
-@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
 @group(0) @binding(1) var uSampler: texture_2d<f32>;
-
 @group(1) @binding(0) var<uniform> adjustmentUniforms : AdjustmentUniforms;
 
-struct VSOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) uv : vec2<f32>
-  };
-
-fn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>
-{
-    var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
-
-    position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
-    position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
-
-    return vec4(position, 0.0, 1.0);
-}
-
-fn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
-{
-    return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
-}
-
-fn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
-{
-  return  (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw);  
-}
-
-fn getSize() -> vec2<f32>
-{
-  return gfu.uGlobalFrame.zw;
-}
-
-@vertex
-fn mainVertex(
-  @location(0) aPosition : vec2<f32>, 
-) -> VSOutput {
-  return VSOutput(
-   filterVertexPosition(aPosition),
-   filterTextureCoord(aPosition)
-  );
-}
-
 @fragment
 fn mainFragment(
   @location(0) uv: vec2<f32>,

filters/grayscale/src/GrayscaleFilter.ts

@@ -1,6 +1,7 @@
-import { Filter, GlProgram } from 'pixi.js';
-import { vertex } from '@tools/fragments';
+import { Filter, GlProgram, GpuProgram } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 import fragment from './grayscale.frag';
+import source from './grayscale.wgsl';
 
 /**
  * This filter applies a grayscale effect.<br>
@@ -15,13 +16,25 @@ export class GrayscaleFilter extends Filter
 {
     constructor()
     {
+        const gpuProgram = new GpuProgram({
+            vertex: {
+                source: wgslVertex,
+                entryPoint: 'mainVertex',
+            },
+            fragment: {
+                source,
+                entryPoint: 'mainFragment',
+            },
+        });
+
         const glProgram = new GlProgram({
             vertex,
             fragment,
             name: 'grayscale-filter',
         });
 
         super({
+            gpuProgram,
             glProgram,
             resources: {},
         });

filters/grayscale/src/grayscale.frag

@@ -1,16 +1,17 @@
-precision mediump float;
+in vec2 vTextureCoord;
+
+out vec4 finalColor;
 
-varying vec2 vTextureCoord;
 uniform sampler2D uSampler;
 
 // https://en.wikipedia.org/wiki/Luma_(video)
 const vec3 weight = vec3(0.299, 0.587, 0.114);
 
 void main()
 {
-    vec4 color = texture2D(uSampler, vTextureCoord);
-    gl_FragColor = vec4(
-        vec3(color.r * weight.r + color.g * weight.g  + color.b * weight.b),
-        color.a
+    vec4 c = texture(uSampler, vTextureCoord);
+    finalColor = vec4(
+        vec3(c.r * weight.r + c.g * weight.g  + c.b * weight.b),
+        c.a
     );
 }

filters/grayscale/src/grayscale.wgsl

@@ -0,0 +1,12 @@
+@group(0) @binding(1) var uSampler: texture_2d<f32>;
+
+@fragment
+fn mainFragment(
+  @location(0) uv: vec2<f32>,
+  @builtin(position) position: vec4<f32>
+) -> @location(0) vec4<f32> {
+  let color: vec4<f32> = textureSample(uSampler, uSampler, uv);
+
+  let g: f32 = dot(color.rgb, vec3<f32>(0.299, 0.587, 0.114));
+  return vec4<f32>(vec3<f32>(g), 1.);
+}

tools/demo/src/index.js

@@ -34,6 +34,7 @@ const main = async () =>
 
     filters.adjustment.call(app);
     filters.bloom.call(app);
+    filters.grayscale.call(app);
     // filters.kawaseBlur.call(app);
 
     // TODO: Re-enable this in place of the above once v8 conversion is complete

tools/fragments/default.wgsl

@@ -0,0 +1,50 @@
+struct GlobalFilterUniforms {
+  uInputSize:vec4<f32>,
+  uInputPixel:vec4<f32>,
+  uInputClamp:vec4<f32>,
+  uOutputFrame:vec4<f32>,
+  uGlobalFrame:vec4<f32>,
+  uOutputTexture:vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+
+struct VSOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv : vec2<f32>
+  };
+
+fn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>
+{
+    var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+
+    position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+    position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+
+    return vec4(position, 0.0, 1.0);
+}
+
+fn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
+{
+    return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+}
+
+fn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
+{
+  return  (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw);  
+}
+
+fn getSize() -> vec2<f32>
+{
+  return gfu.uGlobalFrame.zw;
+}
+
+@vertex
+fn mainVertex(
+  @location(0) aPosition : vec2<f32>, 
+) -> VSOutput {
+  return VSOutput(
+   filterVertexPosition(aPosition),
+   filterTextureCoord(aPosition)
+  );
+}

tools/fragments/index.d.ts

@@ -1,4 +1,5 @@
 declare module '@tools/fragments'
 {
     export const vertex: string;
+    export const wgslVertex: string;
 }

tools/fragments/index.js

@@ -1,2 +1,3 @@
 import vertex from './default.vert';
-export { vertex };
+import wgslVertex from './default.vert';
+export { vertex, wgslVertex };