As I work on creating a scene with a variety of objects, I drew inspiration from a CodePen example by gnauhca (https://codepen.io/gnauhca/pen/VzJXGG). In the example, DepthTest is disabled on the ShaderMaterial, but I actually need it to be enabled in order to render objects in front of the particle wave. However, upon enabling DepthTest, I encountered a strange effect where only the left side of the material appeared to render with AdditiveBlending, while the right side seemed to lose blending/transparency. Furthermore, the effect varied when tilting the camera at different angles. You can see an example of the issue in this jsfiddle: https://jsfiddle.net/hnmftqjp/ and also in a gif showcasing the problem: https://i.sstatic.net/0pSgi.jpg
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: waveVertexShader,
fragmentShader: waveFragmentShader,
blending: THREE.AdditiveBlending,
depthTest: true,
transparent: true
});
I would greatly appreciate any assistance with this issue!