Skip to content

Commit

Permalink
More known issue fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbazukun123
bbazukun123 committed Jan 5, 2024
1 parent 7cf7401 commit 7b959d1
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 36 deletions.
31 changes: 18 additions & 13 deletions filters/glitch/src/GlitchFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export class GlitchFilter extends Filter

public uniforms: {
uSeed: number
uDimensions: PointData,
uDimensions: Float32Array,
uAspect: number,
uFillMode: number,
uOffset: number,
Expand Down Expand Up @@ -139,6 +139,13 @@ export class GlitchFilter extends Filter
name: 'glitch-filter',
});

const canvas = document.createElement('canvas');

canvas.width = 4;
canvas.height = options.sampleSize ?? 512;

const texture = getCanvasTexture(canvas, { style: { scaleMode: 'nearest' } });

super({
gpuProgram,
glProgram,
Expand All @@ -147,23 +154,22 @@ 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: 'i32' },
uFillMode: { value: options?.fillMode ?? 0, type: 'f32' },
uOffset: { value: options?.offset ?? 100, type: 'f32' },
uDirection: { value: options?.direction ?? 0, type: 'f32' },
uRed: { value: new Float32Array(2), type: 'vec2<f32>' },
uGreen: { value: new Float32Array(2), type: 'vec2<f32>' },
uBlue: { value: new Float32Array(2), type: 'vec2<f32>' },
uRed: { value: options.red, type: 'vec2<f32>' },
uGreen: { value: options.green, type: 'vec2<f32>' },
uBlue: { value: options.blue, type: 'vec2<f32>' },
},
uDisplacementMap: Texture.WHITE,
uDisplacementMap: texture.source,
uDisplacementSampler: texture.source.style,
},
});

this.uniforms = this.resources.glitchUniforms.uniforms;

this._canvas = document.createElement('canvas');
this._canvas.width = 4;
this._canvas.height = this.sampleSize;
this.texture = getCanvasTexture(this._canvas, { style: { scaleMode: 'nearest' } });
this._canvas = canvas;
this.texture = texture;

Object.assign(this, options);
}
Expand All @@ -181,8 +187,8 @@ export class GlitchFilter extends Filter
{
const { width, height } = input.frame;

this.uniforms.uDimensions.x = width;
this.uniforms.uDimensions.y = height;
this.uniforms.uDimensions[0] = width;
this.uniforms.uDimensions[1] = height;
this.uniforms.uAspect = height / width;

filterManager.applyFilter(this, input, output, clearMode);
Expand Down Expand Up @@ -302,7 +308,6 @@ export class GlitchFilter extends Filter
}

texture.source.update();
this.resources.uDisplacementMap = texture;
}

