THREE.js PointsMaterial纹理透明效果失效问题求助

一、transparent选项异常的解决办法 #

开启transparent: true后出现渲染异常，核心问题是**depthWrite: true会让透明点的深度信息写入缓冲区，导致后续的透明点被错误遮挡**。只需修改一个参数：

new THREE.PointsMaterial({
    color: 0xffffff,
    map: pointTexture,
    size: 5,
    vertexColors: true,
    sizeAttenuation: false,
    depthWrite: false, // 关键修改，关闭深度写入
    depthTest: true,
    transparent: true,
    opacity: 0.5,
});

如果调整后仍有渲染层级问题，可以尝试暂时关闭depthTest，但优先保证depthWrite: false是开启透明材质的基础配置。

二、点融合效果的实现（ShaderMaterial方案） #

要实现点之间柔和融合的效果，需要用自定义着色器配合加法混合，让重叠区域的颜色自然叠加：

1. 自定义着色器代码 #

顶点着色器

varying vec3 vColor;

void main() {
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
    gl_PointSize = 5.0; // 可根据需求调整，或保留sizeAttenuation逻辑
    gl_Position = projectionMatrix * mvPosition;
}

片元着色器

varying vec3 vColor;

void main() {
    // 计算点中心距离，生成圆形渐变透明度
    float dist = length(gl_PointCoord - vec2(0.5));
    float alpha = 1.0 - smoothstep(0.0, 0.5, dist);
    
    gl_FragColor = vec4(vColor, alpha);
}

2. 创建ShaderMaterial #

const blendMaterial = new THREE.ShaderMaterial({
    vertexShader: 上述顶点着色器代码,
    fragmentShader: 上述片元着色器代码,
    vertexColors: true,
    transparent: true,
    blending: THREE.AdditiveBlending, // 加法混合实现颜色叠加
    depthWrite: false,
    depthTest: true,
});

将这个材质赋给Points对象，就能得到点重叠处柔和融合的效果。如果想要更强烈的融合感，可以调整smoothstep的参数，或者用pow(alpha, 2.0)这类函数来强化透明度衰减曲线。

内容的提问来源于stack exchange，提问作者valentin sorlin