CODEWITHSUNDEEP
javascriptthree.jstexturestransparency
Ricardo Marques
Ricardo Marques

Reputation: 75

Three js transparency issue with PointClouds and textures

I have two PointCloud objects, each for a specific structure and texture. One should be clickable but not the other. Let's call them P1 and P2, respectively.

P1 is initialized using a THREE.ShaderMaterial as:

var p1Material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent: true
});

P2 in it's turn is using a THREE.PointCloudMaterial as:

var p2Material = THREE.PointCloudMaterial({
    size : SIZE,
    map : THREE.ImageUtils.loadTexture("icons/myAwesomeIcon.png"),
    sizeAttenuation : true,
    transparent: true
});

Both resulting THREE.PointCloud objects have their sortParticles property set to true.

However, I'm running into transparency issues such as the following:

(REMOVED - LOOK AT EDIT)

Everything is a texture, except for the white line. The Sphere texture is used in P2, and the other textures in P1.

We can see that P2's textures are not really transparent against P1's. But they are, against each other, as seen on the second image. Inversly, the same is happening on between P1's textures. However, here's a different example, in the same scene:

(REMOVED - LOOK AT EDIT)

Some of P1's textures are ok, but P2's don't want to behave properly.

I suspect having the textures reside in different PointClouds is not helping. Yet, since the P2's elements shouldn't be clickable, for performance reasons I decided to separate them from the lot, and thus having P1 and P2. Note that selectability is done by clicking on something and using a THREE.Raycaster.

Any ideas on what I'm doing wrong guys?

Thanks in advance!

EDIT: Apparently the problem seems to be due to using BufferGeometry...

Here are two JSFiddle sources that are exactly the same, except for the used geometry.

http://jsfiddle.net/vf6uu90t/3/

http://jsfiddle.net/2uh0q8Lr/2/

Am I missing something?

I had to remove the links from before, because stackoverflow only allows me to insert two links... --'

Upvotes: 1

Views: 999

Answers (1)

Ricardo Marques
Ricardo Marques

Reputation: 75

Here's the ThreeJs github issue, and a possible solution.

https://github.com/mrdoob/three.js/issues/5668

The trick was alphaTesting. In any case, there seems to be a bug related to this is r69.

Upvotes: 2

Related Questions