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

Moving bloomPass's pyramids off of mipmaps fixes its appearance in Firefox Nightly

Browse Source
This commit is contained in:
Rezmason
2021-12-06 07:34:04 -08:00
parent 9896e2da84
commit 577e94c7d1
4 changed files with 71 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
TODO.txt
View File

@@ -1,8 +1,6 @@
TODO:
WebGPU
FF Nightly
Bloom pass isn't working right
Try https://github.com/brendan-duncan/wgsl_reflect
Get rid of end pass once it's possible to copy a bgra8unorm to a canvas texture
Switch to rgba32float somehow?

41
js/webgpu/bloomPass.js
View File

@@ -1,5 +1,30 @@
import { structs } from "../../lib/gpu-buffer.js";
import { makeComputeTarget, makePyramidView, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
import { makeComputeTarget, loadShader, makeUniformBuffer, makeBindGroup, makePass } from "./utils.js";
// const makePyramid = makeComputeTarget;
// const destroyPyramid = (pyramid) => pyramid?.destroy();
// const makePyramidLevelView = (pyramid, level) =>
// pyramid.createView({
// baseMipLevel: level,
// mipLevelCount: 1,
// dimension: "2d",
// });
// const makePyramidViews = (pyramid) => [pyramid.createView()];
const makePyramid = (device, size, pyramidHeight) =>
Array(pyramidHeight).fill().map((_, index) => makeComputeTarget(
device,
size.map(x => Math.floor(x * 2 ** -(index + 1)))
));
const destroyPyramid = (pyramid) => pyramid?.forEach(texture => texture.destroy());
const makePyramidLevelView = (pyramid, level) => pyramid[level].createView();
const makePyramidViews = (pyramid) => pyramid.map(tex => tex.createView());
// The bloom pass is basically an added blur of the rain pass's high-pass output.
// The blur approximation is the sum of a pyramid of downscaled, blurred textures.
@@ -71,11 +96,11 @@ export default ({ config, device }) => {
// Since the bloom is blurry, we downscale everything
scaledScreenSize = screenSize.map((x) => Math.floor(x * bloomSize));
hBlurPyramid?.destroy();
hBlurPyramid = makeComputeTarget(device, scaledScreenSize, pyramidHeight);
destroyPyramid(hBlurPyramid);
hBlurPyramid = makePyramid(device, scaledScreenSize, pyramidHeight);
vBlurPyramid?.destroy();
vBlurPyramid = makeComputeTarget(device, scaledScreenSize, pyramidHeight);
destroyPyramid(vBlurPyramid);
vBlurPyramid = makePyramid(device, scaledScreenSize, pyramidHeight);
output?.destroy();
output = makeComputeTarget(device, scaledScreenSize);
@@ -87,14 +112,14 @@ export default ({ config, device }) => {
// The subsequent levels of the pyramid are the preceding level blurred.
let srcView = inputs.highPass.createView();
for (let i = 0; i < pyramidHeight; i++) {
const hBlurPyramidView = makePyramidView(hBlurPyramid, i);
const vBlurPyramidView = makePyramidView(vBlurPyramid, i);
const hBlurPyramidView = makePyramidLevelView(hBlurPyramid, i);
const vBlurPyramidView = makePyramidLevelView(vBlurPyramid, i);
hBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [hBlurBuffer, linearSampler, srcView, hBlurPyramidView]);
vBlurBindGroups[i] = makeBindGroup(device, blurPipeline, 0, [vBlurBuffer, linearSampler, hBlurPyramidView, vBlurPyramidView]);
srcView = hBlurPyramidView;
}
combineBindGroup = makeBindGroup(device, combinePipeline, 0, [combineBuffer, linearSampler, vBlurPyramid.createView(), output.createView()]);
combineBindGroup = makeBindGroup(device, combinePipeline, 0, [combineBuffer, linearSampler, ...makePyramidViews(vBlurPyramid), output.createView()]);
return {
...inputs,

8
js/webgpu/utils.js
View File

@@ -98,13 +98,6 @@ const make1DTexture = (device, rgbas) => {
return texture;
};
const makePyramidView = (texture, level) =>
texture.createView({
baseMipLevel: level,
mipLevelCount: 1,
dimension: "2d",
});
const makeBindGroup = (device, pipeline, index, entries) =>
device.createBindGroup({
layout: pipeline.getBindGroupLayout(index),
@@ -129,7 +122,6 @@ export {
makeRenderTarget,
makeComputeTarget,
make1DTexture,
makePyramidView,
loadTexture,
loadShader,
makeUniformBuffer,

42
shaders/wgsl/bloomCombine.wgsl
View File

@@ -5,8 +5,16 @@
[[group(0), binding(0)]] var<uniform> config : Config;
[[group(0), binding(1)]] var linearSampler : sampler;
[[group(0), binding(2)]] var tex : texture_2d<f32>;
[[group(0), binding(3)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
// Currently mipmap textures aren't working as expected in Firefox Nightly
// [[group(0), binding(2)]] var tex : texture_2d<f32>;
// [[group(0), binding(3)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
[[group(0), binding(2)]] var tex1 : texture_2d<f32>;
[[group(0), binding(3)]] var tex2 : texture_2d<f32>;
[[group(0), binding(4)]] var tex3 : texture_2d<f32>;
[[group(0), binding(5)]] var tex4 : texture_2d<f32>;
[[group(0), binding(6)]] var outputTex : texture_storage_2d<rgba8unorm, write>;
struct ComputeInput {
[[builtin(global_invocation_id)]] id : vec3<u32>;
@@ -23,10 +31,36 @@ struct ComputeInput {
var uv = (vec2<f32>(coord) + 0.5) / vec2<f32>(outputSize);
var sum = vec4<f32>(0.0);
for (var i = 0.0; i < config.pyramidHeight; i = i + 1.0) {
// for (var i = 0.0; i < config.pyramidHeight; i = i + 1.0) {
// var weight = (1.0 - i / config.pyramidHeight);
// weight = pow(weight + 0.5, 1.0 / 3.0);
// sum = sum + textureSampleLevel( tex, linearSampler, uv, i + 1.0 ) * weight;
// }
{
var i = 0.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum = sum + textureSampleLevel( tex, linearSampler, uv, i + 1.0 ) * weight;
sum = sum + textureSampleLevel( tex1, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 1.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum = sum + textureSampleLevel( tex2, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 2.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum = sum + textureSampleLevel( tex3, linearSampler, uv, i + 1.0 ) * weight;
}
{
var i = 3.0;
var weight = (1.0 - i / config.pyramidHeight);
weight = pow(weight + 0.5, 1.0 / 3.0);
sum = sum + textureSampleLevel( tex4, linearSampler, uv, i + 1.0 ) * weight;
}
textureStore(outputTex, coord, sum * config.bloomStrength);