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

Question

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

我将其用作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 );

我将该 Material 应用于一些粒子(THREE.PointCloud 网格)，效果非常好:

但是如果我将相机旋转超过 180 度，我会看到以下内容:

据我了解，片段着色器未正确考虑 PNG 纹理的 alpha 值。

在这种情况下，获得正确的颜色和不透明度(来自自定义属性)并仍然从 PNG 中获得正确的 Alpha 的最佳方法是什么？

为什么它在一侧表现正确？

Answer 1

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

但是PointCloud粒子不会根据距相机的距离进行排序。那效率就太低了。无论相机位置如何，粒子始终以相同的顺序渲染。

您有多种解决方法。

第一个是丢弃 alpha 较低的片段。您可以使用如下模式:

if ( textureColor.a < 0.5 ) discard;

另一个选项是设置 material.depthTest = false 或 material.depthWrite = false。 但是，如果您还有其他对象，您可能不喜欢这些副作用。现场。

三.js r.71