在 THREE.js 中混合多个片段着色器以获得一个 THREE.ShaderMaterial

Question

我有一个关于在 THREE.js 中混合多个片段着色器的问题这里我给出了一个混合一个着色器和不同参数的代码，但是我也需要混合不同的着色器。

我的着色器：

uniform vec3 color;
  varying vec2 vUv;
  void main() {
    gl_FragColor = vec4(color,vUv.y);

  }

然后我定义制服和materials:

var uniforms1 = {
    "color" : {
        type : "c",
        value : new THREE.Color(0x00ff00)
    },
};
var uniforms2 = {
    "color" : {
        type : "c",
        value : new THREE.Color(0xff0000)
    },
};

var material1 = new THREE.ShaderMaterial({
    uniforms: uniforms1,
    vertexShader: vShader,
    fragmentShader: fShader,
    transparent: true
});
var material2 = new THREE.ShaderMaterial({
    uniforms: uniforms2,
    vertexShader: vShader,
    fragmentShader: fShader,
    transparent: true
});

至此一切正常。但是后来我想覆盖它们并以一种奇怪的方式创建两个对象：

var geometry = new THREE.CircleGeometry(50, 50);
mesh1 = new THREE.Mesh(geometry, material1);
mesh2 = new THREE.Mesh(geometry, material2);
mesh1.rotation.z = -0.25 * Math.PI;
mesh2.rotation.z = 0.25 * Math.PI;

因此我得到了我需要的结果，但我明白，为每个着色器创建单独的网格不是一个好主意。此外，如果我的对象不是对称的，我就会遇到麻烦。 是否可以混合着色器并获得一个 material?

Answer 1

您可以使用 EffectComposer 混合着色器，但是如果这就是您正在寻找的结果，那么直接在单个着色器新 THREE.Color(0xffff00) 中混合颜色似乎相当简单，但您可能寻找更复杂的东西......

在 THREE.js 中混合多个片段着色器以获得一个 THREE.ShaderMaterial

Blending several fragment shaders in THREE.js to obtain one THREE.ShaderMaterial

three.js

fragment-shader

alphablending