7

在 Three.js 中，是否可以创建包含许多纹理的材质（着色器？），每个纹理都有自己的细节，将它们混合在一起并分配给几何体？我想使用多种表面处理技术来模拟纸张表面，例如箔压花或局部 UV 上光。

我想要实现的是具有以下特性的材料：

  1. '基层：
    • 纸张颜色（例如白色、灰白色、米色等）
    • 镜面反射
    • 反射率
    • 凹凸（光滑或有纹理的纸）
  2. “图像”层（可选）：
    • 图像纹理（印刷在纸上的艺术品，与“基础”颜色混合）
  3. “箔”层（可选）：
    • 用于控制图层透明度的黑白图像纹理
    • 颜色（重叠的“基础”层）
    • 镜面反射
    • 反射率
  4. “浮雕/凹凸”层（可选）：
    • 凹凸纹理（提高或降低“基础”凹凸）
  5. “清漆”层（可选）：
    • 用于控制图层透明度的黑白图像纹理
    • 镜面反射
    • 反射率
    • 凹凸（略微提升“基础”凹凸）

所有单独图层的原因是我想单独控制它们（替换不同的纹理并在运行时更改值）。除了“图像”层，我不确定应该为其他层使用什么混合值来实现逼真的模拟。

为了说明应用于纸张的整理技术，请看以下照片（由 PrintHouse Corporation 提供）：

盲压花（图案）和金箔压花（标志、标题） 盲压花（图案）和金箔压花（标志、标题）

银箔压纹（徽标）和局部 UV 清漆（照片） 银箔压纹（徽标）和局部 UV 清漆（照片）

现货UV清漆（线） 现货UV清漆（线）

有可能吗？我找不到任何可以使用如此复杂材料的 Three.js 示例。如果您能指出一个或解释如何以编程方式处理此问题，我将不胜感激。

4

1 回答 1

1

就像评论说的那样，您可以使用自定义着色器来做到这一点。您只需要考虑如何在着色器中自己组合不同的图层。所以只是给你一个例子，你可以像这样在你的 js 中设置你的着色器：

blurTexture360 = new THREE.TextureLoader().load(imgURLBlur);
unblurTexture360 = new THREE.TextureLoader().load(imgURLUnblur);
highlight1Texture360 = new THREE.TextureLoader().load(imgURLHighlight1);
highlight2Texture360 = new THREE.TextureLoader().load(imgURLHighlight2);

blurTexture360.magFilter = THREE.LinearFilter;
blurTexture360.minFilter = THREE.LinearFilter;

const shader = THREE.ShaderLib.equirect;
uniforms = {
  u_resolution: { type: "v2", value: resolution },
  u_blur: { type: "t", value: blurTexture360 },
  u_unblur: { type: "t", value: unblurTexture360 },
  u_highlight1: { type: "t", value: highlight1Texture360 },
  u_highlight2: { type: "t", value: highlight2Texture360 },
  u_mix: { type: "f", value: 0.0 },
  u_highlightAmt: { type: "f", value: 0.0 },
  u_highlight1Bool: { type: "f", value: 1.0 },
  u_highlight2Bool: { type: "f", value: 1.0 }
};
let material360 = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: shader.vertexShader,
  fragmentShader: fragmentShader(),
  depthWrite: false,
  side: THREE.BackSide
});

然后把制服放在别处

uniforms.u_highlightAmt.value -= 0.05;

这是当 u_highlight1Bool 或 u_highlight2Bool 设置为 1 或 0 时设置不同纹理的示例。希望这为您提供了一个使用逻辑来影响着色器代码的示例。

function fragmentShader() {
    return `        
uniform sampler2D u_blur;
uniform sampler2D u_unblur;
uniform sampler2D u_highlight1;
uniform sampler2D u_highlight2;

uniform vec2 u_resolution;
uniform float u_mix;
uniform float u_highlight1Bool;
uniform float u_highlight2Bool;
uniform float u_highlightAmt;

varying vec3 vWorldDirection;
#define RECIPROCAL_PI2 0.15915494309189535
#define RECIPROCAL_PI 0.3183098861837907

vec2 equirectUv( in vec3 dir ) {
    // dir is assumed to be unit length
    float u = atan( dir.z, dir.x ) * RECIPROCAL_PI2 + 0.5;
    float v = asin( clamp( dir.y, - 1.0, 1.0 ) ) * RECIPROCAL_PI + 0.5;
    return vec2( u, v );
}

void main() {
    vec3 direction = normalize( vWorldDirection );
    vec2 sampleUV = equirectUv( direction );
  vec4 blur =  texture2D(u_blur, sampleUV);
  vec4 unblur =  texture2D(u_unblur,  sampleUV);
  vec4 highlight1 = texture2D(u_highlight1, sampleUV);
  vec4 highlight2 = texture2D(u_highlight2, sampleUV);

    blur = mapTexelToLinear( blur );
  unblur = mapTexelToLinear( unblur );
  highlight1 = mapTexelToLinear(highlight1);
  highlight2 = mapTexelToLinear(highlight2);
  vec4 highlight = (highlight1*u_highlight1Bool) + (highlight2 * u_highlight2Bool);

  vec4 ret = mix(blur, unblur, u_mix);
  float thresh = ceil(highlight.r - 0.09) * u_highlightAmt;
  ret = mix(ret,highlight,thresh);

  gl_FragColor = ret;
}
`;

我从我的代码中得到了这个：https ://glitch.com/edit/#!/hostileterrain94?path=script%2FthreeSixtyEnv.js%3A202%3A0它没有很好的记录，但是如果你想看看它是如何存在的更广泛的项目随时查看。我确实声称这非常有效，但我知道它可以完成工作。

于 2020-12-16T21:48:46.673 回答