/**
Expand Down
30 changes: 16 additions & 14 deletions filters/glitch/src/glitch.frag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ uniform sampler2D uDisplacementMap;
uniform float uSeed;
uniform vec2 uDimensions;
uniform float uAspect;
uniform int uFillMode;
uniform float uFillMode;
uniform float uOffset;
uniform float uDirection;
uniform vec2 uRed;
Expand Down Expand Up @@ -50,41 +50,43 @@ void main(void)

coord = vTextureCoord + vec2(cosDir * displacement, sinDir * displacement * uAspect);

if (uFillMode == CLAMP) {
int fillMode = int(uFillMode);

if (fillMode == CLAMP) {
coord = clamp(coord, uInputClamp.xy, uInputClamp.zw);
} else {
if( coord.x > uInputClamp.z ) {
if (uFillMode == TRANSPARENT) {
if (fillMode == TRANSPARENT) {
discard;
} else if (uFillMode == LOOP) {
} else if (fillMode == LOOP) {
coord.x -= uInputClamp.z;
} else if (uFillMode == MIRROR) {
} else if (fillMode == MIRROR) {
coord.x = uInputClamp.z * 2.0 - coord.x;
}
} else if( coord.x < uInputClamp.x ) {
if (uFillMode == TRANSPARENT) {
if (fillMode == TRANSPARENT) {
discard;
} else if (uFillMode == LOOP) {
} else if (fillMode == LOOP) {
coord.x += uInputClamp.z;
} else if (uFillMode == MIRROR) {
} else if (fillMode == MIRROR) {
coord.x *= -uInputClamp.z;
}
}

if( coord.y > uInputClamp.w ) {
if (uFillMode == TRANSPARENT) {
if (fillMode == TRANSPARENT) {
discard;
} else if (uFillMode == LOOP) {
} else if (fillMode == LOOP) {
coord.y -= uInputClamp.w;
} else if (uFillMode == MIRROR) {
} else if (fillMode == MIRROR) {
coord.y = uInputClamp.w * 2.0 - coord.y;
}
} else if( coord.y < uInputClamp.y ) {
if (uFillMode == TRANSPARENT) {
if (fillMode == TRANSPARENT) {
discard;
} else if (uFillMode == LOOP) {
} else if (fillMode == LOOP) {
coord.y += uInputClamp.w;
} else if (uFillMode == MIRROR) {
} else if (fillMode == MIRROR) {
coord.y *= -uInputClamp.w;
}
}
Expand Down
103 changes: 100 additions & 3 deletions filters/glitch/src/glitch.wgsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ struct GlitchUniforms {
uSeed: f32,
uDimensions: vec2<f32>,
uAspect: f32,
uFillMode: u32,
uFillMode: f32,
uOffset: f32,
uDirection: f32,
uRed: vec2<f32>,
Expand All @@ -24,11 +24,108 @@ struct GlobalFilterUniforms {
@group(0) @binding(1) var uTexture: texture_2d<f32>;
@group(0) @binding(2) var uSampler: sampler;
@group(1) @binding(0) var<uniform> glitchUniforms : GlitchUniforms;
@group(1) @binding(1) var uDisplacementMap: texture_2d<f32>;
@group(1) @binding(2) var uDisplacementSampler: sampler;

@fragment
fn mainFragment(
@builtin(position) position: vec4<f32>,
@location(0) uv : vec2<f32>
) -> @location(0) vec4<f32> {
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
}
let uSeed: f32 = glitchUniforms.uSeed;
let uDimensions: vec2<f32> = glitchUniforms.uDimensions;
let uAspect: f32 = glitchUniforms.uAspect;
let uOffset: f32 = glitchUniforms.uOffset;
let uDirection: f32 = glitchUniforms.uDirection;
let uRed: vec2<f32> = glitchUniforms.uRed;
let uGreen: vec2<f32> = glitchUniforms.uGreen;
let uBlue: vec2<f32> = glitchUniforms.uBlue;

let uInputSize: vec4<f32> = gfu.uInputSize;
let uInputClamp: vec4<f32> = gfu.uInputClamp;

var discarded: bool = false;
var coord: vec2<f32> = (uv * uInputSize.xy) / uDimensions;

if (coord.x > 1.0 || coord.y > 1.0) {
discarded = true;
}

let sinDir: f32 = sin(uDirection);
let cosDir: f32 = cos(uDirection);

let cx: f32 = coord.x - 0.5;
let cy: f32 = (coord.y - 0.5) * uAspect;
var ny: f32 = (-sinDir * cx + cosDir * cy) / uAspect + 0.5;

ny = select(select(ny, -ny, ny < 0.0), 2.0 - ny, ny > 1.0);

let dc: vec4<f32> = textureSample(uDisplacementMap, uDisplacementSampler, vec2<f32>(0.5, ny));

let displacement: f32 = (dc.r - dc.g) * (uOffset / uInputSize.x);

coord = uv + vec2<f32>(cosDir * displacement, sinDir * displacement * uAspect);

let fillMode: i32 = i32(glitchUniforms.uFillMode);

if (fillMode == CLAMP) {
coord = clamp(coord, uInputClamp.xy, uInputClamp.zw);
} else {
if (coord.x > uInputClamp.z) {
if (fillMode == TRANSPARENT) {
discarded = true;
} else if (fillMode == LOOP) {
coord.x = coord.x - uInputClamp.z;
} else if (fillMode == MIRROR) {
coord.x = uInputClamp.z * 2.0 - coord.x;
}
} else if (coord.x < uInputClamp.x) {
if (fillMode == TRANSPARENT) {
discarded = true;
} else if (fillMode == LOOP) {
coord.x = coord.x + uInputClamp.z;
} else if (fillMode == MIRROR) {
coord.x = coord.x * -uInputClamp.z;
}
}

if (coord.y > uInputClamp.w) {
if (fillMode == TRANSPARENT) {
discarded = true;
} else if (fillMode == LOOP) {
coord.y = coord.y - uInputClamp.w;
} else if (fillMode == MIRROR) {
coord.y = uInputClamp.w * 2.0 - coord.y;
}
} else if (coord.y < uInputClamp.y) {
if (fillMode == TRANSPARENT) {
discarded = true;
} else if (fillMode == LOOP) {
coord.y = coord.y + uInputClamp.w;
} else if (fillMode == MIRROR) {
coord.y = coord.y * -uInputClamp.w;
}
}
}

let seedR: f32 = 1.0 - uSeed * 0.4;
let seedG: f32 = 1.0 - uSeed * 0.3;
let seedB: f32 = 1.0 - uSeed * 0.2;

let offsetR: vec2<f32> = vec2(uRed.x * seedR / uInputSize.x, uRed.y * seedR / uInputSize.y);
let offsetG: vec2<f32> = vec2(uGreen.x * seedG / uInputSize.x, uGreen.y * seedG / uInputSize.y);
let offsetB: vec2<f32> = vec2(uBlue.x * seedB / uInputSize.x, uBlue.y * seedB / uInputSize.y);

let r = textureSample(uTexture, uSampler, coord + offsetR).r;
let g = textureSample(uTexture, uSampler, coord + offsetG).g;
let b = textureSample(uTexture, uSampler, coord + offsetB).b;
let a = textureSample(uTexture, uSampler, coord).a;

return select(vec4<f32>(r, g, b, a), vec4<f32>(0.0,0.0,0.0,0.0), discarded);
}

const TRANSPARENT: i32 = 0;
const ORIGINAL: i32 = 1;
const LOOP: i32 = 2;
const CLAMP: i32 = 3;
const MIRROR: i32 = 4;
2 changes: 0 additions & 2 deletions filters/outline/src/OutlineFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,6 @@ export class OutlineFilter extends Filter
this.uniforms.uThickness[0] = this.thickness / input.source.width;
this.uniforms.uThickness[1] = this.thickness / input.source.height;

this.resources.outlineUniforms.update();

filterManager.applyFilter(this, input, output, clearMode);
}

Expand Down
4 changes: 3 additions & 1 deletion filters/simple-lightmap/src/SimpleLightmapFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,8 @@ export class SimpleLightmapFilter extends Filter
uAlpha: { value: options.alpha, type: 'f32' },
uDimensions: { value: new Float32Array(2), type: 'vec2<f32>' },
},
uMapTexture: options.lightMap,
uMapTexture: options.lightMap.source,
uMapSampler: options.lightMap.source.style,
},
});

Expand Down Expand Up @@ -120,6 +121,7 @@ export class SimpleLightmapFilter extends Filter
{
this._lightMap = value;
this.resources.uMapTexture = value.source;
this.resources.uMapSampler = value.source.style;
}

/**
Expand Down
3 changes: 2 additions & 1 deletion filters/simple-lightmap/src/simple-lightmap.wgsl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ struct GlobalFilterUniforms {
@group(0) @binding(2) var uSampler: sampler;
@group(1) @binding(0) var<uniform> simpleLightmapUniforms : SimpleLightmapUniforms;
@group(1) @binding(1) var uMapTexture: texture_2d<f32>;
@group(1) @binding(2) var uMapSampler: sampler;

@fragment
fn mainFragment(
Expand All @@ -31,7 +32,7 @@ fn mainFragment(

let diffuseColor: vec4<f32> = textureSample(uTexture, uSampler, uv);
let lightCoord: vec2<f32> = (uv * gfu.uInputSize.xy) / simpleLightmapUniforms.uDimensions;
let light: vec4<f32> = textureSample(uMapTexture, uSampler, lightCoord);
let light: vec4<f32> = textureSample(uMapTexture, uMapSampler, lightCoord);
let ambient: vec3<f32> = uColor * uAlpha;
let intensity: vec3<f32> = ambient + light.rgb;
let finalColor: vec3<f32> = diffuseColor.rgb * intensity;
Expand Down
2 changes: 0 additions & 2 deletions tools/demo/src/filters/glitch.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { logDebugTexture } from 'pixi.js';

export default function ()
{
const app = this;
Expand Down

0 comments on commit 7b959d1

Please sign in to comment.