Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(shadertools): Port more shader modules to WGSL #2264

Merged
merged 3 commits into from
Sep 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@ struct brightnessContrastUniforms {
};

// Binding 0:1 is reserved for shader passes
@binding(1) @group(0) var<uniform> brightnessContrast : brightnessContrastUniforms;
@group(0) @binding(1) var<uniform> brightnessContrast : brightnessContrastUniforms;

fn brightnessContrast_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4<f32> {
fn brightnessContrast_filterColor_ext(color: vec4f, texSize: vec2<f32>, texCoords: vec2<f32>) -> vec4f {
color.rgb += brightnessContrast.brightness;
if (brightnessContrast.contrast > 0.0) {
color.rgb = (color.rgb - 0.5) / (1.0 - brightnessContrast.contrast) + 0.5;
} else {
color.rgb = (color.rgb - 0.5) * (1.0 + brightnessContrast.contrast) + 0.5;
}
return vec4<f32>(1.0, 0.0, 0.0, 1.0);
return vec4f(1.0, 0.0, 0.0, 1.0);
}
`;

Expand Down Expand Up @@ -59,9 +59,11 @@ export type BrightnessContrastUniforms = BrightnessContrastProps;
* @param contrast -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
*/
export const brightnessContrast = {
props: {} as BrightnessContrastProps,

name: 'brightnessContrast',
source,
fs,

props: {} as BrightnessContrastProps,
uniformTypes: {
brightness: 'f32',
contrast: 'f32'
Expand All @@ -74,8 +76,6 @@ export const brightnessContrast = {
brightness: {format: 'f32', value: 0, min: -1, max: 1},
contrast: {format: 'f32', value: 0, min: -1, max: 1}
},
passes: [{filter: true}],

source,
fs
passes: [{filter: true}]
} as const satisfies ShaderPass<BrightnessContrastProps>;
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,14 @@ import type {ShaderPass} from '@luma.gl/shadertools';
// Do a 9x9 bilateral box filter
const source = /* wgsl */ `\

@group(?), @binding(?) var<uniform> denoiseUniforms { strength: f32 } noise;
struct denoiseUniforms {
strength: f32
};

@group(0), @binding(1) var<uniform> denoise: denoiseUniforms;

fn denoise_sampleColor(source: sampler2D, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
let adjustedExponent: f32 = 3. + 200. * pow(1. - noise.strength, 4.);
let adjustedExponent: f32 = 3. + 200. * pow(1. - denoise.strength, 4.);
let center: vec4<f32> = sample_texture(BUFFER_source, texCoord);
var color: vec4<f32> = vec4<f32>(0.);
var total: f32 = 0.;
Expand All @@ -32,11 +36,11 @@ fn denoise_sampleColor(source: sampler2D, texSize: vec2<f32>, texCoord: vec2<f32
`;

const fs = /* glsl */ `\
uniform denoiseUniforms {
uniform dedenoiseUniforms {
float strength;
} noise;
} denoise;

vec4 denoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
vec4 dedenoise_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
float adjustedExponent = 3. + 200. * pow(1. - noise.strength, 4.);

vec4 center = texture(source, texCoord);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@
import type {ShaderPass} from '@luma.gl/shadertools';

const source = /* wgsl */ `\
@group(?), @binding(?)
var<uniform> hueSaturationUniforms { hue: f32,

saturation: f32,
struct hueSaturationUniforms {
hue: f32,
saturation: f32,
};

}hueSaturation;
@group(0), @binding(1) var<uniform> hueSaturation: hueSaturationUniforms;

fn hueSaturation_filterColor(color: vec4<f32>) -> vec4<f32> {
let angle: f32 = hueSaturation.hue * 3.1415927;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ struct noiseUniforms {
amount: f32
};

@group(0), @binding(0) var<uniform> noise: NoiseUniforms;
@group(0) @binding(1) var<uniform> noise: noiseUniforms;

fn rand(co: vec2<f32>) -> f32 {
return fract(sin(dot(co.xy, vec2<f32>(12.9898, 78.233))) * 43758.547);
fn rand(co: vec2f) -> f32 {
return fract(sin(dot(co.xy, vec2f(12.9898, 78.233))) * 43758.547);
}

fn noise_filterColor_ext(color: vec4<f32>, texSize: vec2<f32>, texCoord: vec2<f32>) -> vec4<f32> {
fn noise_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) -> vec4f {
let diff: f32 = (rand(texCoord) - 0.5) * noise.amount;
color.r = color.r + (diff);
color.g = color.g + (diff);
Expand Down Expand Up @@ -57,17 +57,18 @@ export type NoiseUniforms = NoiseProps;
* Adds black and white noise to the image.
*/
export const noise = {
name: 'noise',
fs,
source,

props: {} as NoiseProps,
uniforms: {} as NoiseUniforms,

name: 'noise',
uniformTypes: {
amount: 'f32'
},
propTypes: {
amount: {value: 0.5, min: 0, max: 1}
},
fs,
source,

passes: [{filter: true}]
} as const satisfies ShaderPass<NoiseProps, NoiseProps>;
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,31 @@

import type {ShaderPass} from '@luma.gl/shadertools';

const source = /* wgsl */ `\
struct sepiaUniforms {
amount: f32
};

@group(0) @binding(1) var<uniform> sepia: sepiaUniforms;

fn sepia_filterColor(color: vec4f) -> vec4f {
let r: f32 = color.r;
let g: f32 = color.g;
let b: f32 = color.b;

color.r =
min(1.0, (r * (1.0 - (0.607 * sepia.amount))) + (g * (0.769 * sepia.amount)) + (b * (0.189 * sepia.amount)));
color.g = min(1.0, (r * 0.349 * sepia.amount) + (g * (1.0 - (0.314 * sepia.amount))) + (b * 0.168 * sepia.amount));
color.b = min(1.0, (r * 0.272 * sepia.amount) + (g * 0.534 * sepia.amount) + (b * (1.0 - (0.869 * sepia.amount))));

return color;
}

vec4 sepia_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
return sepia_filterColor(color);
}
`;

const fs = /* glsl */ `\
uniform sepiaUniforms {
float amount;
Expand Down Expand Up @@ -50,5 +75,6 @@ export const sepia = {
amount: {value: 0.5, min: 0, max: 1}
},
fs,
source,
passes: [{filter: true}]
} as const satisfies ShaderPass<SepiaProps, SepiaProps>;
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,26 @@

import type {ShaderPass} from '@luma.gl/shadertools';

const source = /* wgsl */ `\
struct vibranceUniforms {
amount: f32
};

@group(0) @binding(1) var<uniform> vibrance: vibranceUniforms;

fn vibrance_filterColor(vec4f color) -> vec4f {
let average: f32 = (color.r + color.g + color.b) / 3.0;
let mx: f32 = max(color.r, max(color.g, color.b));
let amt: f32 = (mx - average) * (-vibrance.amount * 3.0);
color.rgb = mix(color.rgb, vec3(mx), amt);
return color;
}

vec4 vibrance_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
return vibrance_filterColor(color);
}
`;

const fs = /* glsl */ `\
uniform vibranceUniforms {
float amount;
Expand Down Expand Up @@ -43,6 +63,7 @@ export const vibrance = {
propTypes: {
amount: {value: 0, min: -1, max: 1}
},
source,
fs,
passes: [{filter: true}]
} as const satisfies ShaderPass<VibranceProps, VibranceProps>;
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,26 @@

import type {ShaderPass} from '@luma.gl/shadertools';

const fs = /* glsl */ `\
uniform vignetteUniforms {
float radius;
float amount;
} vignette;

vec4 vignette_filterColor_ext(vec4 color, vec2 texSize, vec2 texCoord) {
float dist = distance(texCoord, vec2(0.5, 0.5));
float ratio = smoothstep(0.8, vignette.radius * 0.799, dist * (vignette.amount + vignette.radius));
return color.rgba * ratio + (1.0 - ratio)*vec4(0.0, 0.0, 0.0, 1.0);
const fs = /* wgsl */ `\
struct vignetteUniforms {
radius: f32,
amount: f32
};

@group(0) @binding(1) var<uniform> vignette: vignetteUniforms;

fn vibrance_filterColor(color: vec4f) -> vec4f {
let average: f32 = (color.r + color.g + color.b) / 3.0;
let mx: f32 = max(color.r, max(color.g, color.b));
let amt: f32 = (mx - average) * (-vibrance.amount * 3.0);
color.rgb = mix(color.rgb, vec3f(mx), amt);
return color;
}

fn vignette_filterColor_ext(color: vec4f, texSize: vec2f, texCoord: vec2f) ->vec4f {
let dist: f32 = distance(texCoord, vec2f(0.5, 0.5));
let ratio: f32 = smoothstep(0.8, vignette.radius * 0.799, dist * (vignette.amount + vignette.radius));
return color.rgba * ratio + (1.0 - ratio)*vec4f(0.0, 0.0, 0.0, 1.0);
}
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,54 @@
import type {ShaderPass} from '@luma.gl/shadertools';
import {random} from '@luma.gl/shadertools';

const source = /* wgsl */ `\
uniform tiltShiftUniforms {
blurRadius: f32,
gradientRadius: f32,
start: vec2f,
end: vec2f,
invert: u32,
};

@group(0) @binding(1) var<uniform> tiltShift: tiltShiftUniforms;

fn tiltShift_getDelta(vec2 texSize) -> vec2f {
vec2 vector = normalize((tiltShift.end - tiltShift.start) * texSize);
return tiltShift.invert ? vec2(-vector.y, vector.x) : vector;
}

fn tiltShift_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) -> vec4f {
vec4 color = vec4(0.0);
float total = 0.0;

/* randomize the lookup values to hide the fixed number of samples */
float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);

vec2 normal = normalize(vec2((tiltShift.start.y - tiltShift.end.y) * texSize.y, (tiltShift.end.x - tiltShift.start.x) * texSize.x));
float radius = smoothstep(0.0, 1.0,
abs(dot(texCoord * texSize - tiltShift.start * texSize, normal)) / tiltShift.gradientRadius) * tiltShift.blurRadius;

for (float t = -30.0; t <= 30.0; t++) {
float percent = (t + offset - 0.5) / 30.0;
float weight = 1.0 - abs(percent);
vec4 offsetColor = texture(source, texCoord + tiltShift_getDelta(texSize) / texSize * percent * radius);

/* switch to pre-multiplied alpha to correctly blur transparent images */
offsetColor.rgb *= offsetColor.a;

color += offsetColor * weight;
total += weight;
}

color = color / total;

/* switch back from pre-multiplied alpha */
color.rgb /= color.a + 0.00001;

return color;
}
`;

const fs = /* glsl */ `\
uniform tiltShiftUniforms {
float blurRadius;
Expand Down Expand Up @@ -82,11 +130,13 @@ export type TiltShiftUniforms = TiltShiftProps;
* on the line and increases further from the line.
*/
export const tiltShift = {
props: {} as TiltShiftProps,
uniforms: {} as TiltShiftUniforms,

name: 'tiltShift',
dependencies: [random],
source,
fs,

props: {} as TiltShiftProps,
uniforms: {} as TiltShiftUniforms,
uniformTypes: {
blurRadius: 'f32',
gradientRadius: 'f32',
Expand All @@ -101,11 +151,11 @@ export const tiltShift = {
end: {value: [1, 1]},
invert: {value: 0, private: true}
},

passes: [
{sampler: true, uniforms: {invert: 0}},
{sampler: true, uniforms: {invert: 1}}
],
fs
]
} as const satisfies ShaderPass<TiltShiftProps, TiltShiftProps>;

/*
Expand Down
Loading
Loading