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

演示:http://oos.moxiecode.com/js_webgl/terrain/index.html