Transparent objects in Three.js

by

Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all.

Transparency in WebGL is tricky. You can google the issue to find out more about it.

But you have stumbled upon an issue related to how three.js in particular handles transparency.

The WebGLRenderer in three.js sorts objects based upon their distance from the camera, and renders transparent objects in order from farthest to closest. (This is an important point: It sorts objects based on their position, and renders objects in the sorted order.)

So for two transparent objects to render correctly, the object that is in back — the smaller sphere in your case — must be rendered first. Otherwise, it will not be rendered at all, due to the depth buffer.

But in your case, you have two spheres that are in the same location, and hence are equidistant from the camera. That is the problem — which one to render first; it is a toss-up.

So you need to place the smaller sphere further away from the camera than the larger sphere in order for the scene to render correctly.

One solution is to move the smaller sphere back a little.

Another solution is to set renderer.sortObjects = false. Then the objects will render in the order they are added to the scene. In that case, be sure to add the smaller sphere to the scene first.

A third solution is to set material1.depthWrite = false and material2.depthWrite = false.

EDIT:

Renderable objects having material.transparent = false (opaque objects) are rendered before objects having material.transparent = true (transparent objects).

So a fourth solution is to make the smaller sphere opaque so it is rendered first.

New feature for r.71:

There is now an Object3D.renderOrder property. Within each class of object (opaque or transparent), objects are rendered in the order specified by object.renderOrder. The default value of renderOrder is 0. Note that renderOrder is not inherited by child objects; you must set it for each renderable object.

Objects with the same renderOrder (ties), are sorted by depth, as described above.

So a fifth solution is to set renderOrder = 1 for the larger sphere. This is likely the best solution in your case.

three.js r.71

More Related Contents:

  1. How to change the zOrder of object with Threejs?
  2. Transparent objects in Threejs
  3. Mouse / Canvas X, Y to Three.js World X, Y, Z
  4. How does the calculation of the light model work in a shader program?
  5. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  6. Display wireframe and solid color
  7. artifacts when rendering both sides of a transparent object with three.js
  8. THREE.JS: Get object size with respect to camera and object position on screen
  9. three.js – Adjusting opacity of individual particles
  10. three.js – how do I rotate a cylinder around a specific point?
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. “Cross origin requests are only supported for HTTP.” error when loading a local file
  17. Three.js – Orthographic camera
  18. Three.js camera tilt up or down and keep horizon level
  19. How to rotate a 3D object on axis three.js?
  20. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  21. Thickness of lines using THREE.LineBasicMaterial
  22. threejs how to rotate around object’s own center,instead of world center
  23. Using textures in THREE.js
  24. How to stop a requestAnimationFrame recursion/loop?
  25. Any way to get a bounding box from a three.js Object3D?
  26. How to detect collision in three.js?
  27. Convert 2:1 equirectangular panorama to cube map
  28. Detect clicked object in THREE.js
  29. How to render clipped surfaces as solid objects
  30. Three.js multiple materials on object loaded via OBJMTLLoader

Leave a Comment