When drawing two geometries next to each other and having them rotate, a common issue arises. The first drawn geometry obstructs the second one where transparency should be applied uniformly. Both objects should exhibit the same level of transparency regardless of their drawing order. To address this, blending is enabled while depth testing is disabled. Here are images displaying the problem:
Both geometries consist of point clouds using THREE.ShaderMaterial with the following setup:
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
blending: THREE.NormalBlending,
depthTest: false,
transparent: true
});
where
// attributes
attributes = {
size: { type: 'f', value: null },
alpha: { type: 'f', value: [] },
customColor: { type: 'c', value: null }
};
// uniforms
uniforms = {
color: { type: "c", value: new THREE.Color(0x00ff00) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("../textures/sprites/circle.png") }
};
and
<script type="x-shader/x-vertex" id="vertexshader">
attribute float alpha;
attribute float size;
attribute vec3 customColor;
varying float vAlpha;
varying vec3 vColor;
void main() {
vAlpha = alpha;
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 120.0 / length( mvPosition.xyz ));
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying float vAlpha;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( vColor, vAlpha );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>