纹理splatting是否适用于Three.js或其他
Javascript 3D渲染框架？如果是的话,我想看一些例子,甚至可以在大地形上进行教程.如果它不起作用是否有任何其他方式映射大地形？
谢谢.
谢谢.
解决方法
接受挑战！
首先,您可以编写一个顶点着色器,它采用灰度图像并将其用作高度图,并包含一个变化的浮点(下面称为vAmount),以传递给片段着色器以确定要在其处显示(混合)的纹理.点.
uniform sampler2D bumpTexture;
uniform float bumpScale;
varying float vAmount;
varying vec2 vUV;
void main()
{
vUV = uv;
vec4 bumpData = texture2D( bumpTexture,uv );
vAmount = bumpData.r; // assuming map is grayscale it doesn't matter if you use r,g,or b.
// move the position along the normal
vec3 newPosition = position + normal * bumpScale * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition,1.0 );
}
接下来是碎片着色器,它可以包含不同高程所需的许多纹理,并且有一个很棒的内置函数,称为smoothstep,它使得平滑过渡更容易计算.
这种片段着色器的代码示例：
uniform sampler2D oceanTexture;
uniform sampler2D sandyTexture;
uniform sampler2D grassTexture;
uniform sampler2D rockyTexture;
uniform sampler2D snowyTexture;
varying vec2 vUV;
varying float vAmount;
void main()
{
vec4 water = (smoothstep(0.01,0.25,vAmount) - smoothstep(0.24,0.26,vAmount)) * texture2D( oceanTexture,vUV * 10.0 );
vec4 sandy = (smoothstep(0.24,0.27,vAmount) - smoothstep(0.28,0.31,vAmount)) * texture2D( sandyTexture,vUV * 10.0 );
vec4 grass = (smoothstep(0.28,0.32,vAmount) - smoothstep(0.35,0.40,vAmount)) * texture2D( grassTexture,vUV * 20.0 );
vec4 rocky = (smoothstep(0.30,0.50,vAmount) - smoothstep(0.40,0.70,vAmount)) * texture2D( rockyTexture,vUV * 20.0 );
vec4 snowy = (smoothstep(0.50,0.65,vAmount)) * texture2D( snowyTexture,vUV * 10.0 );
gl_FragColor = vec4(0.0,0.0,1.0) + water + sandy + grass + rocky + snowy;
}
然后,您可以使用THREE.ShaderMaterial将其用于给定网格.上面的代码在http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html实现,产生如下结果：
希望这有助于您入门.快乐的编码！
