Display sprites correctly with customized Points material?

Questions
, , ,
1

Update: I created a live example here if you guys could take a look: https://jsfiddle.net/r5ymunhs/

Hi all!, I was trying to mimic actual sphere geometries (below) with point cloud of ball sprite

image
image865×751 333 KB

The best I could do is

image
image866×793 318 KB

As you can see, it’s good but not perfect, especially there are “edges” of the sprite. the sprite I used is here:ball

I guess it’s kind of a dilemma here, where I want the edges to be completely transparent, but the “ball” to be non-transparent at all.

The material I used is

var pointCloudMaterialInstanced = new THREE.RawShaderMaterial( {

        uniforms:       uniforms,

        vertexShader:   `
            precision highp float;
            uniform mat4 modelViewMatrix;
            uniform mat4 projectionMatrix;

            attribute vec3 position;
            attribute float size;
            attribute vec3 customColor;
            attribute vec3 offset;
            attribute float alpha;
            varying float vAlpha;
            varying vec3 vColor;
            void main() {
            vColor = customColor;
            vAlpha = alpha;
            vec3 newPosition = position + offset;
            vec4 mvPosition = modelViewMatrix * vec4( newPosition, 1.0 );
            gl_PointSize = size * ( 300.0 / -mvPosition.z );
            gl_Position = projectionMatrix * mvPosition;

            }`,

        fragmentShader: `

            precision highp float;
            uniform vec3 color;
            uniform sampler2D texture;
            varying vec3 vColor;
            varying float vAlpha;

            void main() {
                gl_FragColor = vec4( color * vColor, vAlpha );
                gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
            }`,
        depthTest:      true,
        transparent:    true,
        alphaTest: 0.5,
        blending: THREE.NormalBlending,
        // depthTest: false,
        /// transparent: true
    });

As you can see, it’s a customized material for instancing pointcloud.
I vaguely knows that I need to play with depthTest, blending, or alpha test, but haven’t been able to figure out the correct solution here yet. could you guys help me? Thanks a lot!

2

Hi!
I used similar texture for points here

and here

The only thing that matters is alphaTest: 0.5 in materials.

var pointsTornadoMat = new THREE.PointsMaterial(
  {
  vertexColors: THREE.VertexColors, 
    size: 0.2, 
    map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/ball.png", tex => {
      tex.center.setScalar(0.5);
      tex.rotation = -Math.PI * 0.5;
    }), 
    alphaTest: 0.5
  }
);
3 Likes
3

@prisoner849 Thanks for your help! but simply setting alphaTest to 0.5 didn’t do the trick for me unfortunately… here is the result I got:

image
image761×767 392 KB

4

It’s because you’ve got a custom shader material, whereas I modify an existing one (thus I add just the functionality I need and keep the rest parts of the shader intact).

In your case, you can make the fragment shader like so:

void main() {
  vec4 texColor = texture2D( texture, gl_PointCoord );
  if (texColor.a < 0.5) discard;
  gl_FragColor = vec4( color * vColor, vAlpha ) * texColor;
}
1 Like
5

Wow, it worked like a charm! Thanks a lot!

6

@lxiangyun93 You’re welcome :slight_smile: :beers: