WebGL - 带有高度图的纹理地形

Question

我正在尝试使用 WebGL 创建 3D 地形。我有一个带有地形纹理的 jpg，另一个带有高度值（-1 到 1）的 jpg。

我查看了各种包装器库（如 SpiderGL 和 Three.js），但我找不到合适的示例，如果我这样做（如 Three.js），代码没有记录，我无法弄清楚怎么做。

谁能给我一个好的教程或例子？

Three.js 有一个示例 http://mrdoob.github.com/ Three .js/examples/webgl_geometry_terrain.html 这几乎就是我想要的。问题是他们随机创建山脉的颜色和高度值。我想从 2 个不同的图像文件中读取这些值。

任何帮助将不胜感激。 谢谢

Answer 1

在 GitHub 上查看这篇文章：

https://github.com/mrdoob/ Three。 js/issues/1003

florianf 链接的示例帮助我能够做到这一点。

function getHeightData(img) {
    var canvas = document.createElement( 'canvas' );
    canvas.width = 128;
    canvas.height = 128;
    var context = canvas.getContext( '2d' );

    var size = 128 * 128, data = new Float32Array( size );

    context.drawImage(img,0,0);

    for ( var i = 0; i < size; i ++ ) {
        data[i] = 0
    }

    var imgd = context.getImageData(0, 0, 128, 128);
    var pix = imgd.data;

    var j=0;
    for (var i = 0, n = pix.length; i < n; i += (4)) {
        var all = pix[i]+pix[i+1]+pix[i+2];
        data[j++] = all/30;
    }

    return data;
}

演示： https://web.archive.org/web/20220417041756/http://oos.moxiecode.com/js_webgl/terrain/index.html

Answer 2

我能想到的两种方法：

1. 将景观顶点创建为平面网格。使用顶点纹理查找来查询高度图并调整每个点的高度（可能是 Y 分量）。这可能是最简单的，但我认为浏览器现在对它的支持不是很好。 （事实上​​，我找不到任何示例）
2. 加载图像，将其渲染到画布上，然后使用它来读回高度值。基于此构建静态网格物体。这可能会更快地渲染，因为着色器所做的工作更少。然而，它需要更多代码来构建网格。

有关读取图像数据的示例，您可以查看 这个问题。

Answer 3

您可能对我关于该主题的博客文章感兴趣：http://www. pheelicks.com/2014/03/rendering-large-terrains/

我专注于如何有效地创建地形几何形状，以便您在近场和远场都能获得足够的细节。

您可以在此处查看结果演示： http://felixpalmer.github.io/lod-terrain/ 所有代码都在 github 上：https://github.com/felixpalmer/lod-terrain

要将纹理应用于地形，您需要在片段着色器中进行纹理查找，将空间中的位置映射到在纹理中的位置。例如

vec2 st = vPosition.xy / 1024.0;
vec3 color = texture2D(uColorTexture, st)

Answer 4

根据您的 GLSL 技能，您可以编写 GLSL 顶点着色器，将纹理分配给您的纹理通道之一，然后读取顶点着色器中的值（我相信您需要一张现代卡来读取顶点着色器中的纹理，但这可能只是我展示了我的年龄:P)

在顶点着色器中，根据从纹理读取的值转换顶点的 z 值。

Answer 5

Babylon.js 使这变得非常容易实现。您可以在以下位置查看示例：
Heightmap Playground

他们甚至用它实现了 Cannon.js 物理引擎，所以你可以处理碰撞： 发生碰撞的高度图

注意：截至撰写本文时，它仅适用于 cannon.js 物理插件，并且摩擦力不起作用（必须设置为 0）。另外，请确保在设置物理状态之前设置网格/冒名顶替者的位置，否则您会得到奇怪的行为。