Texturspritzer mit Three.js

Funktioniert Textur-Splatting mit Three.js oder einem anderen Javascript-3D-Rendering-Framework? Wenn ja, würde ich gerne ein Beispiel sehen, vielleicht sogar ein Tutorial auf großem Gelände. Wenn es nicht funktioniert, gibt es eine andere Möglichkeit, große Terrains zu kartieren? Vielen Dank.

Herausforderung angenommen!

Erstens können Sie einen Vertex-Shader schreiben, der ein Graustufenbild nimmt und es als Heightmap verwendet und einen variierenden Float (namens vAmount unten), um sie an den Fragment-Shader weiterzugeben, um die Textur(en) zu bestimmen, die an diesem Punkt angezeigt (überblendet) werden sollen.

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 );
}

Als nächstes kommt der Fragment-Shader, der beliebig viele Texturen enthalten kann, die Sie für verschiedene Höhen benötigen, und es gibt eine großartige integrierte Funktion namens smoothstep das macht fließende Übergänge viel einfacher zu berechnen.

Ein Beispielcode für einen solchen Fragment-Shader:

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;
}  

Dann können Sie eine verwenden THREE.ShaderMaterial um dies für ein bestimmtes Netz zu verwenden. Der obige Code wird bei implementiert http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html und erzeugt ein Ergebnis wie dieses:

Ich hoffe, das hilft Ihnen beim Einstieg. Viel Spaß beim Codieren!