Question

我有一个带纹理的物体（脑）。

这个大脑纹理应该叠加/混合一个积分alpha图的热图。到目前为止我能做到的：

热图贴图与alpha贴图相结合成为材质
通过Multiple transparent textures on the same mesh face in Three.js

我遇到的问题是两个步骤的结合。

我的脑部材料步骤（结合热图和大脑纹理）

brainTexture = new THREE.ImageUtils.loadTexture("/assets/textures/brain_tex.jpg");
  // uniforms
  uniforms = {
    color: { type: "c", value: new THREE.Color(0x0000ff) },
    texture: { type: "t", value: brainTexture },
    texture2: { type: "t", value: heatmapCanvasTexture }
  };
  brainMaterial = new THREE.ShaderMaterial({
    attributes: attributes,
    uniforms: uniforms,
    vertexShader: document.getElementById('vertex_shader').textContent,
    fragmentShader: document.getElementById('fragment_shader').textContent
  });

Fragmentshader我正在使用：

uniform sampler2D texture;
uniform sampler2D texture2;
uniform vec3 color;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {
vec4 tc = vec4(color.r, color.g, color.b, 1.0 );
    vec4 tColor = texture2D( texture, vUv );
    vec4 tColor2 = texture2D( texture2, vUv );

    // hack in a fake pointlight at camera location, plus ambient
    vec3 normal = normalize( vNormal );
    vec3 lightDir = normalize( vViewPosition );

    float dotProduct = max( dot( normal, lightDir ), 0.0 ) + 0.2;

    //gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, tColor2.a ), 1.0 ) * dotProduct;

    vec4 mix_c = tColor2 + tc * tColor2.a;
    gl_FragColor = vec4( mix( tColor.rgb, mix_c.xyz, tColor2.a ), 1.0 ) * dotProduct;

}

结果：

我的alphamap步骤：

heatmapMaterial = new THREE.MeshBasicMaterial({
    map: heatmapCanvasTexture,
    side: THREE.DoubleSide,
    alphaTest: 0.5,
    alphaMap: THREE.ImageUtils.loadTexture("/assets/textures/heatmap_alphamap.jpg")
  });

结果：

如何将修改后的（通过alphamap）热图材料整合到我的大脑材料中（通过着色器编程？）？

要明确：大脑纹理应该在整个对象上可见，但特定部分（alphamapped）应该与热图混合。因此，大脑中的特定区域可以叠加热图。

期望的结果：

Answer 1

这样的事情应该有效：

vec4 brain = texture2D( brainTexture, uv );
vec4 heatmap = texture2D( heatmapTexture, uv );
float alpha = texture2D( alphaTexture, uv ).r;
gl_FragColor = mix( brain, heatmap, alpha );

如果您发布片段着色器，我可以尝试更具体。

将材质/纹理与alpha贴图相结合

1 个答案: