# Display sprites correctly with customized Points material?

**URL:** <https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555>\
**Category:** Questions\
**Tags:** points, materials, textures, shaders\
**Created:** [February 5, 2020, 8:57pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555 "2020-02-05T20:57:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![lxiangyun93](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lxiangyun93/32/8839_2.png) [@lxiangyun93](https://discourse.threejs.org/u/lxiangyun93)\
**Post date:** [February 5, 2020, 8:57pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/1 "2020-02-05T20:57:56Z")

</div>

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

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/e7964ce4733b611c1c16e47d21a1fa0a7556bcec.png)

The best I could do is

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/6ea3b49557695c1f273495c708c4923c86615377.jpeg)

As you can see, it’s good but not perfect, especially there are “edges” of the sprite. the sprite I used is here: ![ball](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/0/04abc61c0586b53c2282ff96a834d1ef43511fb4.png)

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!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 5, 2020, 9:44pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/2 "2020-02-05T21:44:53Z")

</div>

Hi!  
I used similar texture for points here  
https://codepen.io/prisoner849/embed/preview/OJPXvWX?height=300&slug-hash=OJPXvWX&default-tabs=js,result&host=https://codepen.io  
and here  
https://codepen.io/prisoner849/embed/preview/rNaMGJW?height=300&slug-hash=rNaMGJW&default-tabs=js,result&host=https://codepen.io

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

```auto
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
  }
);

```

---

<div class="post-metadata">

**Author:** ![lxiangyun93](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lxiangyun93/32/8839_2.png) [@lxiangyun93](https://discourse.threejs.org/u/lxiangyun93)\
**Post date:** [February 6, 2020, 3:31pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/3 "2020-02-06T15:31:22Z")

</div>

@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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a3551e80b29349de503d4f56dbf4135931e710b1.jpeg)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 6, 2020, 3:39pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/4 "2020-02-06T15:39:06Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![lxiangyun93](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lxiangyun93/32/8839_2.png) [@lxiangyun93](https://discourse.threejs.org/u/lxiangyun93)\
**Post date:** [February 6, 2020, 3:46pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/5 "2020-02-06T15:46:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 6, 2020, 3:49pm UTC](https://discourse.threejs.org/t/display-sprites-correctly-with-customized-points-material/12555/6 "2020-02-06T15:49:01Z")

</div>

@lxiangyun93 You’re welcome 🙂 🍻