How to show different Texture for PointMaterial

Questions
,
1

Hi,

I would like to visualize a point cloud.
I am using Three.Points with PointsMaterial.
Instead of showing points as rectangles, I would like to visualize them as circles, or some custom texture from png.
Is there an easy way to achieve this?

2

Yes, use the image as a texture in the map property of the material. If the image has transparent areas (e.g. if it is a circle), then also set the transparent proeprty.

The stars here are points with custom images:

https://codepen.io/boytchev/full/VwVXOPq

Another example:

https://codepen.io/boytchev/full/poOJjoK

1 Like
3

here’s an anti aleased round circle shader for THREE.Points

you can use it in vanilla, too: https://github.com/pmndrs/drei/blob/74355f8604e8bff256dc00dcd48e2e12f7fc1dfa/src/core/PointMaterial.tsx

const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment'

export class PointMaterialImpl extends THREE.PointsMaterial {
  constructor(props) {
    super(props)
    this.onBeforeCompile = (shader, renderer) => {
      const { isWebGL2 } = renderer.capabilities
      shader.fragmentShader = shader.fragmentShader.replace(
        `#include <${opaque_fragment}>`,
        `
        ${
          !isWebGL2
            ? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>`
            : `#include <${opaque_fragment}>`
        }
      vec2 cxy = 2.0 * gl_PointCoord - 1.0;
      float r = dot(cxy, cxy);
      float delta = fwidth(r);     
      float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
      gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
      #include <tonemapping_fragment>
      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
      `
      )
    }
  }
}
1 Like