javascript WebGL - 带高度图的纹理地形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7638008/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
WebGL - Textured terrain with heightmap
提问by goocreations
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).
我正在尝试使用 WebGL 创建 3D 地形。我有一个带有地形纹理的 jpg，还有另一个带有高度值（-1 到 1）的 jpg。
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.
我查看了各种包装库（如 SpiderGL 和 Three.js），但我找不到合适的示例，如果我这样做（如 Three.js），代码没有记录在案，我无法弄清楚怎么做。
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.htmlwhich 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.
Three.js http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain.html有一个例子，这几乎是我想要的。问题是它们随机创建了山脉的颜色和高度值。我想从 2 个不同的图像文件中读取这些值。
Any help would be appriciated. Thanks
任何帮助都会受到帮助。谢谢
回答by poshaughnessy
Check out this post over on GitHub:
在 GitHub 上查看这篇文章：
https://github.com/mrdoob/three.js/issues/1003
https://github.com/mrdoob/three.js/issues/1003
The example linked there by florianf helped me to be able to do this.
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;
}
回答by Toji
Two methods that I can think of:
我能想到的两种方法：
- Create your landscape vertices as a flat grid. Use Vertex Texture Lookups to query your heightmap and modulate the height (probably your Y component) of each point. This would probably be the easiest, but I don't think browser support for it is very good right now. (In fact, I can't find any examples)
- Load the image, render it to a canvas, and use that to read back the height values. Build a static mesh based on that. This will probably be faster to render, since the shaders are doing less work. It requires more code to build the mesh, however.
- 将景观顶点创建为平面网格。使用顶点纹理查找来查询您的高度图并调整每个点的高度（可能是您的 Y 分量）。这可能是最简单的，但我认为现在浏览器对它的支持不是很好。（事实上，我找不到任何例子）
- 加载图像，将其渲染到画布上，然后使用它来读回高度值。基于此构建静态网格。这可能会更快渲染，因为着色器做的工作更少。但是，它需要更多代码来构建网格。
For an example of reading image data, you can check out this SO question.
有关读取图像数据的示例，您可以查看此 SO 问题。
回答by pheelicks
You may be interested in my blog post on the topic: http://www.pheelicks.com/2014/03/rendering-large-terrains/
您可能对我关于该主题的博客文章感兴趣：http: //www.pheelicks.com/2014/03/rendering-large-terrains/
I focus on how to efficiently create your terrain geometry such that you get an adequate level of detail in the near field as well as far away.
我专注于如何有效地创建您的地形几何体，以便您在近场和远场都获得足够的细节水平。
You can view a demo of the result here: http://felixpalmer.github.io/lod-terrain/and all the code is up on github: https://github.com/felixpalmer/lod-terrain
您可以在此处查看结果演示：http: //felixpalmer.github.io/lod-terrain/，所有代码都在 github 上：https: //github.com/felixpalmer/lod-terrain
To apply a texture to the terrain, you need to do a texture lookup in the fragment shader, mapping the location in space to a position in your texture. E.g.
要将纹理应用于地形，您需要在片段着色器中进行纹理查找，将空间中的位置映射到纹理中的位置。例如
vec2 st = vPosition.xy / 1024.0;
vec3 color = texture2D(uColorTexture, st)
回答by beiller
Depending on your GLSL skills, you can write a GLSL vertex shader, assign the texture to one of your texture channels, and read the value in the vertex shader (I believe you need a modern card to read textures in a vertex shader but that may just be me showing my age :P )
根据您的 GLSL 技能，您可以编写 GLSL 顶点着色器，将纹理分配给您的纹理通道之一，并读取顶点着色器中的值（我相信您需要一张现代卡来读取顶点着色器中的纹理，但这可能只是让我展示我的年龄：P）
In the vertex shader, translate the z value of the vertex based on the value read from the texture.
在顶点着色器中，根据从纹理读取的值转换顶点的 z 值。
回答by Marcus Tanner
Babylon.js makes this extremely easy to implement. You can see an example at: Heightmap Playground
Babylon.js 使这非常容易实现。您可以在以下位置查看示例： 高度图游乐场
They've even implemented the Cannon.js physics engine with it, so you can handle collisions: Heightmap with collisions
他们甚至用它实现了 Cannon.js 物理引擎，所以你可以处理碰撞：带有碰撞的高度图
Note: as of this writing it only works with the cannon.js physics plugin, and friction doesn't work (must be set to 0). Also, make sure you set the location of a mesh/impostor BEFORE you set the physics state, or you'll get weird behavior.
注意：在撰写本文时，它仅适用于 cannon.js 物理插件，并且摩擦不起作用（必须设置为 0）。另外，请确保在设置物理状态之前设置网格/冒名顶替者的位置，否则会出现奇怪的行为。
