MY CURRENT PROJECT
My current project involves rendering circular points with varying vertex colors using a fragment shader. I am aiming for the points to behave like more performance-efficient spheres, especially when zoomed in for anti-aliasing.
ISSUE AT HAND
I have successfully achieved the desired effect in one direction as shown in the left photo, but the other direction displays white corners as seen in the right photo. How can I eliminate these white corners?
https://i.sstatic.net/PV8Kx.png https://i.sstatic.net/tLTjA.png
MY EFFORTS SO FAR
- Disabling depthTest worked for points of the same color, but since my points have varying colors, it created a visual glitch resembling a wormhole.
- I experimented with alphaTest without success. Although, I did manage to make alphaTest work with textures instead of a custom fragment shader (png image of a circle on a transparent background), but it became blurry when zoomed in.
- I observed that the corner colors matched the value passed into renderer.setClearColor.
- I've attempted different blending options, but my lack of familiarity with blending techniques has hindered my progress.
EXAMPLE CODE
const geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
const material = new THREE.ShaderMaterial({
transparent: true,
vertexColors: THREE.VertexColors,
uniforms: {
size: {value: 20},
scale: {value: 10},
},
defines: {
USE_MAP: "",
USE_SIZEATTENUATION: ""
},
vertexShader: THREE.ShaderLib.points.vertexShader,
fragmentShader: `
in vec3 vColor;
void main() {
vec2 xy = gl_PointCoord.xy - vec2(0.5);
float ll = length(xy);
gl_FragColor = vec4(vColor, step(ll, 0.5));
}
`
});
const points = new THREE.Points( geometry, material );
scene.add( points );
Your assistance is greatly appreciated!