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

Question

I have a question about blending several fragment shaders in THREE.js Here I present a code for mixing one shader with different parameters, but I also need to mix different shaders.

My shader:

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

  }

Then i define uniforms and 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
});

Till now everything looks ok. But then I want to overlay them and do it in a strange way creating two objects:

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;

Thus I have a result I need, but I understand, that it is not a good idea to create separate mesh for each shader. Moreover, if my object will not be symmetric I will have troubles. Is it possible to blend shaders and obtain one material?

Answer 1

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