在 Three.js 中将纹理设置为几何图形

Question

我有这个几何：Picture

我想添加山与雪纹理等相同的效果：
Texture splatting with Three.js

我从 Three.js 向着色器提供什么信息的小背景：

//importing grass and snow textures:
var grassTexture = new THREE.ImageUtils.loadTexture( 'images/grass-512.jpg' );
grassTexture.wrapS = grassTexture.wrapT = THREE.RepeatWrapping;
var snowTexture = new THREE.ImageUtils.loadTexture( 'images/snow-512.jpg' );
snowTExture.wrapS = snowTExture.wrapT = THREE.RepeatWrapping;

this.customUniforms = {
 grassTexture:  { value: grassTexture },
 snowTexture:   { value: snowTexture },

};
var customMaterial = new THREE.ShaderMaterial({
 uniforms: customUniforms,
 side: THREE.DoubleSide,
 vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
 fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
});
//creating mesh, geometry is the model in picture.
mesh = new THREE.Mesh(geometry, customMaterial);

顶点和片段着色器：

//vertexShader:
varying vec2 vUV;

void main(){
 vUV = uv;
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

我用这个得到全红色模型：

//fragmentShader:
void main(){
 gl_FragColor = vec4(1, 0.0, 0.0, 1.0) ;
}

我想要使用 snowTexture 较高且使用 GrassTexture 较低的纹理。

uniform sampler2D grassTexture;  
uniform sampler2D snowTexture;
varying vec2 vUV;
//Something like this?:
vec4 grass = texture2D( grassTexture, vUV);
vec4 snow = texture2D( snowTexture, vUV);
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + grass + snow;

Answer 1

这真的不难理解，让我带你了解一下逻辑。

在您的情况下，您不想使用置换贴图。因此，您需要在您的 vertexShader 上设置一个 varying height 以将您的顶点上坐标 [0,1] 映射到您的 fragmentShader。

//vertexShader:
varying vec2 vUV;
varying float height;

void main() {

  vUV = uv;

  float maxPosition = 30.0; // this is an example value.
  height = max( 0.0, min(1.0, position.y/maxPosition ) ); // assuming +y is up

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

}

现在您可以从您的 fragmentShader 访问 height 并使用该信息来选择您希望转换发生的位置。

uniform sampler2D grassTexture;  
uniform sampler2D snowTexture;

varying vec2 vUV;
varying float height;

void main(){

  vec4 grass = (1.0 - smoothstep( 0.48, 0.52, height)) * texture2D( grassTexture, vUV);
  vec4 snow =  (smoothstep(0.48, 0.52, height) - 0.0) * texture2D( snowTexture, vUV);

  gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + grass + snow;

}

提供的链接使用函数smoothstep 在纹理之间进行渐变。我们可以使用以下模式( a - b ) * textureColor 创建过渡。

在这种情况下，a 控制纹理何时开始影响片段颜色。 b 控制纹理何时停止贡献。

换句话说，你的草纹理已经开始在每个高度做出贡献，所以我们将a 映射到 1.0。它在 0.5 左右停止贡献，所以我们给 b 在接近 0.5 时平滑淡出。

另一方面，你的雪纹理只会开始贡献大约 0.5。所以，当a 接近 0.5 时，我们给它一个平滑的淡入。它永远不会停止贡献，因此我们将 b 设置为 0.0。

希望这可以为您解决问题。