From fcd7c66763f56b72814db09c4d10c0d9740539a6 Mon Sep 17 00:00:00 2001 From: Baz Utsahajit Date: Thu, 4 Jan 2024 23:24:23 +0000 Subject: [PATCH] Resolve WGSL (WIP) --- .../advanced-bloom/src/advanced-bloom.wgsl | 2 +- filters/ascii/src/AsciiFilter.ts | 4 +- filters/ascii/src/ascii.wgsl | 14 +++- filters/bevel/src/BevelFilter.ts | 4 +- .../color-gradient/src/ColorGradientFilter.ts | 4 +- .../color-gradient/src/color-gradient.wgsl | 79 ++++++++++--------- filters/color-map/src/color-map.wgsl | 4 +- .../color-overlay/src/ColorOverlayFilter.ts | 4 +- filters/color-overlay/src/color-overlay.wgsl | 2 +- .../color-replace/src/ColorReplaceFilter.ts | 4 +- filters/cross-hatch/src/crosshatch.wgsl | 5 ++ filters/crt/src/crt.wgsl | 5 ++ filters/emboss/src/EmbossFilter.ts | 4 +- filters/emboss/src/emboss.wgsl | 2 +- filters/glitch/src/GlitchFilter.ts | 9 ++- filters/glitch/src/glitch.wgsl | 2 +- filters/glow/src/GlowFilter.ts | 4 +- filters/glow/src/glow.wgsl | 6 +- .../src/MultiColorReplaceFilter.ts | 10 +-- filters/old-film/src/OldFilmFilter.ts | 5 +- filters/old-film/src/old-film.wgsl | 4 + filters/outline/src/OutlineFilter.ts | 7 +- filters/outline/src/outline.wgsl | 4 +- filters/pixelate/src/PixelateFilter.ts | 4 +- filters/pixelate/src/pixelate.wgsl | 4 +- filters/reflection/src/reflection.wgsl | 2 +- filters/rgb-split/src/RGBSplitFilter.ts | 4 +- filters/rgb-split/src/rgb-split.wgsl | 8 +- .../src/SimpleLightmapFilter.ts | 4 +- .../simple-lightmap/src/simple-lightmap.wgsl | 2 +- filters/twist/src/twist.wgsl | 4 +- filters/zoom-blur/src/zoom-blur.wgsl | 5 ++ tools/demo/src/index.js | 4 +- tools/fragments/index.js | 3 +- 34 files changed, 134 insertions(+), 98 deletions(-) diff --git a/filters/advanced-bloom/src/advanced-bloom.wgsl b/filters/advanced-bloom/src/advanced-bloom.wgsl index a25d905d5..29b2fdfe3 100644 --- a/filters/advanced-bloom/src/advanced-bloom.wgsl +++ b/filters/advanced-bloom/src/advanced-bloom.wgsl @@ -16,7 +16,7 @@ fn mainFragment( var color = textureSample(uTexture, uSampler, uv); color = vec4(color.rgb * advancedBloomUniforms.uBrightness, color.a); - var bloomColor = vec4(textureSample(uMapTexture, iSampler, uv).rgb, 0.0); + var bloomColor = vec4(textureSample(uMapTexture, uSampler, uv).rgb, 0.0); bloomColor = vec4(bloomColor.rgb * advancedBloomUniforms.uBloomScale, bloomColor.a); return color + bloomColor; diff --git a/filters/ascii/src/AsciiFilter.ts b/filters/ascii/src/AsciiFilter.ts index 66f8b107d..a55a85c50 100644 --- a/filters/ascii/src/AsciiFilter.ts +++ b/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) diff --git a/filters/ascii/src/ascii.wgsl b/filters/ascii/src/ascii.wgsl index 76afb247b..202e5e992 100644 --- a/filters/ascii/src/ascii.wgsl +++ b/filters/ascii/src/ascii.wgsl @@ -92,18 +92,28 @@ fn character(n: f32, p: vec2) -> f32 return 0.0; } +fn modulo(x: f32, y: f32) -> f32 +{ + return x - y * floor(x/y); +} + +fn moduloVec2(x: vec2, y: vec2) -> vec2 +{ + return x - y * floor(x/y); +} + fn mapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; mappedCoord *= gfu.uInputSize.xy; - mappedCoord += gfu.outputFrame.xy; + mappedCoord += gfu.uOutputFrame.xy; return mappedCoord; } fn unmapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; - mappedCoord -= gfu.outputFrame.xy; + mappedCoord -= gfu.uOutputFrame.xy; mappedCoord /= gfu.uInputSize.xy; return mappedCoord; } \ No newline at end of file diff --git a/filters/bevel/src/BevelFilter.ts b/filters/bevel/src/BevelFilter.ts index d50f7318a..485b2b1a1 100644 --- a/filters/bevel/src/BevelFilter.ts +++ b/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 { diff --git a/filters/color-gradient/src/ColorGradientFilter.ts b/filters/color-gradient/src/ColorGradientFilter.ts index 0d987463f..d321d38bc 100644 --- a/filters/color-gradient/src/ColorGradientFilter.ts +++ b/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' }, diff --git a/filters/color-gradient/src/color-gradient.wgsl b/filters/color-gradient/src/color-gradient.wgsl index 0ecf03bb9..6aea080e6 100644 --- a/filters/color-gradient/src/color-gradient.wgsl +++ b/filters/color-gradient/src/color-gradient.wgsl @@ -1,10 +1,13 @@ struct ColorGradientUniforms { - uDistance: f32, - uStrength: vec2, - uColor: vec3, + uType: i32, + uAngle: f32, uAlpha: f32, - uQuality: f32, - uKnockout: f32, + uColors: array, 20>, + uOffsets: array, + uAlphas: array, + uNumStops: f32, + uMaxColors: f32, + uReplace: f32, }; struct GlobalFilterUniforms { @@ -23,10 +26,10 @@ struct GlobalFilterUniforms { @group(1) @binding(0) var colorGradientUniforms : ColorGradientUniforms; struct VSOutput { - @builtin(position) position: vec4, - @location(0) uv : vec2 - @location(1) coord : vec2 - }; + @builtin(position) position: vec4, + @location(0) uv : vec2, + @location(1) coord : vec2 +}; fn filterVertexPosition(aPosition:vec2) -> vec4 { @@ -45,7 +48,7 @@ fn filterTextureCoord( aPosition:vec2 ) -> vec2 fn filterCoord( vTextureCoord:vec2 ) -> vec2 { - return vTextureCoord * gfu.uInputSize.sy / gfu.uOutputFrame.zw; + return vTextureCoord * gfu.uInputSize.xy / gfu.uOutputFrame.zw; } fn globalTextureCoord( aPosition:vec2 ) -> vec2 @@ -71,9 +74,9 @@ fn mainVertex( } struct ColorStop { - offset: f32; - color: vec3; - alpha: f32; + offset: f32, + color: vec3, + alpha: f32, }; fn rotate2d(angle: f32) -> mat2x2{ @@ -97,15 +100,15 @@ fn projectRadialPosition(pos: vec2) -> f32 { fn projectAnglePosition(pos: vec2, angle: f32) -> f32 { var center: vec2 = pos - vec2(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, int type, angle: f32) -> f32 { - if (type == TYPE_LINEAR) { +fn projectPosition(pos: vec2, 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, int type, angle: f32) -> f32 { @fragment fn mainFragment( @builtin(position) position: vec4, - @location(0) uv : vec2 + @location(0) uv : vec2, @location(1) coord : vec2 ) -> @location(0) vec4 { // current/original color var currentColor: vec4 = 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 = vec4(from.color * from.alpha, from.alpha); - var colorTo: vec4 = vec4(to.color * to.alpha, to.alpha); + var colorFrom: vec4 = vec4(stopFrom.color * stopFrom.alpha, stopFrom.alpha); + var colorTo: vec4 = vec4(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 = 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 { diff --git a/filters/color-map/src/color-map.wgsl b/filters/color-map/src/color-map.wgsl index 7a379a25d..a14b8f7fe 100644 --- a/filters/color-map/src/color-map.wgsl +++ b/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 = textureSample(uMapTexture, iSampler, vec2(s0,yOffset)); - let slice1Color: vec4 = textureSample(uMapTexture, iSampler, vec2(s1,yOffset)); + let slice0Color: vec4 = textureSample(uMapTexture, uSampler, vec2(s0,yOffset)); + let slice1Color: vec4 = textureSample(uMapTexture, uSampler, vec2(s1,yOffset)); let zOffset: f32 = fract(color.b * innerWidth); adjusted = mix(slice0Color, slice1Color, zOffset); altColor = vec4(color.rgb * color.a, color.a); diff --git a/filters/color-overlay/src/ColorOverlayFilter.ts b/filters/color-overlay/src/ColorOverlayFilter.ts index 146671d83..9391e524f 100644 --- a/filters/color-overlay/src/ColorOverlayFilter.ts +++ b/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 { diff --git a/filters/color-overlay/src/color-overlay.wgsl b/filters/color-overlay/src/color-overlay.wgsl index 2d9bd948d..b3f44fade 100644 --- a/filters/color-overlay/src/color-overlay.wgsl +++ b/filters/color-overlay/src/color-overlay.wgsl @@ -12,6 +12,6 @@ fn mainFragment( @builtin(position) position: vec4, @location(0) uv : vec2 ) -> @location(0) vec4 { - let c = textureSample(uTexture, uSampler, vTextureCoord); + let c = textureSample(uTexture, uSampler, uv); return vec4(mix(c.rgb, colorOverlayUniforms.uColor.rgb, c.a * colorOverlayUniforms.uAlpha), c.a); } diff --git a/filters/color-replace/src/ColorReplaceFilter.ts b/filters/color-replace/src/ColorReplaceFilter.ts index 935b6b936..a2aa22ea0 100644 --- a/filters/color-replace/src/ColorReplaceFilter.ts +++ b/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 diff --git a/filters/cross-hatch/src/crosshatch.wgsl b/filters/cross-hatch/src/crosshatch.wgsl index bb73c2a32..f8f1c0211 100644 --- a/filters/cross-hatch/src/crosshatch.wgsl +++ b/filters/cross-hatch/src/crosshatch.wgsl @@ -41,4 +41,9 @@ fn mainFragment( } return vec4(1.0); +} + +fn modulo(x: f32, y: f32) -> f32 +{ + return x - y * floor(x/y); } \ No newline at end of file diff --git a/filters/crt/src/crt.wgsl b/filters/crt/src/crt.wgsl index d8b0a06ca..2278dffc6 100644 --- a/filters/crt/src/crt.wgsl +++ b/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 { return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453); diff --git a/filters/emboss/src/EmbossFilter.ts b/filters/emboss/src/EmbossFilter.ts index 615a27189..91c6dcc97 100644 --- a/filters/emboss/src/EmbossFilter.ts +++ b/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 { diff --git a/filters/emboss/src/emboss.wgsl b/filters/emboss/src/emboss.wgsl index 98d2adb8a..b62a69da6 100644 --- a/filters/emboss/src/emboss.wgsl +++ b/filters/emboss/src/emboss.wgsl @@ -15,7 +15,7 @@ struct GlobalFilterUniforms { @group(0) @binding(1) var uTexture: texture_2d; @group(0) @binding(2) var uSampler: sampler; -@group(2) @binding(0) var embossUniforms : EmbossUniforms; +@group(1) @binding(0) var embossUniforms : EmbossUniforms; @fragment fn mainFragment( diff --git a/filters/glitch/src/GlitchFilter.ts b/filters/glitch/src/GlitchFilter.ts index 27ec417fe..adca1ddc0 100644 --- a/filters/glitch/src/GlitchFilter.ts +++ b/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' }, 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' }, @@ -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; diff --git a/filters/glitch/src/glitch.wgsl b/filters/glitch/src/glitch.wgsl index 18d10e17b..7ea8a6673 100644 --- a/filters/glitch/src/glitch.wgsl +++ b/filters/glitch/src/glitch.wgsl @@ -1,5 +1,5 @@ struct GlitchUniforms { - uSeed: f32 + uSeed: f32, uDimensions: vec2, uAspect: f32, uFillMode: u32, diff --git a/filters/glow/src/GlowFilter.ts b/filters/glow/src/GlowFilter.ts index 6daecffe3..a5389ddcb 100644 --- a/filters/glow/src/GlowFilter.ts +++ b/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 diff --git a/filters/glow/src/glow.wgsl b/filters/glow/src/glow.wgsl index 0ea6fa966..3016b5b05 100644 --- a/filters/glow/src/glow.wgsl +++ b/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 = vec2(1.0 / gfu.uInputSize.xy); @@ -46,12 +46,12 @@ fn mainFragment( direction = vec2(cos(angle), sin(angle)) * px; for (var curDistance = 0.0; curDistance < dist; curDistance+=1) { displaced = vec2(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; diff --git a/filters/multi-color-replace/src/MultiColorReplaceFilter.ts b/filters/multi-color-replace/src/MultiColorReplaceFilter.ts index 7f273e47a..dc40b8559 100644 --- a/filters/multi-color-replace/src/MultiColorReplaceFilter.ts +++ b/filters/multi-color-replace/src/MultiColorReplaceFilter.ts @@ -1,7 +1,7 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js'; import fragment from './multi-color-replace.frag'; import source from './multi-color-replace.wgsl'; -import { Color, ColorSource, Filter, GlProgram, GpuProgram } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; export interface MultiColorReplaceFilterOptions { @@ -81,18 +81,18 @@ export class MultiColorReplaceFilter extends Filter const gpuProgram = new GpuProgram({ vertex: { - source: wgslVertex.replace(/\${MAX_COLORS}/g, (maxColors).toFixed(0)), + source: wgslVertex, entryPoint: 'mainVertex', }, fragment: { - source, + source: source.replace(/\$\{MAX_COLORS\}/g, (maxColors).toFixed(0)), entryPoint: 'mainFragment', }, }); const glProgram = new GlProgram({ vertex, - fragment: fragment.replace(/\${MAX_COLORS}/g, (maxColors).toFixed(0)), + fragment: fragment.replace(/\$\{MAX_COLORS\}/g, (maxColors).toFixed(0)), name: 'multi-color-replace-filter', }); diff --git a/filters/old-film/src/OldFilmFilter.ts b/filters/old-film/src/OldFilmFilter.ts index 7437a759e..18e73928c 100644 --- a/filters/old-film/src/OldFilmFilter.ts +++ b/filters/old-film/src/OldFilmFilter.ts @@ -1,7 +1,8 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Filter, GlProgram, GpuProgram } from 'pixi.js'; import fragment from './old-film.frag'; import source from './old-film.wgsl'; -import { Filter, GlProgram, GpuProgram } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; + import type { FilterSystem, RenderSurface, Texture } from 'pixi.js'; export interface OldFilmFilterOptions diff --git a/filters/old-film/src/old-film.wgsl b/filters/old-film/src/old-film.wgsl index c87fe0edc..f8f0bea3f 100644 --- a/filters/old-film/src/old-film.wgsl +++ b/filters/old-film/src/old-film.wgsl @@ -61,6 +61,10 @@ fn mainFragment( const SQRT_2: f32 = 1.414213; const SEPIA_RGB: vec3 = vec3(112.0 / 255.0, 66.0 / 255.0, 20.0 / 255.0); +fn modulo(x: f32, y: f32) -> f32 +{ + return x - y * floor(x/y); +} fn rand(co: vec2) -> f32 { diff --git a/filters/outline/src/OutlineFilter.ts b/filters/outline/src/OutlineFilter.ts index b3dbfd2c2..ffe92e8d9 100644 --- a/filters/outline/src/OutlineFilter.ts +++ b/filters/outline/src/OutlineFilter.ts @@ -1,7 +1,8 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Color, Filter, GlProgram, GpuProgram } from 'pixi.js'; import fragment from './outline.frag'; import source from './outline.wgsl'; -import { Color, Filter, GlProgram, GpuProgram } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; + import type { ColorSource, FilterSystem, RenderSurface, Texture } from 'pixi.js'; export interface OutlineFilterOptions @@ -108,7 +109,7 @@ export class OutlineFilter extends Filter uColor: { value: new Color(options.color), type: 'vec3' }, uAlpha: { value: options.alpha, type: 'f32' }, uAngleStep: { value: 0, type: 'f32' }, - uKnockout: { value: options.knockout ? 1 : 0, type: 'i32' }, + uKnockout: { value: options.knockout ? 1 : 0, type: 'f32' }, } }, }); diff --git a/filters/outline/src/outline.wgsl b/filters/outline/src/outline.wgsl index 8979dba47..b999ed885 100644 --- a/filters/outline/src/outline.wgsl +++ b/filters/outline/src/outline.wgsl @@ -3,7 +3,7 @@ struct OutlineUniforms { uColor:vec3, uAlpha:f32, uAngleStep:f32, - uKnockout:i32, + uKnockout:f32, }; struct GlobalFilterUniforms { @@ -27,7 +27,7 @@ fn mainFragment( @location(0) uv : vec2 ) -> @location(0) vec4 { let sourceColor: vec4 = textureSample(uTexture, uSampler, uv); - let contentColor: vec4 = sourceColor * f32(1 - outlineUniforms.uKnockout); + let contentColor: vec4 = sourceColor * (1. - outlineUniforms.uKnockout); let outlineAlpha: f32 = outlineUniforms.uAlpha * outlineMaxAlphaAtPos(uv) * (1. - sourceColor.a); let outlineColor: vec4 = vec4(vec3(outlineUniforms.uColor) * outlineAlpha, outlineAlpha); diff --git a/filters/pixelate/src/PixelateFilter.ts b/filters/pixelate/src/PixelateFilter.ts index 6a41e1056..80498696a 100644 --- a/filters/pixelate/src/PixelateFilter.ts +++ b/filters/pixelate/src/PixelateFilter.ts @@ -1,7 +1,7 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Filter, GlProgram, GpuProgram, Point, UniformGroup } from 'pixi.js'; import fragment from './pixelate.frag'; import source from './pixelate.wgsl'; -import { Filter, GlProgram, GpuProgram, UniformGroup, Point } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; type Size = number | number[] | Point; diff --git a/filters/pixelate/src/pixelate.wgsl b/filters/pixelate/src/pixelate.wgsl index edb2b0db4..8fdb0d4a8 100644 --- a/filters/pixelate/src/pixelate.wgsl +++ b/filters/pixelate/src/pixelate.wgsl @@ -35,14 +35,14 @@ fn mapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; mappedCoord *= gfu.uInputSize.xy; - mappedCoord += gfu.outputFrame.xy; + mappedCoord += gfu.uOutputFrame.xy; return mappedCoord; } fn unmapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; - mappedCoord -= gfu.outputFrame.xy; + mappedCoord -= gfu.uOutputFrame.xy; mappedCoord /= gfu.uInputSize.xy; return mappedCoord; } diff --git a/filters/reflection/src/reflection.wgsl b/filters/reflection/src/reflection.wgsl index 87c6a70ca..f6458436c 100644 --- a/filters/reflection/src/reflection.wgsl +++ b/filters/reflection/src/reflection.wgsl @@ -51,7 +51,7 @@ fn mainFragment( let amplitude: f32 = ((uAmplitude.y - uAmplitude.x) * k + uAmplitude.x ) / gfu.uInputSize.x; let waveLength: f32 = ((uWavelength.y - uWavelength.x) * k + uWavelength.x) / gfu.uInputSize.y; - let alpha: f32 = (uAlpha.y - uAlpha.x) * k + uAlpha.x; + let alpha: f32 = select((uAlpha.y - uAlpha.x) * k + uAlpha.x, 1., returnColorOnly); var x: f32 = uv.x + cos(v * 6.28 / waveLength - uTime) * amplitude; x = clamp(x, gfu.uInputClamp.x, gfu.uInputClamp.z); diff --git a/filters/rgb-split/src/RGBSplitFilter.ts b/filters/rgb-split/src/RGBSplitFilter.ts index db147ae3d..0b984592a 100644 --- a/filters/rgb-split/src/RGBSplitFilter.ts +++ b/filters/rgb-split/src/RGBSplitFilter.ts @@ -1,7 +1,7 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Filter, GlProgram, GpuProgram, PointData } from 'pixi.js'; import fragment from './rgb-split.frag'; import source from './rgb-split.wgsl'; -import { Filter, GlProgram, GpuProgram, PointData } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; export interface RGBSplitFilterOptions { diff --git a/filters/rgb-split/src/rgb-split.wgsl b/filters/rgb-split/src/rgb-split.wgsl index ffcb2b197..baae5b81f 100644 --- a/filters/rgb-split/src/rgb-split.wgsl +++ b/filters/rgb-split/src/rgb-split.wgsl @@ -24,9 +24,9 @@ fn mainFragment( @builtin(position) position: vec4, @location(0) uv : vec2 ) -> @location(0) vec4 { - let r = textureSample(uTexture, uSampler, vTextureCoord + rgbSplitUniforms.uRed/uInputSize.xy).r; - let g = textureSample(uTexture, uSampler, vTextureCoord + rgbSplitUniforms.uGreen/uInputSize.xy).g; - let b = textureSample(uTexture, uSampler, vTextureCoord + rgbSplitUniforms.uBlue/uInputSize.xy).b; - let a = textureSample(uTexture, uSampler, vTextureCoord).a; + let r = textureSample(uTexture, uSampler, uv + vec2(rgbSplitUniforms.uRed.x / gfu.uInputSize.x, rgbSplitUniforms.uRed.y / gfu.uInputSize.y)).r; + let g = textureSample(uTexture, uSampler, uv + vec2(rgbSplitUniforms.uGreen.x / gfu.uInputSize.x, rgbSplitUniforms.uGreen.y / gfu.uInputSize.y)).g; + let b = textureSample(uTexture, uSampler, uv + vec2(rgbSplitUniforms.uBlue.x / gfu.uInputSize.x, rgbSplitUniforms.uBlue.y / gfu.uInputSize.y)).b; + let a = textureSample(uTexture, uSampler, uv).a; return vec4(r, g, b, a); } diff --git a/filters/simple-lightmap/src/SimpleLightmapFilter.ts b/filters/simple-lightmap/src/SimpleLightmapFilter.ts index 32be4da04..00fbb744b 100644 --- a/filters/simple-lightmap/src/SimpleLightmapFilter.ts +++ b/filters/simple-lightmap/src/SimpleLightmapFilter.ts @@ -1,7 +1,7 @@ -import { vertex, wgslVertex } from '@tools/fragments'; +import { Color, ColorSource, Filter, FilterSystem, GlProgram, GpuProgram, RenderSurface, Texture } from 'pixi.js'; import fragment from './simple-lightmap.frag'; import source from './simple-lightmap.wgsl'; -import { Color, Filter, GlProgram, GpuProgram, Texture, FilterSystem, RenderSurface, ColorSource } from 'pixi.js'; +import { vertex, wgslVertex } from '@tools/fragments'; export interface SimpleLightmapFilterOptions { diff --git a/filters/simple-lightmap/src/simple-lightmap.wgsl b/filters/simple-lightmap/src/simple-lightmap.wgsl index 995603e49..6a393379f 100644 --- a/filters/simple-lightmap/src/simple-lightmap.wgsl +++ b/filters/simple-lightmap/src/simple-lightmap.wgsl @@ -31,7 +31,7 @@ fn mainFragment( let diffuseColor: vec4 = textureSample(uTexture, uSampler, uv); let lightCoord: vec2 = (uv * gfu.uInputSize.xy) / simpleLightmapUniforms.uDimensions; - let light: vec4 = textureSample(uMapTexture, uSampler, position); + let light: vec4 = textureSample(uMapTexture, uSampler, lightCoord); let ambient: vec3 = uColor * uAlpha; let intensity: vec3 = ambient + light.rgb; let finalColor: vec3 = diffuseColor.rgb * intensity; diff --git a/filters/twist/src/twist.wgsl b/filters/twist/src/twist.wgsl index a1f270ca7..b674fed1e 100644 --- a/filters/twist/src/twist.wgsl +++ b/filters/twist/src/twist.wgsl @@ -30,14 +30,14 @@ fn mapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; mappedCoord *= gfu.uInputSize.xy; - mappedCoord += gfu.outputFrame.xy; + mappedCoord += gfu.uOutputFrame.xy; return mappedCoord; } fn unmapCoord(coord: vec2 ) -> vec2 { var mappedCoord: vec2 = coord; - mappedCoord -= gfu.outputFrame.xy; + mappedCoord -= gfu.uOutputFrame.xy; mappedCoord /= gfu.uInputSize.xy; return mappedCoord; } diff --git a/filters/zoom-blur/src/zoom-blur.wgsl b/filters/zoom-blur/src/zoom-blur.wgsl index c22f8124c..219721809 100644 --- a/filters/zoom-blur/src/zoom-blur.wgsl +++ b/filters/zoom-blur/src/zoom-blur.wgsl @@ -94,6 +94,11 @@ fn mainFragment( return select(color, textureSample(uTexture, uSampler, uv), returnColorOnly); } +fn modulo(x: f32, y: f32) -> f32 +{ + return x - y * floor(x/y); +} + // author: http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/ fn rand(co: vec2, seed: f32) -> f32 { diff --git a/tools/demo/src/index.js b/tools/demo/src/index.js index eb5a56c6c..42a146864 100644 --- a/tools/demo/src/index.js +++ b/tools/demo/src/index.js @@ -1,7 +1,7 @@ -import './ga'; import DemoApplication from './DemoApplication'; import * as filters from './filters'; import { getEnabledFiltersFromQueryString } from './utils'; +import './ga'; const main = async () => { @@ -9,7 +9,7 @@ const main = async () => app.enabledFilters = getEnabledFiltersFromQueryString(); - await app.init({ preference: 'webgl' }); + await app.init(); await app.load([ { alias: 'background', src: 'images/displacement_BG.jpg' }, { alias: 'overlay', src: 'images/overlay.png' }, diff --git a/tools/fragments/index.js b/tools/fragments/index.js index 2f07dffd7..3fb2dc434 100644 --- a/tools/fragments/index.js +++ b/tools/fragments/index.js @@ -1,3 +1,4 @@ import vertex from './default.vert'; -import wgslVertex from './default.vert'; +import wgslVertex from './default.wgsl'; + export { vertex, wgslVertex };