artifacts when rendering both sides of a transparent object with three.js

by

Self-transparency is particularly difficult in WebGL and three.js. You just have to really understand the issues, and then adapt your code to achieve the effect you want.

You can achieve the look of a double-sided, transparent sphere in three.js, with a trick: You need to render two transparent spheres — one with material.side = THREE.BackSide, and one with material.side = THREE.FrontSide.

Using such methods is generally required if you want self-transparency without artifacts — especially if you allow the camera or object to move.

Here is a fiddle: http://jsfiddle.net/x5bm0qLf/

EDIT: Updated fiddle to three.js r.105

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. Transparent objects in Three.js
  6. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  7. Display wireframe and solid color
  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. How to convert the background color of image to match the color of Pygame window?
  17. THREE.js Ray Intersect fails by adding div
  18. How to make a surface with a transparent background in pygame
  19. Converting World coordinates to Screen coordinates in Three.js using Projection
  20. How to change the opacity (alpha, transparency) of an element in a canvas element?
  21. Three.js / WebGL – transparent planes hiding other planes behind them
  22. Rendering a transparent shell
  23. Transparency for Poly3DCollection plot in matplotlib
  24. Java: Filling a BufferedImage with transparent pixels
  25. three.js transparent object occlusion
  26. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  27. Three.js add an object to a group but keep global position/rotation/scale as it was
  28. How to CREATE a transparent gif (or png) with PIL (python-imaging)
  29. JavaFX 3D Transparency
  30. Three.js multiple materials on object loaded via OBJMTLLoader

Leave a Comment