How to animate the Precipitation component when using "disableRender" on the TresCanvas

GustavoGomez092 commented 1 year ago

Describe the bug

Hi! TLDR; I was wondering if there is a way to make the Precipitation component animate after using disableRender on the main TresCanvas.

Whole story: I currently playing with custom shaders and wanted to try them inside Tres, I created a function that extracts the context of the TresCanvas component from a ref to create the RenderPass:

  // render pass
  const renderPass = new RenderPass(
    tresCanvas.value.context.scene.value,
    tresCanvas.value.context.camera.value
  )

  // Distortion pass
  distortPass.value = new ShaderPass(LensDistortionShader)
  distortPass.value.material.defines.CHROMA_SAMPLES = 10

  // compopser
  composer.value = new EffectComposer(tresCanvas.value.context.renderer.value)
  composer.value.setSize(window.innerWidth, window.innerHeight)
  composer.value.setPixelRatio(window.devicePixelRatio * 1.3)

  // output pass
  const outputPass = new OutputPass()

  // add the passes
  composer.value.addPass(renderPass)
  composer.value.addPass(distortPass.value)
  composer.value.addPass(outputPass)
}

The thing here is that for me to apply the RenderPass to the TresCanvas we need to disable the default renderer, which means that the Precipitation component from cientos no longer animates, I'm no master at three.js, but if you can guide me on where to thinker, I might be able to sort this. If you have any ideas or advice on how to make this run I am all ears! Other than that, I'm loving Tres.js and its companion libraries (Cientos, Leches and Post Processing)!

Let me know if you need more context or info!

Cheers!

Reproduction

https://stackblitz.com/edit/tresjs-basic-5sm94z

Steps to reproduce

Described above and clear on the stackblitz example

System Info

Using Stackblitz

Used Package Manager

npm

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] The provided reproduction is a minimal reproducible example of the bug.

stackblitz[bot] commented 1 year ago

Start a new pull request in StackBlitz Codeflow.

tresjs-basic-5sm94z (Open reproduction)

andretchen0 commented 1 year ago

Hello!

Edit: Precipitation isn't working in the stackblitz even if all other components are removed.

Cientos/Tres/etc. use pnpm, so that's what I'll use here.

Leaving everything else in place, in your Stackblitz:

stop the server with ctrl+c
run pnpm i
(wait)
run pnpm run dev
reload the in-window "browser"

Here's the resulting Stackblitz with working Precipitation.

Original answer

You don't need to access the renderer directly if you're using [Tresjs/post-processing](https://github.com/Tresjs/post-processing). Here's a [short-ish component from the playground with a post-processing step](https://github.com/Tresjs/playground/blob/main/components/content/nuxt-stones/index.vue) that shows how this can be done. Barring that, you *can* do post-processing via the renderer directly, like in your linked example, but [you should use `useTresContext()` in a subcomponent of the TresCanvas](https://tresjs.org/api/composables.html#usetrescontext) to access the renderer. (Here's [a recent discussion where that approach was suggested by Tino.](https://github.com/Tresjs/playground/pull/69#issuecomment-1729829552)) He's on the core team and working on post-processing. ---- You might have better luck getting answers over on the Discord as this is more of a post-processing question, it seems, rather than a Cientos question: https://discord.com/invite/three-js-685241246557667386 But I'll see if anyone on the Discord wants to chime in over here or make corrections to what I wrote.

Other than that, I'm loving Tres.js and its companion libraries (Cientos, Leches and Post Processing)!

😉

GustavoGomez092 commented 1 year ago

Thank you for the references! I'll surely sign up for the discord!

Tresjs / cientos