Resolve WGSL (WIP)

filters/advanced-bloom/src/advanced-bloom.wgsl

@@ -16,7 +16,7 @@ fn mainFragment(
   var color = textureSample(uTexture, uSampler, uv);
   color = vec4<f32>(color.rgb * advancedBloomUniforms.uBrightness, color.a);
 
-  var bloomColor = vec4<f32>(textureSample(uMapTexture, iSampler, uv).rgb, 0.0);
+  var bloomColor = vec4<f32>(textureSample(uMapTexture, uSampler, uv).rgb, 0.0);
   bloomColor = vec4<f32>(bloomColor.rgb * advancedBloomUniforms.uBloomScale, bloomColor.a);
 
   return color + bloomColor;

filters/ascii/src/AsciiFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './ascii.frag';
 import source from './ascii.wgsl';
-import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 // This WebGPU filter has been ported from the WebGL renderer that was originally created by Vico (@vicocotea)
 

filters/ascii/src/ascii.wgsl

@@ -92,18 +92,28 @@ fn character(n: f32, p: vec2<f32>) -> f32
     return 0.0;
 }
 
+fn modulo(x: f32, y: f32) -> f32
+{
+  return x - y * floor(x/y);
+}
+
+fn moduloVec2(x: vec2<f32>, y: vec2<f32>) -> vec2<f32>
+{
+  return x - y * floor(x/y);
+}
+
 fn mapCoord(coord: vec2<f32> ) -> vec2<f32>
 {
     var mappedCoord: vec2<f32> = coord;
     mappedCoord *= gfu.uInputSize.xy;
-    mappedCoord += gfu.outputFrame.xy;
+    mappedCoord += gfu.uOutputFrame.xy;
     return mappedCoord;
 }
 
 fn unmapCoord(coord: vec2<f32> ) -> vec2<f32>
 {
     var mappedCoord: vec2<f32> = coord;
-    mappedCoord -= gfu.outputFrame.xy;
+    mappedCoord -= gfu.uOutputFrame.xy;
     mappedCoord /= gfu.uInputSize.xy;
     return mappedCoord;
 }

filters/bevel/src/BevelFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Color, ColorSource, DEG_TO_RAD, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './bevel.frag';
 import source from './bevel.wgsl';
