Z-Index or renderOrder doesn't works with a custom shader

Questions
, ,
1

Hi !

I want to force the z-index of my 3D elements to display the Object3D in my file background.js at the deepest part of my scene so the gradient.js is the nearest and the overflow.js displayed just before background.js. My repository is localized here : keley-on-mars/site/web/app/themes/KeleyOnMars/resources/assets/scripts/src/webgl at main · MrGlox/keley-on-mars · GitHub

I’m lacking of informations after tried many solutions like in this fiddle: http://jsfiddle.net/adt1d5b7/ or this stack overflow post: three.js - How to change the zOrder of object with Threejs? - Stack Overflow.

I think the problem come from my custom shader and I don’t know how to push some uniforms to clear the depth test. If my github is too complicated to handle, I can make a live example.

Thanks in advance !
Regards, Morgan

2

Best solution is to shift the z a bit.
Second would be the use of polygonOffset.
test_1.html (2.2 KB)

3

Yes it’s a plane, I tried to put it a little far away but still stay cut by the gradient… polygonOffset I’ll give it a try !

4

You can see them in action. test_1.html

5

I’ll keep looking for it, but doesn’t seems to work.

6

Sorry, I do not follow.
This is the screen capture of test_1.html

Untitled
Untitled1920×1080 18.8 KB