Manual Post Processing demo: canvas ref doesn't contain renderer
andretchen0 opened this issue · comments
The Manual Post Processing demo doesn't change when changing the various post-processing options.
![Screenshot 2023-09-20 at 01 10 01](https://private-user-images.githubusercontent.com/20469369/269115887-f9fb0fee-e6a7-45d8-afeb-4788da9b04b2.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzNTAwMTQsIm5iZiI6MTcyMzM0OTcxNCwicGF0aCI6Ii8yMDQ2OTM2OS8yNjkxMTU4ODctZjlmYjBmZWUtZTZhNy00NWQ4LWFmZWItNDc4OGRhOWIwNGIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODExVDA0MTUxNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRmNzU1MTU4YmVkOTllMjhhZTk2YTYwZmZlOGU0MzM4OTRlMmRkYmMyYWE3NDVhNTEzMjQ0OTE3NmZiZWQyZTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.v5zhhyBFcvhsDHHTmoq08w5BhaglAZLIPCg7taMmD2s)
Description
- Expected: When changing the post-processing dropdown here, the content of the canvas should show the post-processing effect.
- What happens: Nothing happens. The post-processing effect is not shown.
Diagnosis
The demo watches a ref called context
. It expects that the ref here <TresCanvas ref="content">
will have a renderer in its value, when its updated:
watchEffect(() => {
if (context.value) {
context.value.renderer.setSize(width.value, height.value)
context.value.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
effectComposer = new EffectComposer(context.value.renderer)
effectComposer.addPass(new RenderPass(context.value.scene, context.value.camera))
onLoop(() => {
effectComposer.render()
})
}
})
... but it doesn't. Here's the browser error message:
TypeError: a.value.renderer is undefined
Checking the Tres documentation for Renderer
, it doesn't appear that adding a ref on <TresCanvas />
is a documented way to access the renderer, so I didn't file an issue there.
System Info
Mac M1
Mac OS 13.1
Firefox 117.0.1
TresCanvas does not contain the renderer directly. You can get the renderer by using useTresContext like so:
const { renderer } = useTresContext()
The playground was probably not properly updated when we switched to the context provider pattern in core 🙈.
Thanks. I'll fix the demo and open a PR.
The Manual Post Processing demo has been removed from the playground. Closing