In my current setup, I have the following key pieces of code:
Renderer
renderer = new THREE.WebGLRenderer({
antialias: true, alpha: true, canvas: canvas
});
Textures
dot: THREE.ImageUtils.loadTexture('./assets/images/dot.png')
Material
let material = new THREE.PointsMaterial({
size: size,
sizeAttenuation: true,
color: color,
map: textures.dot,
// alphaMap: textures.dotAlpha,
blending: THREE.NormalBlending, // THREE.MultiplyBlending
transparent: true,
alphaTest: 0.1,
opacity: 0.3
});
Point cloud Typically, there are 20 to 50 point clouds with anywhere from 1k to 10k dots each. However, only a fraction of these dots are visible on the screen.
pointCloud = new THREE.Points(geometry, material);
Adding points
cfg.pointCloud.forEach(point => {
var vertex = new THREE.Vector3();
vertex.x = point.x;
vertex.y = point.y;
vertex.z = point.z;
geometry.vertices.push(vertex);
});
I am facing some challenges:
- Overlapping sprites just clip each other instead of rendering on top, causing many points to be obscured.
- Setting
material.alphaTest = 0.5andmaterial.opacity:0.1results in sharp edges for the sprites, losing any anti-aliasing effect. At a distance, they render poorly and often disappear completely. - As the camera moves away from the origin, sprites start disappearing after a certain distance.
- Dots tend to disappear when using low opacity values.
How can I enhance this rendering? Is there an alternative approach to sprites that I should consider? Without the expertise in custom shader writing, I would greatly appreciate any suggestions for improving this rendering.
Below are sample images illustrating the issues faced:
- The blue dots, despite being denser in the green zone, are often obscured. This could be due to the rendering order of different colored dots introduced in the scene.
https://i.sstatic.net/nBQ0e.png
- Tilting the camera sometimes reveals hidden dots due to depth indexing changes.
https://i.sstatic.net/LO95O.png
- Increasing the opacity of certain point clouds may cause them to be obscured by lower-opacity sprites, rather than producing a blending effect as expected.
https://i.sstatic.net/mAgPh.jpg
- Clustering of most dots leads to many disappearing due to rendering quirks.
https://i.sstatic.net/xNU1k.png
- Close-up views exhibit clipping effects between overlapping sprites.
https://i.sstatic.net/gJSQT.png