1

I have scene() and meshes:

scene:

scene.add(layer1)
layer.add(layer2)
layer2.add(layer3)

Wanted result is:

layer1 covered by layer2 and covered by layer3.

It works fine, but when i go far away with camera, there start to be loss precision problem and looks like this: (layers are not correctly rendered one to another)

enter image description here

i tried to solve by materials, 

layer2.material.depthTest = 0;
layer3.material.depthTest = 0;

works fine, but there is problem with another object between camera and layers. enter image description here

Do exist best practice for solution?

Martin
  • 2,575
  • 6
  • 32
  • 53
  • See http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475 – WestLangley Apr 01 '15 at 16:09
  • Thank you, i understand that topic solving issue about ordering object and covering one behind another. But this is not what I'm solving. I have correct order of layers. Problem is when i zoom out (move far form layers) with camera, always starts a problem with partial covering (image1). As i understand it is caused by loss precision in webgl on bigger distances, the mathematics is not so accurate. I need to have clouds forced before the parent object, but not before the other object like another planets,or like image2. Did i understand correctly? or there is solution not recognized by my? – Martin Apr 01 '15 at 16:30
  • What parameters are you passing to your camera constructor? Are your clouds and earth at the same render depth? – WestLangley Apr 01 '15 at 17:57
  • camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 0.01,1000000); renderDepth is not set r71, renderer.sortObjects = 0; – Martin Apr 01 '15 at 18:19
  • 2
    Read https://www.opengl.org/wiki/Depth_Buffer_Precision and try increasing your near plane value to the largest value you can. – WestLangley Apr 01 '15 at 21:04
  • If i change near and far to 1,10000, problem still exists, but i need to see far than 10000. I know precision problem, and don't trying to solve this. I'm finding the way how to push one object before another object by force, but not on the top of the whole scene (depthtest), only on his parent. Like in CSS
    layer one
    layer two
    layer three
    solving the problem.     – Martin Apr 02 '15 at 07:54
  • Can you provide a link to a simple, 50-line, live example that demonstrates the problem? -- not your entire project. – WestLangley Apr 02 '15 at 13:03
  • (on load zoom out camera!) http://jsfiddle.net/QHssJ/16/ with tepthTest : 0 this i want on planet, but not affect on all neighborhood object (redball, floor). http://jsfiddle.net/QHssJ/17/ this is what i have, but i need to avoid partial covering. atmosphere must be always before the planet. not other objects. – Martin Apr 02 '15 at 15:00
  • Set the near plane to 100 and increase the scale of the clouds. – WestLangley Apr 02 '15 at 18:32
  • That will not solve the problem, in each time there will be a limited distance where the issue will be visible: http://jsfiddle.net/QHssJ/18/ – Martin Apr 05 '15 at 07:37
  • Do exist somethng like z-index in css? Will prioritize an element only in child elements? planet layer - child layer - child layer - child layer (move this layer always visible on top, only in layer planet) – Martin Apr 05 '15 at 07:39
  • @WestLangley thank you for assistance, I assume i cant solve it by easy way, i create another scene and another camera, it is complicated, but works like a charm. – Martin Apr 05 '15 at 11:18

0 Answers0