eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-14 04:19:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Moving bloom strength math to the combine steps, and fixing a redundant multiply issue in the REGL based renderer

Browse Source
This commit is contained in:
Rezmason
2022-10-04 21:53:53 -07:00
parent 507f907096
commit 3843dd90d1
17 changed files with 28 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
TODO.txt
View File

@@ -1,18 +1,6 @@
TODO:
Bloom comparison: WebGPU vs REGL
Why are they different?
Create a project that tests them side-by-side
That's right, two canvases, one regl and one webgpu
program them both to do the same basic ops in a floating point texture
display that texture
Retrieve the texture from the GPU and spit it out
Possible causes of difference
Color space
Intermediate texture formats around high pass filter
Floating point math
Texture interpolation
Blur implementation
Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently
Audio system
Toggle (or number representing frequency)

2
js/regl/imagePass.js
View File

@@ -7,13 +7,11 @@ const defaultBGURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
const bloomStrength = config.bloomStrength;
const background = loadImage(regl, bgURL);
const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl");
const render = regl({
frag: regl.prop("frag"),
uniforms: {
bloomStrength,
backgroundTex: background.texture,
tex: inputs.primary,
bloomTex: inputs.bloom,

3
js/regl/palettePass.js
View File

@@ -57,7 +57,7 @@ const makePalette = (regl, entries) => {
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const paletteTex = makePalette(regl, config.palette);
const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;
const { backgroundColor, cursorColor, glintColor, ditherMagnitude } = config;
const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
@@ -69,7 +69,6 @@ export default ({ regl, config }, inputs) => {
cursorColor: colorToRGB(cursorColor),
glintColor: colorToRGB(glintColor),
ditherMagnitude,
bloomStrength,
tex: inputs.primary,
bloomTex: inputs.bloom,
paletteTex,

3
js/regl/stripePass.js
View File

@@ -30,7 +30,7 @@ const prideStripeColors = [
export default ({ regl, config }, inputs) => {
const output = makePassFBO(regl, config.useHalfFloat);
const { backgroundColor, cursorColor, glintColor, ditherMagnitude, bloomStrength } = config;
const { backgroundColor, cursorColor, glintColor, ditherMagnitude } = config;
// Expand and convert stripe colors into 1D texture data
const stripeColors = "stripeColors" in config ? config.stripeColors : config.effect === "pride" ? prideStripeColors : transPrideStripeColors;
@@ -49,7 +49,6 @@ export default ({ regl, config }, inputs) => {
cursorColor: colorToRGB(cursorColor),
glintColor: colorToRGB(glintColor),
ditherMagnitude,
bloomStrength,
tex: inputs.primary,
bloomTex: inputs.bloom,
stripeTex,

4
js/webgpu/bloomPass.js
View File

@@ -20,7 +20,7 @@ const makePyramid = (device, size, pyramidHeight) =>
.map((_, index) =>
makeComputeTarget(
device,
size.map((x) => Math.floor(x * 2 ** -(index + 1)))
size.map((x) => Math.floor(x * 2 ** -index))
)
);
@@ -97,7 +97,7 @@ export default ({ config, device }) => {
vBlurBuffer = makeUniformBuffer(device, blurUniforms, { bloomRadius, direction: [0, 1] });
const combineUniforms = structs.from(combineShader.code).Config;
combineBuffer = makeUniformBuffer(device, combineUniforms, { pyramidHeight });
combineBuffer = makeUniformBuffer(device, combineUniforms, { pyramidHeight, bloomStrength });
})();
const build = (screenSize, inputs) => {

2
js/webgpu/imagePass.js
View File

@@ -35,7 +35,7 @@ export default ({ config, device }) => {
});
const configUniforms = structs.from(imageShader.code).Config;
configBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength: config.bloomStrength });
configBuffer = makeUniformBuffer(device, configUniforms, { unused: 0 });
})();
const build = (size, inputs) => {

2
js/webgpu/mirrorPass.js
View File

@@ -50,7 +50,7 @@ export default ({ config, device, cameraTex, cameraAspectRatio, timeBuffer }) =>
const mirrorShaderUniforms = structs.from(mirrorShader.code);
const configUniforms = mirrorShaderUniforms.Config;
configBuffer = makeUniformBuffer(device, configUniforms, { bloomStrength: config.bloomStrength });
configBuffer = makeUniformBuffer(device, configUniforms, { unused: 0 });
sceneUniforms = mirrorShaderUniforms.Scene;
sceneBuffer = makeUniformBuffer(device, sceneUniforms);

1
js/webgpu/palettePass.js
View File

@@ -96,7 +96,6 @@ export default ({ config, device, timeBuffer }) => {
const paletteShaderUniforms = structs.from(paletteShader.code);
const configUniforms = paletteShaderUniforms.Config;
configBuffer = makeUniformBuffer(device, configUniforms, {
bloomStrength: config.bloomStrength,
ditherMagnitude: config.ditherMagnitude,
backgroundColor: colorToRGB(config.backgroundColor),
cursorColor: colorToRGB(config.cursorColor),

1
js/webgpu/stripePass.js
View File

@@ -71,7 +71,6 @@ export default ({ config, device, timeBuffer }) => {
const configUniforms = structs.from(stripeShader.code).Config;
configBuffer = makeUniformBuffer(device, configUniforms, {
bloomStrength: config.bloomStrength,
ditherMagnitude: config.ditherMagnitude,
backgroundColor: colorToRGB(config.backgroundColor),
cursorColor: colorToRGB(config.cursorColor),

5
shaders/glsl/imagePass.frag.glsl
View File

@@ -2,13 +2,12 @@ precision mediump float;
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform sampler2D backgroundTex;
uniform float bloomStrength;
varying vec2 vUV;
vec4 getBrightness(vec2 uv) {
vec4 primary = texture2D(tex, uv);
vec4 bloom = texture2D(bloomTex, uv) * bloomStrength;
return min((primary + bloom) * (2.0 - bloomStrength), 1.0);
vec4 bloom = texture2D(bloomTex, uv);
return primary + bloom;
}
void main() {

5
shaders/glsl/palettePass.frag.glsl
View File

@@ -4,7 +4,6 @@ precision mediump float;
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform sampler2D paletteTex;
uniform float bloomStrength;
uniform float ditherMagnitude;
uniform float time;
uniform vec3 backgroundColor, cursorColor, glintColor;
@@ -18,8 +17,8 @@ highp float rand( const in vec2 uv, const in float t ) {
vec4 getBrightness(vec2 uv) {
vec4 primary = texture2D(tex, uv);
vec4 bloom = texture2D(bloomTex, uv) * bloomStrength;
return min((primary + bloom) * (2.0 - bloomStrength), 1.0);
vec4 bloom = texture2D(bloomTex, uv);
return primary + bloom;
}
void main() {

5
shaders/glsl/stripePass.frag.glsl
View File

@@ -3,7 +3,6 @@ precision mediump float;
uniform sampler2D tex;
uniform sampler2D bloomTex;
uniform float bloomStrength;
uniform sampler2D stripeTex;
uniform float ditherMagnitude;
uniform float time;
@@ -18,8 +17,8 @@ highp float rand( const in vec2 uv, const in float t ) {
vec4 getBrightness(vec2 uv) {
vec4 primary = texture2D(tex, uv);
vec4 bloom = texture2D(bloomTex, uv) * bloomStrength;
return min((primary + bloom) * (2.0 - bloomStrength), 1.0);
vec4 bloom = texture2D(bloomTex, uv);
return primary + bloom;
}
void main() {

3
shaders/wgsl/bloomCombine.wgsl
View File

@@ -1,5 +1,6 @@
struct Config {
pyramidHeight : f32,
bloomStrength : f32
};
@group(0) @binding(0) var<uniform> config : Config;
@@ -62,5 +63,5 @@ struct ComputeInput {
sum += textureSampleLevel( tex4, linearSampler, uv, i + 1.0 ) * weight;
}
textureStore(outputTex, coord, sum);
textureStore(outputTex, coord, sum * config.bloomStrength);
}

8
shaders/wgsl/imagePass.wgsl
View File

@@ -1,5 +1,5 @@
struct Config {
bloomStrength : f32,
unused : f32,
};
@group(0) @binding(0) var<uniform> config : Config;
@@ -15,12 +15,14 @@ struct ComputeInput {
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0) * config.bloomStrength;
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var unused = config.unused;
// Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy);
var screenSize = textureDimensions(tex);

6
shaders/wgsl/mirrorPass.wgsl
View File

@@ -1,5 +1,5 @@
struct Config {
bloomStrength : f32,
unused : f32,
};
struct Time {
@@ -33,13 +33,15 @@ struct ComputeInput {
fn getBrightness(uv : vec2<f32>, intensity : f32) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0) * config.bloomStrength;
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary * (1.0 + intensity * 0.3) + bloom * 0.5;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {
var unused = config.unused;
// Resolve the invocation ID to a texel coordinate
var coord = vec2<i32>(input.id.xy);
var screenSize = textureDimensions(tex);

5
shaders/wgsl/palettePass.wgsl
View File

@@ -1,5 +1,4 @@
struct Config {
bloomStrength : f32,
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>,
@@ -40,8 +39,8 @@ fn randomFloat( uv : vec2<f32> ) -> f32 {
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0) * config.bloomStrength;
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {

5
shaders/wgsl/stripePass.wgsl
View File

@@ -1,5 +1,4 @@
struct Config {
bloomStrength : f32,
ditherMagnitude : f32,
backgroundColor : vec3<f32>,
cursorColor : vec3<f32>,
@@ -36,8 +35,8 @@ fn randomFloat( uv : vec2<f32> ) -> f32 {
fn getBrightness(uv : vec2<f32>) -> vec4<f32> {
var primary = textureSampleLevel(tex, linearSampler, uv, 0.0);
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0) * config.bloomStrength;
return min((primary + bloom) * (2.0 - config.bloomStrength), vec4<f32>(1.0));
var bloom = textureSampleLevel(bloomTex, linearSampler, uv, 0.0);
return primary + bloom;
}
@compute @workgroup_size(32, 1, 1) fn computeMain(input : ComputeInput) {