Update Cross Hatch Filter

pixijs · Jan 1, 2024 · 3d79c59 · 3d79c59
1 parent dc60c38
commit 3d79c59
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 16 deletions.
diff --git a/filters/ascii/src/AsciiFilter.ts b/filters/ascii/src/AsciiFilter.ts
@@ -54,6 +54,12 @@ export class AsciiFilter extends Filter
 
         options = { ...AsciiFilter.DEFAULT_OPTIONS, ...options } as AsciiFilterOptions;
 
+        const asciiUniforms = {
+            uSize: { value: options.size, type: 'f32' },
+            uColor: { value: new Float32Array(3), type: 'vec3<f32>' },
+            uReplaceColor: { value: Number(replaceColor), type: 'f32' },
+        };
+
         const gpuProgram = new GpuProgram({
             vertex: {
                 source: wgslVertex,
@@ -75,11 +81,7 @@ export class AsciiFilter extends Filter
             gpuProgram,
             glProgram,
             resources: {
-                asciiUniforms: {
-                    uSize: { value: options.size, type: 'f32' },
-                    uColor: { value: new Float32Array(3), type: 'vec3<f32>' },
-                    uReplaceColor: { value: Number(replaceColor), type: 'f32' },
-                }
+                asciiUniforms,
             },
         });
 

diff --git a/filters/cross-hatch/src/CrossHatchFilter.ts b/filters/cross-hatch/src/CrossHatchFilter.ts
@@ -1,6 +1,7 @@
-import { vertex } from '@tools/fragments';
+import { vertex, wgslVertex } from '@tools/fragments';
 import fragment from './crosshatch.frag';
-import { Filter, GlProgram } from 'pixi.js';
+import source from './crosshatch.wgsl';
+import { Filter, GlProgram, GpuProgram } from 'pixi.js';
 
 /**
  * A Cross Hatch effect filter.<br>
@@ -15,13 +16,25 @@ export class CrossHatchFilter extends Filter
 {
     constructor()
     {
+        const gpuProgram = new GpuProgram({
+            vertex: {
+                source: wgslVertex,
+                entryPoint: 'mainVertex',
+            },
+            fragment: {
+                source,
+                entryPoint: 'mainFragment',
+            },
+        });
+
         const glProgram = new GlProgram({
             vertex,
             fragment,
             name: 'cross-hatch-filter',
         });
 
         super({
+            gpuProgram,
             glProgram,
             resources: {},
         });

diff --git a/filters/cross-hatch/src/crosshatch.frag b/filters/cross-hatch/src/crosshatch.frag
@@ -1,44 +1,43 @@
-precision mediump float;
-
-varying vec2 vTextureCoord;
+in vec2 vTextureCoord;
+out vec4 finalColor;
 
 uniform sampler2D uSampler;
 
 void main(void)
 {
-    float lum = length(texture2D(uSampler, vTextureCoord.xy).rgb);
+    float lum = length(texture(uSampler, vTextureCoord.xy).rgb);
 
-    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    finalColor = vec4(1.0, 1.0, 1.0, 1.0);
 
     if (lum < 1.00)
     {
         if (mod(gl_FragCoord.x + gl_FragCoord.y, 10.0) == 0.0)
         {
-            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            finalColor = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
 
     if (lum < 0.75)
     {
         if (mod(gl_FragCoord.x - gl_FragCoord.y, 10.0) == 0.0)
         {
-            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            finalColor = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
 
     if (lum < 0.50)
     {
         if (mod(gl_FragCoord.x + gl_FragCoord.y - 5.0, 10.0) == 0.0)
         {
-            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            finalColor = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
 
     if (lum < 0.3)
     {
         if (mod(gl_FragCoord.x - gl_FragCoord.y - 5.0, 10.0) == 0.0)
         {
-            gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+            finalColor = vec4(0.0, 0.0, 0.0, 1.0);
         }
     }
 }
diff --git a/filters/cross-hatch/src/crosshatch.wgsl b/filters/cross-hatch/src/crosshatch.wgsl
@@ -0,0 +1,43 @@
+@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 lum: f32 = length(textureSample(uSampler, uSampler, uv).rgb);
+
+    if (lum < 1.00)
+    {
+        if (modulo(position.x + position.y, 10.0) == 0.0)
+        {
+            return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+        }
+    }
+
+    if (lum < 0.75)
+    {
+        if (modulo(position.x - position.y, 10.0) == 0.0)
+        {
+            return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+        }
+    }
+
+    if (lum < 0.50)
+    {
+        if (modulo(position.x + position.y - 5.0, 10.0) == 0.0)
+        {
+            return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+        }
+    }
+
+    if (lum < 0.3)
+    {
+        if (modulo(position.x - position.y - 5.0, 10.0) == 0.0)
+        {
+            return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+        }
+    }
+
+    return vec4<f32>(1.0);
+}
diff --git a/tools/demo/src/index.js b/tools/demo/src/index.js
@@ -41,6 +41,7 @@ const main = async () =>
     filters.hslAdjustment.call(app);
     filters.rgb.call(app);
     filters.ascii.call(app);
+    filters.crossHatch.call(app);
     // filters.kawaseBlur.call(app);
 
     // TODO: Re-enable this in place of the above once v8 conversion is complete