纹理泼洒与Three.js [英] Texture splatting with Three.js

问题描述

质地是否泼洒作品Three.js或其他JavaScript 3D渲染架构？如果是我想看到的例子甚至教程大地形。如果它不工作是有任何其他方式映射大的地形？ 谢谢你。

Does texture splatting works with Three.js or other Javascript 3D rendering framework? If yes I'd like to see example maybe even tutorial on large terrain. If it doesn't work is there any other way mapping large terrains? Thank you.

推荐答案

挑战接受！

首先，你可以写一个顶点着色器，需要一个灰度图像，并将其作为一个高度图，并包括不同的浮动（称为 vAmount 以下）传递到片段着色器在该点确定纹理（S），显示（混合）。

First, you can write a vertex shader that takes a grayscale image and uses it as a heightmap, and includes a varying float (called vAmount below) to pass to the fragment shader to determine the texture(s) to display(blend) at that point.

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 ，使平滑过渡多少容易计算。

Next comes the fragment shader, which can include however many textures you need for different elevations, and there is a great built-in function called smoothstep that makes smooth transitions much easier to calculate.

的code这样的片段着色器的一个例子：

An example of code for such a 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;
}  

然后就可以使用 THREE.ShaderMaterial 来使用这个对于一个给定网格。上述code是在<一个实施href="http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html">http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html并产生这样的结果：

Then you can use a THREE.ShaderMaterial to use this for a given mesh. The above code is implemented at http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html and produces a result like this:

希望这可以帮助您开始。编码快乐！

Hope this helps you get started. Happy coding!

这篇关于纹理泼洒与Three.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！