Question

我有一个关于在THREE.js中混合多个片段着色器的问题这里我提供了一个用于混合一个具有不同参数的着色器的代码，但我还需要混合不同的着色器。

我的着色器：

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

  }

然后我定义制服和材料：

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;

因此我有一个我需要的结果，但我明白，为每个着色器创建单独的网格不是一个好主意。而且，如果我的对象不对称，我会遇到麻烦。 是否可以混合着色器并获取一种材质？

Answer 1

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

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

1 个答案: