In immersive-ar, when I put CSS3DObject straight up in a row, it’s well augmented in order from a distance. But when I approach the first object, there’s a phenomenon where the second object seems to come out forward. That is, there seems to be a lack of sophistication about the depth of the z-axis. Is there a solution? If you need any information, I’ll give it to you.
are you mixing CSSRenderer with WebGL renderer?
Yes. I’m Mixing both to augment various objects.
ok. css/html objects will always layer on top of the threejs canvas. is this what you are talking about?
No, we are using both CSS3DRender and WEBGLRender for this project, but what I’m talking about is a problem between css/html objects. The two objects in the picture I showed you are also css/html objects.
For example, if I’m located at (0,0,0), and if I place the css/html objects at (0,0,-1), (0,0,-2), the objects are well aligned. But when I move to (0,0,-0.5), the second object seems to penetrate the first object and come forward. Further, the object rendered by WebGLender is well augmented without any distortion.
Here’s a video that shows that example. The background is dark, so it looks like a vr environment, but it’s an immersive-ar environment.
Yeah that sure looks like a depth sorting issue. I don’t recall if/what the depth sorting heuristic is in cssrenderer. I read somewhere that zIndex also doesn’t apply to css “transform:” ed objects. Don’t know if that still applies… All I can really suggest is separating the objects by a larger distance and seeing when/if the sorting issue goes away… or if you can determine what the depth sorting criterion is… centerpoint, furthest point, or nearest point… (it might be that that interacts with the clipping to the viewport too.) Tuning CSS3D renderer is a tricky process.
I took a look at the classic three.js examples demo… and I don’t see any addressing of depth sorting, so it might be something you have to live with, or work around by spacing.
And more generally… CSS transforms aren’t truly intended for 3d in the sense that a webGL scene is. It’s a mechanism for transforming css elements that happens to make it possible to implement a 3d projection pipeline, but granular properties like depth sorting, are not something that is built into the design of it.
1 Like