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

Answer 2

我能想到的两种方法:

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

有关读取图像数据的示例,您可以查看此SO问题.