Hi there,
Been visiting this place many times getting a lot of questions answered. However this time I would need to create a topic myself 
In the application I’m working we are using threejs as a 2D engine (unfortuate, I know). This is done by using an orthographic camera with only panning and zooming available with static entities.
Visually the application is pure 2D and hence I would need to get the rendering to work like that as well. In short I would need to have a specific render order of groups despite the children’s distance to the camera. Basically like you expect a 2D engine/layers to work.
My first initial idea was to have multiple render passes, one for each “layer”. However I cannot create separate scenes at this time due to heavy complexity.
After a lot of research and trying out I think the best way to do this is by assigning renderOrder to the groups I want to sort and have all materials instanced with depthTest: false.
My questions are therefore:
- Would you consider this to be the “best” possible solution?
- If so, is it possible to set
depthTest: false on a global level instead of doing it on every material instance? (as we have a lot of them)
I’ve been digging around the source code with no success.
Looking forward to solve this quirky thing 
Thanks in advance
Best regards
It should not be necessary to work with Material.depthWrite in this case. If you correctly define the render order for your shapes, the renderer will honor this order and render the shapes on top of each other.
In this context a feature was added some while ago that should make it easier to render shapes consisting of many single sprites. It’s similar to how Unity’s Sorting Groups work. Defining a renderOrder on an instance of Group will ensure that all descendants objects are sorted and rendered together. I’ve used this approach in an app some time ago.
Check out the following fiddle to see this feature in action: https://jsfiddle.net/r5szbft7/
Try to remove the group settings to see what’s happens without it^^.
Hi,
Thanks for you reply fast reply.
I have been looking into your example which looks promising. However I noticed that if the position of Z is less the ordering will no longer work (try to put group2 Z to -0.1).
Is this a known limitation? Unfortunately my scenario requires the ordering to work no matter the Z values of the entities 
Thanks in advance
I though you said your application would be pure 2D? Why do you have different z coordinates then?
In any event, disabling depth testing should solve this issue: Edit fiddle - JSFiddle - Code Playground
Well, visually yes 
The application started out being 3D. This was later too complex to handle so instead of replacing threejs with a 2D engine the scene and camera were constructed to simulate 2D. Therefore there are elements with different Z-values. However due to the orthographic camera this doesn’t have any effect except for rendering order.
I will investigate what’s most straight forward - adding depthCheck: false to all materials or reposition everything to Z 0 (I hope the latter).
If the former option, is it possible to put this on a global level? Such as ask the renderer to treat all materials as having depthCheck: false or fiddle with something else to get the same result? If there’s no current way to do so, would that be desirable or maybe it’s not in the vision and scope of threejs?
Thanks again
No, this has to be configured on material level. And I don’t think this kind of WebGL state configuration should be configured globally. The respective use case is too specific (and a bit unusual TBH^^).
Yeah I figured haha.
I’ll try to see which approach would be the least cumbersome for us. I’ll return once it’s implemented to comment on how it works if that is of interest.
Thanks for your time!
1 Like