diff --git a/TODO.txt b/TODO.txt index 2705730..8c590dd 100644 --- a/TODO.txt +++ b/TODO.txt @@ -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? diff --git a/js/webgpu/bloomPass.js b/js/webgpu/bloomPass.js index 6fef65b..0b3a86b 100644 --- a/js/webgpu/bloomPass.js +++ b/js/webgpu/bloomPass.js @@ -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, diff --git a/js/webgpu/utils.js b/js/webgpu/utils.js index 2fc4810..a5a4469 100644 --- a/js/webgpu/utils.js +++ b/js/webgpu/utils.js @@ -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, diff --git a/shaders/wgsl/bloomCombine.wgsl b/shaders/wgsl/bloomCombine.wgsl index f83347d..689511c 100644 --- a/shaders/wgsl/bloomCombine.wgsl +++ b/shaders/wgsl/bloomCombine.wgsl @@ -5,8 +5,16 @@ [[group(0), binding(0)]] var config : Config; [[group(0), binding(1)]] var linearSampler : sampler; -[[group(0), binding(2)]] var tex : texture_2d; -[[group(0), binding(3)]] var outputTex : texture_storage_2d; + +// Currently mipmap textures aren't working as expected in Firefox Nightly +// [[group(0), binding(2)]] var tex : texture_2d; +// [[group(0), binding(3)]] var outputTex : texture_storage_2d; + +[[group(0), binding(2)]] var tex1 : texture_2d; +[[group(0), binding(3)]] var tex2 : texture_2d; +[[group(0), binding(4)]] var tex3 : texture_2d; +[[group(0), binding(5)]] var tex4 : texture_2d; +[[group(0), binding(6)]] var outputTex : texture_storage_2d; struct ComputeInput { [[builtin(global_invocation_id)]] id : vec3; @@ -23,10 +31,36 @@ struct ComputeInput { var uv = (vec2(coord) + 0.5) / vec2(outputSize); var sum = vec4(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);