Tresjs / tres

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

No more outlines since V4 #742

Open whitespacecode opened 1 week ago

whitespacecode commented 1 week ago

Describe the bug

Using the @pmndrs/vanilla package to create an Outline around the Mesh fails in V4

On V3.9 image On V4.x image

No console error's.. I used @hawk86104 example to create this and noticed the outline's break in V4

Reproduction

https://stackblitz.com/edit/tresjs-basic-9b2xts?file=src%2Fcomponents%2FTheExperience.vue

Steps to reproduce

Change the package.json so Tresjs uses V4 and the outline will be gone

System Info

/

Used Package Manager

npm

Code of Conduct

alvarosabu commented 1 week ago

Hi there @whitespacecode I'm really not familiar on that package so maybe @hawk86104 can support us here

alvarosabu commented 1 week ago

Or why not using Tresjs Postprocessing package directly https://post-processing.tresjs.org/guide/effects/outline.html ?

whitespacecode commented 1 week ago

Wait.. @alvarosabu There is a post-processing.tresjs!? I will look into that tomorrow. Thanks

hawk86104 commented 6 days ago

@alvarosabu @whitespacecode It's been a while since we last got in touch.🤓 Sorry, I have been busy recently with the ecosystem of Tress in China, mainly improving small functionalities across various industries: https://opensource.icegl.cn/

Regarding the version dependency of Tress, I have not upgraded to 4.x because the upgrade would cause many issues with the previous functionalities. I did a brief check and found quite a few problems, so I plan to wait until the 4.x version is more complete and stable before upgrading. As for the outline effect, we are using a shader-based method rather than post-processing.

whitespacecode commented 6 days ago

I noticed when i use the outlines package directly on the mesh everything works. It should normally extract the geometry from its parent and that's where it's failing suddenly. So i'm not sure what changed in V4 to the TresMesh

//This works fine on V4
const outlines = Outlines()
const mesh = new THREE.Mesh(geometry, material)
mesh.add(outlines.group)