Manual Post Processing demo: canvas ref doesn't contain renderer

[andretchen0]

The Manual Post Processing demo doesn't change when changing the various post-processing options.

---

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()
    })
  }
})

Source

... 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

[Tinoooo]

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 🙈.

[andretchen0]

Thanks. I'll fix the demo and open a PR.

[andretchen0]

The Manual Post Processing demo has been removed from the playground. Closing