materialThree.js点加法混合模式破坏颜色，有没有更好的办法？

Question

我正在尝试将地图添加到点 material，该点在 Three.js 中具有彩色纹理。我已经尝试使用加法混合和贴图属性来获得圆点而不是方形点，但它会破坏纹理的颜色并将其与点的白色混合。我想知道是否有更好的方法将两者混合，这样我既可以保持粒子形状，又可以保持纹理的颜色？

这是 particle.png

let pointShape = new THREE.TextureLoader().load("./models/particle.png");
   
    m = new THREE.PointsMaterial({
      
      size: pointSize,
      map: pointShape,
      blending: THREE.AdditiveBlending,
      depthTest: false,
      opacity: 0.9,
      onBeforeCompile: shader => {
        shader.uniforms.tex = {value: new THREE.TextureLoader().load("./textures/earthlores.jpg")};
        shader.vertexShader = `
          varying vec2 vUv;
          ${shader.vertexShader}
        `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
            vUv = uv;
          `
        );
        //console.log(shader.vertexShader);
        shader.fragmentShader = `
          uniform sampler2D tex;
          varying vec2 vUv;
          ${shader.fragmentShader}
        `.replace(
          `vec4 diffuseColor = vec4( diffuse, opacity );`,
          `
          vec3 col = texture2D(tex, vUv).rgb;
          col *= diffuse;
          vec4 diffuseColor = vec4( col, opacity );`
        );
        //console.log(shader.fragmentShader);
      }
    });

这是将纹理和粒子应用到点 material 的代码。

此代码的结果是这个褪色的、没有颜色的地球仪。

注释掉加法混合会得到正确的颜色，但不是正确的点形状。

我是否必须使用自定义混合来编辑我的混合模式、更改着色器或者是否有其他我完全缺少的方法？我尝试了其他混合模式，但它们似乎不起作用，我也不确定如何正确使用自定义混合，所以请像白痴一样向我解释，哈哈，我很想学习.

感谢任何帮助，谢谢！

Answer 1

好的，事实证明我已经找到了使用自定义混合的解决方案。使用添加方程式和 alpha 因子作为 source/destination（线性插值），将两者相加，但没有将目标颜色添加到源颜色。这使用提供的纹理创建了可爱的圆点。

 m = new THREE.PointsMaterial({
      
      size: pointSize,
      map: pointShape,
      blending: THREE.CustomBlending,
      blendEquation: THREE.AddEquation,
      blendSrc: THREE.SrcAlphaFactor,
      blendDst:THREE.OneMinusSrcAlphaFactor,
      depthTest: false
      });

美味圆点：

materialThree.js点加法混合模式破坏颜色，有没有更好的办法？

Additive blending mode destroying colour in point material Three.js, is there a better way?

javascript

blending

particles

point-clouds

three.js