three.js html5,html5 – 使用Three.js进行纹理喷涂

接受挑战！

首先,您可以编写一个顶点着色器,它采用灰度图像并将其用作高度图,并包含一个变化的浮点(下面称为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;

}

希望这有助于您入门.快乐的编码！