THREE.JS SHADER：将颜色渐变混合应用于多个轴上的几何图形？答案

【问题标题】：THREE.JS SHADER: Apply color gradient blend to geometry on multiple axes?THREE.JS SHADER：将颜色渐变混合应用于多个轴上的几何图形？
【发布时间】：2022-08-18 16:20:22
【问题描述】：

使用来自Apply color gradient to material on mesh - three.js 的信息

我能够创建一个花卉着色器，将颜色垂直应用到百日草的空间中。颜色从红色到黄色垂直混合在花朵的空间中，形成一个响应高度的渐变。（见图1）

顶点着色器的选择：

      float f = clamp((vPos.z - bbMin.z) / (bbMax.z - bbMin.z), 0., 1.);
      vec3 col = mix(color1, color2, f);
      vec4 diffuseColor = vec4( col, opacity );

片段着色器的选择：

      gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);

上面的代码显示颜色正确响应了 z 轴上发生的混合。

我还能够创建一个花卉着色器，从花的中心向外应用颜色，水平响应 Y 轴。玫瑰中心的颜色为黑色，外缘为红色。（见图2）

顶点着色器的选择：

      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);

片段着色器的选择：

      gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);

上面的代码显示颜色正确响应了 y 轴上发生的混合。

（终于！）我的问题是：我将如何组合这两个着色器，使花朵混合的中心更接近黑色，更接近中心，而垂直渐变仍然存在？从黑色到红色的混合将发生在 y 轴上，（或者黑色到透明，甚至？）以及在 z 轴上发生从红色到黄色的混合？ -- 我想“变暗”百日草的中心，这样如果从侧面看，它看起来不像没有定义的渐变。

https://codepen.io/ricky1280/pen/zYWyzQv （着色器从这支笔的 html 中的第 271 行开始）

以便从完美的侧面视图中可以看到花瓣：

https://codepen.io/ricky1280/pen/RwMEgmj （着色器从这支笔的 html 的第 227 行开始）

举个例子，这是应用在玫瑰上的红黄色着色器，从完美的轮廓中可以看到渐变

https://codepen.io/ricky1280/pen/dymwRBW （着色器从这支笔的 html 的第 265 行开始）

（例如，这是应用于玫瑰的红黄色着色器，渐变从配置文件中可见）

感谢您阅读所有这些 - 当我看到 GLSL 时我迷路了，所以我希望有人能帮助我。

标签： javascript three.js geometry vertex-shader geometry-shader

【解决方案1】：

我对您的片段着色器进行了修改：

float f = clamp((vPos.z - bbMin.z) / (bbMax.z - bbMin.z), 0., 1.);

// Calculate distance to center of XY plane
float distCenter = length(vPos.xy);

// Re-map values so it converts from [0.0, 0.2] => [0, 1]
distCenter = smoothstep(0.0, 0.2, distCenter);

// Multiplying by 0 makes the color black
// Multiplying by 1 keeps the color at original value
vec3 col = mix(color1, color2, f) * distCenter;

vec4 diffuseColor = vec4( col, opacity );`

结果：

当片段接近中心时，花朵混合成黑色：

使用smoothstep() 中的0.2 值使渐变更宽或更窄。如果您以前从未使用过length()，您可以阅读有关它的更多详细信息at the Book of Shaders glossary。

【讨论】：

【解决方案2】：

答案就在你的问题中，如果你想组合这两个着色器，那么......只需组合它们:)

材料将如下所示：

    let material = new THREE.MeshBasicMaterial({
      roughness: 1,
      metalness: 0,
      side: THREE.DoubleSide,
      // map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg", tex => {
      //   tex.wrapS = THREE.RepeatWrapping;
      //   tex.wrapT = THREE.RepeatWrapping;
      //   tex.repeat.set( 16, 1 );
      // }),
      onBeforeCompile: shader => {
        shader.uniforms.bbMin = uniforms.bbMin;
        shader.uniforms.bbMax = uniforms.bbMax;
        shader.uniforms.color1 = uniforms.color1;
        shader.uniforms.color2 = uniforms.color2;
        shader.uniforms.color3 = uniforms.color3;
        shader.vertexShader = `
        varying vec2 vUv;
        varying vec3 vPos;
      ${shader.vertexShader}
    `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
    vPos = transformed;
    vUv = uv;
    `
        );
        shader.fragmentShader = `
        uniform vec3 bbMin;
      uniform vec3 bbMax;
      uniform vec3 color1;
      uniform vec3 color2;
      uniform vec3 color3;
      varying vec2 vUv;
      varying vec3 vPos;
      ${shader.fragmentShader}
    `.replace(
          `vec4 diffuseColor = vec4( diffuse, opacity );`,
          `
      float f = clamp((vPos.z - bbMin.z) / (bbMax.z - bbMin.z), 0., 1.);
      vec3 col = mix(color1, color2, f);
      col = mix(color3, col, vUv.x);
      vec4 diffuseColor = vec4( col, opacity );`
        );
        //console.log(shader.vertexShader);
        //console.log(shader.fragmentShader);
      }
    });

【讨论】：