问题标签 [heightmap]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
392 浏览

image - THREE.js (r60) PointLight 不被特殊平面对象反射(从图像高度映射)

更新问题的原因已找到 - 请参阅问题的更新部分。


我有一个使用 THREE.js (r60) 的复杂应用程序,它向主场景添加了一个特殊的平面对象。平面几何由内部提供的 base64 uri 图像(大小 16x16、32x32 或 64x64 像素)的高度映射确定。该场景有两个静态光(环境光和定向光)和一个可打开和关闭的可移动点光源。

复杂的应用程序 中,点光源不会被平面对象反射。(点光源通过按“R”键或按钮来切换)。

我使用 THREE.js 最新版本 (r70) 制作了第一个 JSFiddle 示例,其中灯光工作正常。

[更新] 我现在使用较旧的 THREE.js 库 (r60)制作了第二个 JSFiddle 示例,它也可以正常工作。

我怀疑复杂应用程序(r60)中的问题可能与系统容量和/或时序/排序有关。容量绝对是一个问题,因为其他更简单的场景对象(盒子和圆柱体)显示对点光源的单独响应或不响应,从应用程序的一次运行到下一次,这似乎取决于系统活动的整体水平(cpu、内存使用情况)。这些更简单的对象可能会在一次运行中反映,但不会在下一次运行中反映。但是高度映射的平面对象始终不反射点光。这些行为在 (i) Win7 笔记本电脑和 (ii) Android Kitkat 平板电脑上观察到。

高度映射过程可能是部分原因。我这样说是因为当我注释掉高度映射平面并激活一个简单的类似平面对象(具有随机分配的 z 级别)时,后一个平面的行为与预期一样(即它反射点光)。

我想现在通常的方法是将我的复杂应用程序升级到 r70(这不是一个简单的步骤),然后开始禁用应用程序块以缩小原因。然而,实现高度映射的方式(例如使用回调)可能是解释高度映射平面无法反射点光的一个因素。

[重新编写] 因此,如果有人可以查看正确工作、先前引用的 (r70) JSFiddle 示例中的代码并指出任何明显的设计错误,我将不胜感激(如果应用在更复杂、更严重加载的应用程序)可能会导致高度映射平面无法反射点光。

(r70) JSFiddle 的完整代码(javascript,不是 html 或 css):-

更新

看来问题是分阶段的结果。请参阅这个新的 JSFiddle(r70)。Pointlight 在函数 init() 中创建,但未添加到场景中,或者在添加后立即从场景中删除。然后创建各种图形网格对象。当点光源被添加回场景(在动画循环中)时为时已晚 - 网格对象不会被点光源照亮。

一个程序解决方案是简单地不从场景中移除点光源,如果它们稍后要使用的话。如果他们需要暂时“熄灭”,那么只需调低强度并稍后再调高:例如 myPointLight.intensity = 0.00

0 投票
2 回答
1279 浏览

opengl-es - 使用顶点着色器的 WebGL 高度图,使用 32 位而不是 8 位

我正在使用以下顶点着色器(由http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html提供)从灰度高度图生成地形:

我想要 32 位的分辨率,并生成了一个将高度编码为 RGBA 的高度图。我不知道如何更改着色器代码以适应这种情况。任何方向或帮助?

0 投票
1 回答
468 浏览

opengl - 如何更新生成法线贴图以匹配 equirectangular 投影置换贴图

我在 OpenGL 和我的 glsl 镶嵌着色器中渲染一个半径为 1 的测地线球体,将顶点乘以高度/置换贴图中的一个值,这会产生一些从球体突出的大光线。我正在寻找一种能够清楚地看到它创建的几何图形的方法。一些漫反射照明或轮廓或类似 sobel 过滤器的东西是理想的,但我无法计算应用照明或轮廓所需的法线。

我能够在几何着色器中计算表面法线,但这造成了一个无法接受的瓶颈,因为即使它主要只是一个直通着色器,大量的多边形也会让 gs 陷入困境。我坚持使用 OpenGL 4.2,因此我无法使用 nVidias 直通扩展。

我在想也许一个预先计算的法线贴图可能是要走的路,但我不确定如何根据我的 equirectangular 投影置换贴图生成它。有什么想法或有用的建议吗?

0 投票
2 回答
991 浏览

opengl-es - 在threejs中实现一个32位的高度图顶点着色器

我正在尝试将此处找到的高度图着色器示例重新调整为可以使用 32 位而不是 8 位精度的示例。正在进行中的代码位于 github 上:https ://github.com/bgourlie/three_heightmap

