1

I'm trying to make a simple tree billboard of two crossed planes with a partially transparent texture. The self-transparency only works for one plane, I'm assuming because of depth-sorting problems when geometry intersects.

See here: https://jsfiddle.net/2q5a7fzy/21/

The geometry is fairly simple: 

geometry.vertices.push(
    new THREE.Vector3( -1, -1, 0 ),
    new THREE.Vector3( -1,  1, 0 ),
    new THREE.Vector3(  1,  1, 0 ),
    new THREE.Vector3(  1, -1, 0 ),

    new THREE.Vector3( 0, -1, -1 ),
    new THREE.Vector3( 0,  1, -1 ),
    new THREE.Vector3( 0,  1,  1 ),
    new THREE.Vector3( 0, -1,  1 ) );

geometry.faces.push(
    new THREE.Face3( 0, 1, 2 ),
    new THREE.Face3( 0, 2, 3 ),

    new THREE.Face3( 4, 5, 6 ),
    new THREE.Face3( 4, 6, 7 ) );

I don't want to use the PointCloud billboards because I'd like the trees to be upright even when the camera is above them, rather than always camera-facing.

Anyone have a possible workaround? Can I sort the individual polygons before rendering, somehow? Are there other ways to do billboards that rotate on a fixed axis?

modicular
  • 13
  • 4
  • For those like myself that aren't quite familiar with what you mean by a "billboard" in this scenario can you describe or link to something that clarifies what you mean? (in your fiddle I see a "sphere" of faces in white, and 2 rectangular faces perpendicular to each other in a T shape in black. which faces are not working the way you want?) – scunliffe Jul 30 '15 at 23:42
  • Sure! By billboard I just mean a 2D image/polygon that can stand-in for 3D geometry at a distance. So a textured plane instead of a full tree mesh. In three.js, they're camera-facing polygons (http://threejs.org/examples/webgl_particles_billboards.html). If you look at the fiddle, the right side of the tree is cut off by the "transparent" bits of the other plane. You can see the sphere through where the image of the tree should be. The sphere's there to demonstrate that transparency is working correctly on the other objects in the scene, it's just the self-transparency that isn't working. – modicular Jul 30 '15 at 23:55
  • Oops. Deleted my comment just as you replied. Posted an answer you can accept. – WestLangley Jul 31 '15 at 00:28

1 Answers1

1

If you have overlapping, textured objects with transparent regions, then one solution to artifacts caused by depth sorting is to set the alphaTest property of the object's material:

material.alphaTest = 0.5; // between 0 and 1

updated fiddle: https://jsfiddle.net/c5qbd8rm/

three.js r.71

WestLangley
  • 102,557
  • 10
  • 276
  • 276