-import { Filter, DEG_TO_RAD, GlProgram, ColorSource, GpuProgram, Color } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 export interface BevelFilterOptions
 {

filters/color-gradient/src/ColorGradientFilter.ts

@@ -1,7 +1,7 @@
+import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './color-gradient.frag';
 import vertex from './color-gradient.vert';
 import source from './color-gradient.wgsl';
-import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import { parseCssGradient } from './CssGradientParser';
 
 export type ColorStop = {
@@ -124,7 +124,7 @@ export class ColorGradientFilter extends Filter
             glProgram,
             resources: {
                 colorGradientUniforms: {
-                    uType: { value: options.type, type: 'f32' },
+                    uType: { value: options.type, type: 'i32' },
                     uAngle: { value: options.angle ?? ANGLE_OFFSET, type: 'f32' },
                     uAlpha: { value: options.alpha, type: 'f32' },
                     uReplace: { value: options.replace ? 1 : 0, type: 'f32' },

filters/color-gradient/src/color-gradient.wgsl

@@ -1,10 +1,13 @@
 struct ColorGradientUniforms {
-  uDistance: f32,
-  uStrength: vec2<f32>,
-  uColor: vec3<f32>,
+  uType: i32,
+  uAngle: f32,
   uAlpha: f32,
-  uQuality: f32,
-  uKnockout: f32,
+  uColors: array<vec3<f32>, 20>,
+  uOffsets: array<f32, 20>,
+  uAlphas: array<f32, 20>,
+  uNumStops: f32,
+  uMaxColors: f32,
+  uReplace: f32,
 };
 
 struct GlobalFilterUniforms {
@@ -23,10 +26,10 @@ struct GlobalFilterUniforms {
 @group(1) @binding(0) var<uniform> colorGradientUniforms : ColorGradientUniforms;
 
 struct VSOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) uv : vec2<f32>
-    @location(1) coord : vec2<f32>
-  };
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv : vec2<f32>,
+  @location(1) coord : vec2<f32>
+};
 
 fn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>
 {
@@ -45,7 +48,7 @@ fn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
 
 fn filterCoord( vTextureCoord:vec2<f32> ) -> vec2<f32>
 {
-    return vTextureCoord * gfu.uInputSize.sy / gfu.uOutputFrame.zw;
+    return vTextureCoord * gfu.uInputSize.xy / gfu.uOutputFrame.zw;
 }
 
 fn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
@@ -71,9 +74,9 @@ fn mainVertex(
 }
 
 struct ColorStop {
-  offset: f32;
-  color: vec3<f32>;
-  alpha: f32;
+  offset: f32,
+  color: vec3<f32>,
+  alpha: f32,
 };
 
 fn rotate2d(angle: f32) -> mat2x2<f32>{
@@ -97,15 +100,15 @@ fn projectRadialPosition(pos: vec2<f32>) -> f32 {
 fn projectAnglePosition(pos: vec2<f32>, angle: f32) -> f32 {
   var center: vec2<f32> = pos - vec2<f32>(0.5, 0.5);
   var polarAngle: f32 = atan2(-center.y, center.x);
-  return fmod(polarAngle + angle, PI_2) / PI_2;
+  return ((polarAngle + angle) % PI_2) / PI_2;
 }
 
-fn projectPosition(pos: vec2<f32>, int type, angle: f32) -> f32 {
-  if (type == TYPE_LINEAR) {
+fn projectPosition(pos: vec2<f32>, gradientType: i32, angle: f32) -> f32 {
+  if (gradientType == TYPE_LINEAR) {
       return projectLinearPosition(pos, angle);
-  } else if (type == TYPE_RADIAL) {
+  } else if (gradientType == TYPE_RADIAL) {
       return projectRadialPosition(pos);
-  } else if (type == TYPE_CONIC) {
+  } else if (gradientType == TYPE_CONIC) {
       return projectAnglePosition(pos, angle);
   }
 
@@ -115,64 +118,64 @@ fn projectPosition(pos: vec2<f32>, int type, angle: f32) -> f32 {
 @fragment
 fn mainFragment(
   @builtin(position) position: vec4<f32>,
-  @location(0) uv : vec2<f32>
+  @location(0) uv : vec2<f32>,
   @location(1) coord : vec2<f32>
 ) -> @location(0) vec4<f32> {
   // current/original color
   var currentColor: vec4<f32> = textureSample(uTexture, uSampler, uv);
 
   // skip calculations if gradient alpha is 0
-  if (uAlpha == 0.0) { return currentColor; }
+  if (colorGradientUniforms.uAlpha == 0.0) { return currentColor; }
 
   // project position
-  var y: f32 = projectPosition(coord, uType, radians(uAngle));
+  var y: f32 = projectPosition(coord, colorGradientUniforms.uType, radians(colorGradientUniforms.uAngle));
 
   // check gradient bounds
-  var offsetMin: f32 = uOffsets[0];
+  var offsetMin: f32 = colorGradientUniforms.uOffsets[0];
   var offsetMax: f32 = 0.0;
 
   for (var i: i32 = 0; i < MAX_STOPS; i = i + 1) {
-      if (i == uNumStops - 1) { // last index
-          offsetMax = uOffsets[i];
+      if (i == colorGradientUniforms.uNumStops - 1) { // last index
+          offsetMax = colorGradientUniforms.uOffsets[i];
       }
   }
 
   if (y  < offsetMin || y > offsetMax) { return currentColor; }
 
   // limit colors
-  if (uMaxColors > 0) {
-      var stepSize: f32 = 1.0 / f32(uMaxColors);
+  if (colorGradientUniforms.uMaxColors > 0) {
+      var stepSize: f32 = 1.0 / f32(colorGradientUniforms.uMaxColors);
       var stepNumber: f32 = floor(y / stepSize);
       y = stepSize * (stepNumber + 0.5); // offset by 0.5 to use color from middle of segment
   }
 
   // find color stops
-  var from: ColorStop;
-  var to: ColorStop;
+  var stopFrom: ColorStop;
+  var stopTo: ColorStop;
 
   for (var i: i32 = 0; i < MAX_STOPS; i = i + 1) {
-      if (y >= uOffsets[i]) {
-          from = ColorStop(uOffsets[i], uColors[i], uAlphas[i]);
-          to = ColorStop(uOffsets[i + 1], uColors[i + 1], uAlphas[i + 1]);
+      if (y >= colorGradientUniforms.uOffsets[i]) {
+          stopFrom = ColorStop(colorGradientUniforms.uOffsets[i], colorGradientUniforms.uColors[i], colorGradientUniforms.uAlphas[i]);
+          stopTo = ColorStop(colorGradientUniforms.uOffsets[i + 1], colorGradientUniforms.uColors[i + 1], colorGradientUniforms.uAlphas[i + 1]);
       }
 
-      if (i == uNumStops - 1) { // last index
+      if (i == colorGradientUniforms.uNumStops - 1) { // last index
           break;
       }
   }
 
   // mix colors from stops
-  var colorFrom: vec4<f32> = vec4<f32>(from.color * from.alpha, from.alpha);
-  var colorTo: vec4<f32> = vec4<f32>(to.color * to.alpha, to.alpha);
+  var colorFrom: vec4<f32> = vec4<f32>(stopFrom.color * stopFrom.alpha, stopFrom.alpha);
+  var colorTo: vec4<f32> = vec4<f32>(stopTo.color * stopTo.alpha, stopTo.alpha);
 
-  var segmentHeight: f32 = to.offset - from.offset;
-  var relativePos: f32 = y - from.offset; // position from 0 to [segmentHeight]
+  var segmentHeight: f32 = stopTo.offset - stopFrom.offset;
+  var relativePos: f32 = y - stopFrom.offset; // position from 0 to [segmentHeight]
   var relativePercent: f32 = relativePos / segmentHeight; // position in percent between [from.offset] and [to.offset].
 
-  var gradientAlpha: f32 = uAlpha * currentColor.a;
+  var gradientAlpha: f32 = colorGradientUniforms.uAlpha * currentColor.a;
   var gradientColor: vec4<f32> = mix(colorFrom, colorTo, relativePercent) * gradientAlpha;
 
-  if (uReplace == false) {
+  if (colorGradientUniforms.uReplace == false) {
       // mix resulting color with current color
       return gradientColor + currentColor * (1.0 - gradientColor.a);
   } else {

filters/color-map/src/color-map.wgsl

@@ -28,8 +28,8 @@ fn mainFragment(
   let s0: f32 = xOffset + (zSlice0 * colorMapUniforms.uSliceSize);
   let s1: f32 = xOffset + (zSlice1 * colorMapUniforms.uSliceSize);
   let yOffset: f32 = colorMapUniforms.uSliceSize * 0.5 + color.g * (1.0 - colorMapUniforms.uSliceSize);
-  let slice0Color: vec4<f32> = textureSample(uMapTexture, iSampler, vec2(s0,yOffset));
-  let slice1Color: vec4<f32> = textureSample(uMapTexture, iSampler, vec2(s1,yOffset));
+  let slice0Color: vec4<f32> = textureSample(uMapTexture, uSampler, vec2(s0,yOffset));
+  let slice1Color: vec4<f32> = textureSample(uMapTexture, uSampler, vec2(s1,yOffset));
   let zOffset: f32 = fract(color.b * innerWidth);
   adjusted = mix(slice0Color, slice1Color, zOffset);
   altColor = vec4<f32>(color.rgb * color.a, color.a);

filters/color-overlay/src/ColorOverlayFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Color, ColorSource, Filter, GlProgram, GpuProgram, UniformGroup } from 'pixi.js';
 import fragment from './color-overlay.frag';
 import source from './color-overlay.wgsl';
-import { Color, ColorSource, Filter, GlProgram, GpuProgram, UniformGroup } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 export interface ColorOverlayFilterOptions
 {

filters/color-overlay/src/color-overlay.wgsl

@@ -12,6 +12,6 @@ fn mainFragment(
     @builtin(position) position: vec4<f32>,
     @location(0) uv : vec2<f32>
 ) -> @location(0) vec4<f32> {
-    let c = textureSample(uTexture, uSampler, vTextureCoord);
+    let c = textureSample(uTexture, uSampler, uv);
     return vec4<f32>(mix(c.rgb, colorOverlayUniforms.uColor.rgb, c.a * colorOverlayUniforms.uAlpha), c.a);
 }

filters/color-replace/src/ColorReplaceFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './color-replace.frag';
 import source from './color-replace.wgsl';
-import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 /**
  * This WebGPU filter has been ported from the WebGL renderer that was originally created by mishaa, updated by timetocode

filters/cross-hatch/src/crosshatch.wgsl

@@ -41,4 +41,9 @@ fn mainFragment(
     }
 
     return vec4<f32>(1.0);
+}
+
+fn modulo(x: f32, y: f32) -> f32
+{
+  return x - y * floor(x/y);
 }

filters/crt/src/crt.wgsl

@@ -53,6 +53,11 @@ fn mainFragment(
 
 const SQRT_2: f32 = 1.414213;
 
+fn modulo(x: f32, y: f32) -> f32
+{
+  return x - y * floor(x/y);
+}
+
 fn rand(co: vec2<f32>) -> f32
 {
   return fract(sin(dot(co, vec2<f32>(12.9898, 78.233))) * 43758.5453);

filters/emboss/src/EmbossFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './emboss.frag';
 import source from './emboss.wgsl';
-import { Filter, GlProgram, GpuProgram } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 export interface EmbossFilterOptions
 {

filters/emboss/src/emboss.wgsl

@@ -15,7 +15,7 @@ struct GlobalFilterUniforms {
 
 @group(0) @binding(1) var uTexture: texture_2d<f32>; 
 @group(0) @binding(2) var uSampler: sampler;
-@group(2) @binding(0) var<uniform> embossUniforms : EmbossUniforms;
+@group(1) @binding(0) var<uniform> embossUniforms : EmbossUniforms;
 
 @fragment
 fn mainFragment(

filters/glitch/src/GlitchFilter.ts

@@ -1,7 +1,8 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { DEG_TO_RAD, Filter, getCanvasTexture, GlProgram, GpuProgram, Texture } from 'pixi.js';
 import fragment from './glitch.frag';
 import source from './glitch.wgsl';
-import { Filter, Texture, DEG_TO_RAD, GlProgram, GpuProgram, getCanvasTexture } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
+
 import type { FilterSystem, PointData, RenderSurface } from 'pixi.js';
 
 /**
@@ -146,7 +147,7 @@ export class GlitchFilter extends Filter
                     uSeed: { value: options?.seed ?? 0, type: 'f32' },
                     uDimensions: { value: new Float32Array(2), type: 'vec2<f32>' },
                     uAspect: { value: 1, type: 'f32' },
-                    uFillMode: { value: options?.fillMode ?? 0, type: 'u32' },
+                    uFillMode: { value: options?.fillMode ?? 0, type: 'i32' },
                     uOffset: { value: options?.offset ?? 100, type: 'f32' },
                     uDirection: { value: options?.direction ?? 0, type: 'f32' },
                     uRed: { value: new Float32Array(2), type: 'vec2<f32>' },
@@ -207,7 +208,7 @@ export class GlitchFilter extends Filter
             for (let i = 0; i < last; i++)
             {
                 const averageWidth = rest / (count - i);
-                const w =  Math.max(averageWidth * (1 - (Math.random() * 0.6)), min);
+                const w = Math.max(averageWidth * (1 - (Math.random() * 0.6)), min);
 
                 arr[i] = w;
                 rest -= w;

filters/glitch/src/glitch.wgsl

@@ -1,5 +1,5 @@
 struct GlitchUniforms {
-  uSeed: f32
+  uSeed: f32,
   uDimensions: vec2<f32>,
   uAspect: f32,
   uFillMode: u32,

filters/glow/src/GlowFilter.ts

@@ -1,7 +1,7 @@
-import { vertex, wgslVertex } from '@tools/fragments';
+import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
 import fragment from './glow.frag';
 import source from './glow.wgsl';
-import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js';
+import { vertex, wgslVertex } from '@tools/fragments';
 
 /**
  * This WebGPU filter has been ported from the WebGL renderer that was originally created by mishaa

filters/glow/src/glow.wgsl

@@ -31,7 +31,7 @@ fn mainFragment(
   let distance = glowUniforms.uDistance;
 
   let dist: f32 = glowUniforms.uDistance;
-  let angleStepSize: f32 = min(1 / quality / distance, PI * 2.0);
+  let angleStepSize: f32 = min(1. / quality / distance, PI * 2.0);
   let angleStepNum: f32 = ceil(PI * 2.0 / angleStepSize);
 
   let px: vec2<f32> = vec2<f32>(1.0 / gfu.uInputSize.xy);
@@ -46,12 +46,12 @@ fn mainFragment(
     direction = vec2<f32>(cos(angle), sin(angle)) * px;
     for (var curDistance = 0.0; curDistance < dist; curDistance+=1) {
       displaced = vec2<f32>(clamp(uv + direction * (curDistance + 1.0), gfu.uInputClamp.xy, gfu.uInputClamp.zw));
-      curColor = textureSample(iTexture, iSampler, displaced);
+      curColor = textureSample(uTexture, uSampler, displaced);
       totalAlpha += (dist - curDistance) * curColor.a;
     }
   }
 
-  curColor = textureSample(iTexture, iSampler, uv);
+  curColor = textureSample(uTexture, uSampler, uv);
 
   let glowColorRGB = glowUniforms.uColor;
   let glowAlpha = glowUniforms.uAlpha;