Skip to content

Commit

Permalink
Revert Color Uniforms to be Float32Arrays + Fix Color Gradient Filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@bbazukun123
bbazukun123 committed Jan 7, 2024
1 parent cee5f8b commit 579c2fd
Show file tree
Hide file tree
Showing 10 changed files with 210 additions and 90 deletions.
20 changes: 16 additions & 4 deletions filters/ascii/src/AsciiFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,12 @@ export class AsciiFilter extends Filter

public uniforms: {
uSize: number;
uColor: Color;
uColor: Float32Array;
uReplaceColor: number;
};

private _color!: Color;

constructor(options?: AsciiFilterOptions)
{
const replaceColor = options?.color && options.replaceColor !== false;
Expand Down Expand Up @@ -81,13 +83,15 @@ export class AsciiFilter extends Filter
resources: {
asciiUniforms: {
uSize: { value: options.size, type: 'f32' },
uColor: { value: new Color(options.color), type: 'vec3<f32>' },
uColor: { value: new Float32Array(3), type: 'vec3<f32>' },
uReplaceColor: { value: Number(replaceColor), type: 'f32' },
},
},
});

this.uniforms = this.resources.asciiUniforms.uniforms;
this._color = new Color();
this.color = options.color ?? 0xffffff;
}

/**
Expand All @@ -102,8 +106,16 @@ export class AsciiFilter extends Filter
* @example [1.0, 1.0, 1.0] = 0xffffff
* @default 0xffffff
*/
get color(): ColorSource { return this.uniforms.uColor.value as ColorSource; }
set color(value: ColorSource) { this.uniforms.uColor.setValue(value); }
get color(): ColorSource { return this._color.value as ColorSource; }
set color(value: ColorSource)
{
this._color.setValue(value);
const [r, g, b] = this._color.toArray();

this.uniforms.uColor[0] = r;
this.uniforms.uColor[1] = g;
this.uniforms.uColor[2] = b;
}

/**
* Determine whether or not to replace the source colors with the provided.
Expand Down
37 changes: 29 additions & 8 deletions filters/bevel/src/BevelFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,17 @@ export class BevelFilter extends Filter
};

public uniforms: {
uLightColor: Color;
uLightColor: Float32Array;
uLightAlpha: number;
uShadowColor: Color;
uShadowColor: Float32Array;
uShadowAlpha: number;
uTransform: Float32Array;
};

private _thickness!: number;
private _rotation!: number;
private _lightColor: Color;
private _shadowColor: Color;

constructor(options?: BevelFilterOptions)
{
Expand Down Expand Up @@ -99,9 +101,9 @@ export class BevelFilter extends Filter
glProgram,
resources: {
bevelUniforms: {
uLightColor: { value: new Color(), type: 'vec3<f32>' },
uLightColor: { value: new Float32Array(3), type: 'vec3<f32>' },
uLightAlpha: { value: options.lightAlpha, type: 'f32' },
uShadowColor: { value: new Color(), type: 'vec3<f32>' },
uShadowColor: { value: new Float32Array(3), type: 'vec3<f32>' },
uShadowAlpha: { value: options.shadowAlpha, type: 'f32' },
uTransform: { value: new Float32Array(2), type: 'vec2<f32>' },
}
Expand All @@ -113,6 +115,10 @@ export class BevelFilter extends Filter
});

this.uniforms = this.resources.bevelUniforms.uniforms;
this._lightColor = new Color();
this._shadowColor = new Color();
this.lightColor = options.lightColor ?? 0xffffff;
this.shadowColor = options.shadowColor ?? 0x000000;

Object.assign(this, options, { rotation });
}
Expand Down Expand Up @@ -144,9 +150,16 @@ export class BevelFilter extends Filter
* @example [1.0, 1.0, 1.0] = 0xffffff
* @default 0xffffff
*/
get lightColor(): ColorSource { return this.uniforms.uLightColor.value as ColorSource; }
get lightColor(): ColorSource { return this._lightColor.value as ColorSource; }
set lightColor(value: ColorSource)
{ this.uniforms.uLightColor.setValue(value); }
{
this._lightColor.setValue(value);
const [r, g, b] = this._lightColor.toArray();

this.uniforms.uLightColor[0] = r;
this.uniforms.uLightColor[1] = g;
this.uniforms.uLightColor[2] = b;
}

/**
* The alpha value of the left & top bevel.
Expand All @@ -159,8 +172,16 @@ export class BevelFilter extends Filter
* The color value of the right & bottom bevel.
* @default 0xffffff
*/
get shadowColor(): ColorSource { return this.uniforms.uShadowColor.value as ColorSource; }
set shadowColor(value: ColorSource) { this.uniforms.uShadowColor.setValue(value); }
get shadowColor(): ColorSource { return this._shadowColor.value as ColorSource; }
set shadowColor(value: ColorSource)
{
this._shadowColor.setValue(value);
const [r, g, b] = this._shadowColor.toArray();

this.uniforms.uShadowColor[0] = r;
this.uniforms.uShadowColor[1] = g;
this.uniforms.uShadowColor[2] = b;
}

