Examples: Add webgpu_reflection_blurred
#31116
Conversation
📦 Bundle sizeFull ESM build, minified and gzipped.
🌳 Bundle size after tree-shakingMinimal build including a renderer, camera, empty scene, and dependencies.
|
| const roughness = uniform( .9 ); | ||
| const radius = uniform( 0.2 ); | ||
|
|
||
| const reflection = reflector( { resolution: 1, depth: true, bounces: false } ); // 0.5 is half of the rendering view |
There was a problem hiding this comment.
The example looks awesome!
The only thing I would suggest to change is the default resolution of the reflector. On my macMini M2 Pro, the current example runs around 30 FPS. Using the half resolution for the reflection, the frame rate is back to 60 FPS. Since the reflections are blurred, you barely see a difference in quality anyway (mostly at the plane with the uv texture).
There was a problem hiding this comment.
If we set resolution to 0.5 on a non-retina screen the reflection becomes pixelated:
Instead of 0.5 maybe something like 1 / devicePixelRatio would work better?
|
Feels like there are some premultiply related issues in the blurred edges. The inverted image makes it easier to see:
|
I'm not sure I understand, it's intentional that the blur expands beyond the edges. |
|
Congratulations and thank you so much for this. It is super awesome 🎉! |
There's a black glow happening in the blur.
Setting
So it seems to be something related to premultiply compositing. For comparison, I tried creating a similar scene in https://threejs.org/editor/ and used the realistic/pathtracer to render it:
|
* fix clear texture and facing away if `bounce` is `false`
* add `premult`, `unpremult`
* cleanup
* add `hashBlur` options { mask, premultipliedAlpha }
* add docs and cleanup
* add `webgpu_reflection_blurred` example
* update webgpu_reflection_blurred
* update webgpu_reflection_blurred
* Update webgpu_reflection_blurred.html
* fix clear texture and facing away if `bounce` is `false`
* add `premult`, `unpremult`
* cleanup
* add `hashBlur` options { mask, premultipliedAlpha }
* add docs and cleanup
* add `webgpu_reflection_blurred` example
* update webgpu_reflection_blurred
* update webgpu_reflection_blurred
* Update webgpu_reflection_blurred.html
Related issue: #31110, #31114, #31115
Description
Live example
Add
webgpu_reflection_blurredexample.