Разметка текстуры с помощью Three.js

Question

Работает ли текстурирование splatting с помощью трехслойной или трехмерной рамки рендеринга Javascript? Если да, я бы хотел увидеть пример, возможно, даже учебник по большой местности. Если он не работает, есть ли другой способ отображения больших ландшафтов? Спасибо.

Answer 1

Решение принято!

Во-первых, вы можете написать вершинный шейдер, который принимает изображение в градациях серого и использует его как карту высот, и включает в себя изменяющийся поплавок (ниже - 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, 0.0, 1.0) + water + sandy + grass + rocky + snowy; 
} 

Затем вы можете использовать THREE.ShaderMaterial использовать это для данной сетки. Приведенный выше код реализован на http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html и производит результат:

Надеется, что это поможет вам начать работу. Счастливое кодирование!