/**
* The alpha value of the right & bottom bevel.
Expand Down
47 changes: 26 additions & 21 deletions filters/color-gradient/src/ColorGradientFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,12 @@ export class ColorGradientFilter extends Filter
replace: false,
};

public uniforms: {
public baseUniforms: {
uOptions: Float32Array;
uCounts: Float32Array;
};

public stopsUniforms: {
uColors: Float32Array;
uStops: Float32Array;
};
Expand Down Expand Up @@ -118,7 +121,7 @@ export class ColorGradientFilter extends Filter
gpuProgram,
glProgram,
resources: {
colorGradientUniforms: {
baseUniforms: {
uOptions: {
value: [
// Gradient Type
Expand All @@ -141,16 +144,18 @@ export class ColorGradientFilter extends Filter
],
type: 'vec2<f32>',
},

},
stopsUniforms: {
uColors: { value: new Float32Array(maxStops * 3), type: 'vec3<f32>', size: maxStops },

// We only need vec2, but we need to pad to eliminate the WGSL warning, TODO: @Mat ?
uStops: { value: new Float32Array(maxStops * 4), type: 'vec4<f32>', size: maxStops },
},
}
},
});

this.uniforms = this.resources.colorGradientUniforms.uniforms;
this.baseUniforms = this.resources.baseUniforms.uniforms;
this.stopsUniforms = this.resources.stopsUniforms.uniforms;

Object.assign(this, options);
}
Expand All @@ -174,52 +179,52 @@ export class ColorGradientFilter extends Filter
const indexStart = i * 3;

[r, g, b] = color.toArray();
this.uniforms.uColors[indexStart] = r;
this.uniforms.uColors[indexStart + 1] = g;
this.uniforms.uColors[indexStart + 2] = b;
this.stopsUniforms.uColors[indexStart] = r;
this.stopsUniforms.uColors[indexStart + 1] = g;
this.stopsUniforms.uColors[indexStart + 2] = b;

this.uniforms.uStops[i * 4] = sortedStops[i].offset;
this.uniforms.uStops[(i * 4) + 1] = sortedStops[i].alpha;
this.stopsUniforms.uStops[i * 4] = sortedStops[i].offset;
this.stopsUniforms.uStops[(i * 4) + 1] = sortedStops[i].alpha;
}

this.uniforms.uCounts[0] = sortedStops.length;
this.baseUniforms.uCounts[0] = sortedStops.length;
this._stops = sortedStops;
}

/**
* The type of gradient
* @default ColorGradientFilter.LINEAR
*/
get type(): number { return this.uniforms.uOptions[0]; }
set type(value: number) { this.uniforms.uOptions[0] = value; }
get type(): number { return this.baseUniforms.uOptions[0]; }
set type(value: number) { this.baseUniforms.uOptions[0] = value; }

/**
* The angle of the gradient in degrees
* @default 90
*/
get angle(): number { return this.uniforms.uOptions[1] + ANGLE_OFFSET; }
set angle(value: number) { this.uniforms.uOptions[1] = value - ANGLE_OFFSET; }
get angle(): number { return this.baseUniforms.uOptions[1] + ANGLE_OFFSET; }
set angle(value: number) { this.baseUniforms.uOptions[1] = value - ANGLE_OFFSET; }

/**
* The alpha value of the gradient (0-1)
* @default 1
*/
get alpha(): number { return this.uniforms.uOptions[2]; }
set alpha(value: number) { this.uniforms.uOptions[2] = value; }
get alpha(): number { return this.baseUniforms.uOptions[2]; }
set alpha(value: number) { this.baseUniforms.uOptions[2] = value; }

/**
* The maximum number of colors to render (0 = no limit)
* @default 0
*/
get maxColors(): number { return this.uniforms.uCounts[1]; }
set maxColors(value: number) { this.uniforms.uCounts[1] = value; }
get maxColors(): number { return this.baseUniforms.uCounts[1]; }
set maxColors(value: number) { this.baseUniforms.uCounts[1] = value; }

/**
* If true, the gradient will replace the existing color, otherwise it
* will be multiplied with it
* @default false
*/
get replace(): boolean { return this.uniforms.uOptions[3] > 0.5; }
set replace(value: boolean) { this.uniforms.uOptions[3] = value ? 1 : 0; }
get replace(): boolean { return this.baseUniforms.uOptions[3] > 0.5; }
set replace(value: boolean) { this.baseUniforms.uOptions[3] = value ? 1 : 0; }
}

