WebGL-带高度图的纹理地形 [英] WebGL - Textured terrain with heightmap

问题描述

我正在尝试使用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个不同的图像文件中读取这些值.

将寻求任何帮助. 谢谢

解决方案

在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

I'm trying to create a 3D terrain using WebGL. I have a jpg with the texture for the terrain, and another jpg with the height values (-1 to 1).

I've looked at various wrapper libraries (like SpiderGL and Three.js), but I can't find a sutable example, and if I do (like in Three.js) the code is not documented and I can't figure out how to do it.

Can anyone give me a good tutorial or example?

There is an example at Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html which is almost what I want. The problem is that they create the colour of the mountains and the height values randomly. I want to read these values from 2 different image files.

Any help would be appriciated. Thanks

解决方案

Check out this post over on GitHub:

https://github.com/mrdoob/three.js/issues/1003

The example linked there by florianf helped me to be able to do this.

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

Demo: http://oos.moxiecode.com/js_webgl/terrain/index.html

这篇关于WebGL-带高度图的纹理地形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！