Tresjs / tres

Declarative ThreeJS using Vue Components
https://tresjs.org
MIT License
2.23k stars 108 forks source link

Scene breaks when `cast-shadow` enabled and navigating back to a previously initialized scene #851

Open lnvglr opened 2 weeks ago

lnvglr commented 2 weeks ago

Describe the bug

I have a Nuxt 3 app and in it a page with a Tres.js scene. The scene contains <TresDirectionalLight cast-shadow /> which casts a shadow. When navigating away from the page with the scene and navigating back to the scene (using NuxtLink), I get the error below.

When I remove the cast-shadow prop, the bug disappears.

three.js?v=f17f74c8:17801 Uncaught TypeError: Cannot read properties of null (reading 'state')
    at setProgram (three.js?v=f17f74c8:17801:41)
    at WebGLRenderer.renderBufferDirect (three.js?v=f17f74c8:17292:23)
    at renderObject (three.js?v=f17f74c8:13624:21)
    at renderObject (three.js?v=f17f74c8:13631:7)
    at WebGLShadowMap.render (three.js?v=f17f74c8:13519:9)
    at WebGLRenderer.render (three.js?v=f17f74c8:17493:17)
    at tres.js:387:33
    at index.mjs:71:52
    at Array.map (<anonymous>)
    at Object.trigger (index.mjs:71:40)
complete error log ``` setProgram @ three.js?v=f17f74c8:17801 WebGLRenderer.renderBufferDirect @ three.js?v=f17f74c8:17292 renderObject @ three.js?v=f17f74c8:13624 renderObject @ three.js?v=f17f74c8:13631 WebGLShadowMap.render @ three.js?v=f17f74c8:13519 WebGLRenderer.render @ three.js?v=f17f74c8:17493 (anonymous) @ tres.js:387 (anonymous) @ index.mjs:71 trigger @ index.mjs:71 we.immediate @ tres.js:160 loop @ index.mjs:617 requestAnimationFrame resume @ index.mjs:624 or @ tres.js:388 cr @ tres.js:593 (anonymous) @ tres.js:1086 (anonymous) @ runtime-core.esm-bundler.js:2757 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 hook.__weh.hook.__weh @ runtime-core.esm-bundler.js:2737 flushPostFlushCbs @ runtime-core.esm-bundler.js:385 flushJobs @ runtime-core.esm-bundler.js:427 Promise.then queueFlush @ runtime-core.esm-bundler.js:322 queuePostFlushCb @ runtime-core.esm-bundler.js:336 queueEffectWithSuspense @ runtime-core.esm-bundler.js:7256 baseWatchOptions.scheduler @ runtime-core.esm-bundler.js:6138 effect2.scheduler @ reactivity.esm-bundler.js:1892 trigger @ reactivity.esm-bundler.js:250 endBatch @ reactivity.esm-bundler.js:308 notify @ reactivity.esm-bundler.js:594 trigger @ reactivity.esm-bundler.js:568 set value @ reactivity.esm-bundler.js:1510 finalizeNavigation @ vue-router.mjs:3478 (anonymous) @ vue-router.mjs:3343 Promise.then pushWithRedirect @ vue-router.mjs:3310 push @ vue-router.mjs:3235 navigate @ vue-router.mjs:2300 callWithErrorHandling @ runtime-core.esm-bundler.js:199 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:206 invoker @ runtime-dom.esm-bundler.js:722 ```

Reproduction

https://stackblitz.com/edit/nuxt-starter-w3neca?file=pages%2Findex.vue

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 79.77 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
    bun: 1.0.3 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.100
    Safari: 17.6
  npmPackages:
    @tresjs/cientos: ^4.0.3 => 4.0.2 
    @tresjs/core: ^4.2.10 => 4.2.10 
    @tresjs/nuxt: ^3.0.7 => 3.0.7

Used Package Manager

npm

Code of Conduct

lnvglr commented 1 week ago

I have managed to narrow it down more (and work around the issue this way).

On my <TresCanvas /> I had the preset="realistic" prop. I removed it and in an onMounted hook within the TresContext, I added all the props the realistic preset adds to the renderer except for shadows and physicallyCorrectLights.

Now, navigating away and back to the scene works and there is virtually no visual difference.

Note: I added the shadows prop to the <TresCanvas />.