点云纹理 alpha 混合 (THREEJS)答案

【问题标题】：Point cloud texture alpha blending (THREEJS)点云纹理 alpha 混合 (THREEJS)
【发布时间】：2020-04-11 01:12:35
【问题描述】：

我使用 ShaderMaterial 创建具有基于属性的大小和不透明度的点云。我还需要纹理贴图。问题是纹理是在没有透明度的情况下渲染的。看起来每个纹理像素颜色都以某种方式与背景颜色混合（在这种情况下为白色）；如何避免这种情况？

我使用 svg 纹理：

<div id="circle-texture" style="width: 0; height: 0; display: none">
    <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="16" cy="16" r="13" stroke="none" fill="white" fill-opacity="1" />        
    </svg>    
</div>

这是我的片段着色器：

<script type="x-shader/x-fragment" id="point-cloud-fragment-shader">

...  

uniform sampler2D texture;   

varying vec3 vColor;

varying float vOpacity;   

#include <clipping_planes_pars_fragment>

void main() {

    #include <clipping_planes_fragment>

    vec3 outgoingLight = vec3( 0.0 );

    vec4 diffuseColor = vec4( diffuse, vOpacity );  

    if (enableTexture) {            
        vec4 mapTexel = texture2D( texture, gl_PointCoord );            
        diffuseColor *= mapTexelToLinear( mapTexel );
    }

    diffuseColor.rgb *= vColor;

    outgoingLight = diffuseColor.rgb;
    gl_FragColor = vec4( outgoingLight, diffuseColor.a );
}

在以下情况下放弃修复：

if ( gl_FragColor.a < 0.001 ) discard;

但是不丢弃有可能吗？（使用自定义混合或其他方式）我玩过自定义混合，但到目前为止没有成功。

【问题讨论】：

在着色器中丢弃片段绝对是一种有效的方法，因为它与配置 Material.alphaTest 时 three.js 所做的相同。您能否将您的工作进度作为一个展示您的自定义混合的实时示例来展示？
@Mugen87 谢谢，但为什么丢弃条件有效（alpha 存在且很小），但我没有看到任何透明度（alpha 输出）没有丢弃？
您是否将着色器材质的transparent 属性设置为true？
@Mugen87 是的，当然
@SalientBrain 试试material.depthWrite = false 和points.renderOrder = 999;

标签： three.js shader textures fragment-shader blending

【解决方案1】：

在处理部分透明点云时有效的设置是在必要时转动transparent: true、depthTest: false 和blending mode。加法或乘法混合看起来不错，具体取决于您的用例，并且无需对精灵的深度进行排序，因为混合无需将颜色“放在”另一个颜色的“前面”：

const spriteMat = new THREE.ShaderMaterial({
    uniforms: {
        // List of uniforms
    },
    vertexShader: spriteVert,
    fragmentShader: spriteFrag,
    blending: THREE.AdditiveBlending,
    depthTest: false,
    transparent: true
});

转动transparent: true 尊重片段着色器中的 Alpha 通道，因此您不再需要丢弃像素。

【讨论】：