30 changes: 17 additions & 13 deletions filters/color-gradient/src/color-gradient.wgsl
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
struct ColorGradientUniforms {
struct BaseUniforms {
uOptions: vec4<f32>,
uCounts: vec2<f32>,
};

struct StopsUniforms {
uColors: array<vec3<f32>, MAX_STOPS>,
uStops: array<vec4<f32>, MAX_STOPS>,
};
Expand All @@ -18,7 +21,8 @@ struct GlobalFilterUniforms {

@group(0) @binding(1) var uTexture: texture_2d<f32>;
@group(0) @binding(2) var uSampler: sampler;
@group(1) @binding(0) var<uniform> colorGradientUniforms : ColorGradientUniforms;
@group(1) @binding(0) var<uniform> baseUniforms : BaseUniforms;
@group(1) @binding(1) var<uniform> stopsUniforms : StopsUniforms;

struct VSOutput {
@builtin(position) position: vec4<f32>,
Expand Down Expand Up @@ -116,13 +120,13 @@ fn mainFragment(
@location(0) uv : vec2<f32>,
@location(1) coord : vec2<f32>
) -> @location(0) vec4<f32> {
let uType: i32 = i32(colorGradientUniforms.uOptions[0]);
let uAngle: f32 = colorGradientUniforms.uOptions[1];
let uAlpha: f32 = colorGradientUniforms.uOptions[2];
let uReplace: f32 = colorGradientUniforms.uOptions[3];
let uType: i32 = i32(baseUniforms.uOptions[0]);
let uAngle: f32 = baseUniforms.uOptions[1];
let uAlpha: f32 = baseUniforms.uOptions[2];
let uReplace: f32 = baseUniforms.uOptions[3];

let uNumStops: i32 = i32(colorGradientUniforms.uCounts[0]);
let uMaxColors: f32 = colorGradientUniforms.uCounts[1];
let uNumStops: i32 = i32(baseUniforms.uCounts[0]);
let uMaxColors: f32 = baseUniforms.uCounts[1];

// current/original color
var currentColor: vec4<f32> = textureSample(uTexture, uSampler, uv);
Expand All @@ -134,14 +138,14 @@ fn mainFragment(
var y: f32 = projectPosition(coord, uType, radians(uAngle));

// check gradient bounds
var offsetMin: f32 = colorGradientUniforms.uStops[0][0];
var offsetMin: f32 = stopsUniforms.uStops[0][0];
var offsetMax: f32 = 0.0;

let numStops: i32 = uNumStops;

for (var i: i32 = 0; i < MAX_STOPS; i = i + 1) {
if (i == numStops - 1) { // last index
offsetMax = colorGradientUniforms.uStops[i][0];
offsetMax = stopsUniforms.uStops[i][0];
}
}

Expand All @@ -159,9 +163,9 @@ fn mainFragment(
var stopTo: ColorStop;

for (var i: i32 = 0; i < MAX_STOPS; i = i + 1) {
if (y >= colorGradientUniforms.uStops[i][0]) {
stopFrom = ColorStop(colorGradientUniforms.uStops[i][0], colorGradientUniforms.uColors[i], colorGradientUniforms.uStops[i][1]);
stopTo = ColorStop(colorGradientUniforms.uStops[i + 1][0], colorGradientUniforms.uColors[i + 1], colorGradientUniforms.uStops[i + 1][1]);
if (y >= stopsUniforms.uStops[i][0]) {
stopFrom = ColorStop(stopsUniforms.uStops[i][0], stopsUniforms.uColors[i], stopsUniforms.uStops[i][1]);
stopTo = ColorStop(stopsUniforms.uStops[i + 1][0], stopsUniforms.uColors[i + 1], stopsUniforms.uStops[i + 1][1]);
}

if (i == numStops - 1) { // last index
Expand Down
25 changes: 17 additions & 8 deletions filters/color-overlay/src/ColorOverlayFilter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,12 @@ export class ColorOverlayFilter extends Filter
};

public uniforms: {
uColor: Color;
uColor: Float32Array;
uAlpha: number;
};

/**
* @param {number|Array<number>} [color=0x000000] - The resulting color, as a 3 component RGB e.g. [1.0, 0.5, 1.0]
* @param {number} [alpha=1] - The alpha value of the color
*/
private _color: Color;

constructor(options: ColorOverlayFilterOptions = {})
{
options = { ...ColorOverlayFilter.DEFAULT_OPTIONS, ...options };
Expand All @@ -70,22 +68,33 @@ export class ColorOverlayFilter extends Filter
glProgram,
resources: {
colorOverlayUniforms: new UniformGroup({
uColor: { value: new Color(options.color), type: 'vec3<f32>' },
uColor: { value: new Float32Array(3), type: 'vec3<f32>' },
uAlpha: { value: options.alpha, type: 'f32' },
})
},
});

this.uniforms = this.resources.colorOverlayUniforms.uniforms;

this._color = new Color();
this.color = options.color ?? 0x000000;
}

/**
* The over color source
* @member {number|Array<number>|Float32Array}
* @default 0x000000
*/
get color(): ColorSource { return this.uniforms.uColor.value as ColorSource; }
set color(value: ColorSource) { this.uniforms.uColor.setValue(value); }
get color(): ColorSource { return this._color.value as ColorSource; }
set color(value: ColorSource)
{
this._color.setValue(value);
const [r, g, b] = this._color.toArray();

this.uniforms.uColor[0] = r;
this.uniforms.uColor[1] = g;
this.uniforms.uColor[2] = b;
}

/**
* The alpha value of the color
Expand Down
Loading

0 comments on commit 579c2fd

Please sign in to comment.