Three.js,自定义着色器和具有透明度的png纹理

Question

我有一个非常简单的PNG纹理:一个带有透明背景的灰色圆圈.

我使用它作为一个统一map的THREE.ShaderMaterial:

var uniforms = THREE.UniformsUtils.merge( [basicShader.uniforms] );
uniforms['map'].value = THREE.ImageUtils.loadTexture( "img/particle.png" );
uniforms['size'].value = 100;
uniforms['opacity'].value = 0.5;
uniforms['psColor'].value = new THREE.Color( 0xffffff );

这是我的片段着色器(只是其中的一部分):

gl_FragColor = vec4( psColor, vOpacity );
gl_FragColor = gl_FragColor * texture2D( map,vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y ) );
gl_FragColor = gl_FragColor * vec4( vColor, 1.0 );

我将材料应用于某些粒子(THREE.PointCloud网格)并且效果很好:

但如果我将相机旋转超过180度,我会看到:

我知道片段着色器没有正确考虑PNG纹理的alpha值.

在这种情况下,最好的方法是什么,以获得正确的颜色和不透明度(来自自定义属性)并仍然从PNG获得alpha权限？

为什么一方面表现正常？

Answer 1

必须从后到前渲染透明对象 - 从最远到最近.这是因为深度缓冲区.

但是PointCloud粒子不是根据与相机的距离来分类的.那效率太低了.无论摄像机位置如何,粒子始终以相同的顺序渲染.

你有几个解决方法.

第一种是丢弃alpha低的片段.你可以使用这样的模式:

if ( textureColor.a < 0.5 ) discard;

另一个选项是设置material.depthTest = false或material.depthWrite = false.您可能不喜欢副作用,但是,如果场景中有其他对象.

three.js r.71