CODEWITHSUNDEEP
three.js
modicular
modicular

Reputation: 13

Three.js self transparency with intersecting polygons

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?

Upvotes: 1

Views: 1219

Answers (1)

WestLangley
WestLangley

Reputation: 104783

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

Upvotes: 1

Related Questions