高度图是在 .NET 中生成的。高度在 0f...200f 范围内,并使用以下方法转换为 32 位颜色值(Unity 的Color 结构):

颜色数据被编码为 png,结果如下所示:

在此处输入图像描述

顶点着色器正在获取此图像数据并将 RBGA 值转换回原始高度值(使用我在此处回答的问题的技术):

结果肯定是一团糟:

在此处输入图像描述

我可以通过更改此行使其更平坦:

这会给我一个更平坦的图像,它至少显示了生成的地形的一个很好的轮廓,但是几乎完全是一个平面(有轻微的,虽然不明显的变化):

在此处输入图像描述

我认为我做错了一些事情,我只是不知道是什么。我不确定我是否正确编码了原始浮点数。我不确定我是否在顶点着色器中正确解码(我得到的值肯定在 0...200 的范围之外)。一般来说,我在 3d 图形方面也不是很有经验。因此,任何关于我做错了什么的指针,或者通常如何实现这一点都将不胜感激。

同样,可以在此处找到自包含的正在进行中的代码:https ://github.com/bgourlie/three_heightmap

0 投票
2 回答
1824 浏览

algorithm - 在地形图上绘制道路

我有道路左侧和右侧的顶点坐标(显示为绿色和黑色点)。我的地形是一个数组,正方形的角代表不同的高度值。我只是通过为每个顶点提供插值高度来绘制我的道路,但这并没有给出正确的结果(道路不与地形重叠)

问题:在opengl中有没有办法可以正确绘制这条路?或者我必须手动计算所有交叉点(蓝点)并镶嵌我的道路?

示例图像

**编辑:**如果我只给每个顶点一个插值高度,这就是结果。正如由于高度图所见,某些部分仍保留在地形下。

在此处输入图像描述

0 投票
1 回答
571 浏览

matlab - Matlab: Calculate apparent angle of horizon for points on elevation map

I have an elevation map of a mountainous area (large 2d array with z values)

I want to know the height of the apparent horizon angle for all compass bearings for certain points on my height map.

To illustrate, this website has some examples of what I want.

Edit: I've stopped trying to find a function that does this and am now writing my own.

My approach is drawing lines from my point radially, interpolating the height along those lines and then taking max(z/r) along each line.

If you know a function that already does this, please tell me, if not, hopefully I'll be able to upload one soon.

0 投票
1 回答
1185 浏览

c# - 为什么分配 heightmapResolution 会增加地形的大小?

所以我一直在尝试使用代码生成地形,但遇到了一个问题。当我分配 heightmapResolution 时,我的地形大小会增加两倍的幂。

例如,如果我的 heightmapResolution 是 513,那么我的地形大小会增加 16 倍。如果我的 heightmapResolution 是 257,那么我的地形大小会增加 8 倍。

据我了解(我也读过这个),heightmapResolution 不应该影响地形的大小。

我必须强调,尺寸增加只发生在 X 和 Z 轴上。高度保持不变。

这就是生成我的地形数据的集团。地形大小的变化已经在 Debug.Log 中可见(“更大的地形大小:” + terrainData.size);在我分配 heightmapResolution 之后立即。

关于为什么会发生这种情况的任何想法?

0 投票
0 回答
787 浏览

opengl - 在 GLSL 着色器中从高度图生成法线贴图

我目前正在使用 OpenGL 开发海洋渲染系统。高度图是用 fft 计算的,看起来不错。但是我从高度图生成法线贴图有一些问题。法线贴图是通过使用预先计算的高度图作为纹理在片段着色器中创建的。为了计算一个正常值,我使用了 sobel 过滤器,这是我的代码:

z0 - z7 是来自高度贴图纹理的高度值。法线计算正确,但在法线纹理中出现了岛状台阶/接缝,这破坏了法线贴图的平滑度。高度图看起来非常平滑,没有接缝/边缘。

我认为有一些数字错误分别与高度值的边界,但我不知道如何解决它。

0 投票
1 回答
5120 浏览

image - 需要在 Unity 中转换为 RAW 文件以获取高度图

我需要将我创建的灰度高度图转换为 RAW 文件以在 Unity 中使用。我在谷歌上搜索了几个小时的方法,但无济于事。有没有办法在没有 Photoshop 的情况下做到这一点?我的文件保存为 JPG,但如有必要,我可以转换为 BMP。

0 投票
2 回答
1088 浏览

c# - 高度图中的双线性插值

我一直在尝试在 C# 中的高度图(或高度场)类中实现双线性插值,但并不真正了解 Wiki 上的数学。这是 heightfield 类的实现。我有第二个函数,Mathf.BilinearInterpolation(...),它会抛出 NotImplementedException。