我正在尝试重新调整找到的高度图着色器示例的用途here http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html转换为 32 位精度而不是 8 位的精度。正在进行的代码位于 github 上:https://github.com/bgourlie/ Three_heightmap https://github.com/bgourlie/three_heightmap
高度图是在 .NET 中生成的。高度在 0f...200f 范围内,并转换为 32 位颜色值(Unity 的颜色结构 http://docs.unity3d.com/ScriptReference/Color.html)使用以下方法:
private static Color DepthToColor(float height)
{
var depthBytes = BitConverter.GetBytes(height);
int enc = BitConverter.ToInt32(depthBytes, 0);
return new Color((enc >> 24 & 255)/255f, (enc >> 16 & 255)/255f, (enc >> 8 & 255)/255f,
(enc & 255)/255f);
}
颜色数据被编码为 png,结果如下所示:
顶点着色器正在获取此图像数据并将 RGB 值转换回原始高度值(使用我的问题中回答的技术here https://stackoverflow.com/questions/28652695/webgl-heightmap-using-vertex-shader-using-32-bits-instead-of-8-bits):
uniform sampler2D bumpTexture; // defined in heightmap.js
varying float vAmount;
varying vec2 vUV;
void main()
{
vUV = uv;
vec4 bumpData = texture2D( bumpTexture, uv );
vAmount = dot(bumpData, vec4(1.0, 255.0, 65025.0, 16581375.0));
// Uncomment to see a "flatter" version
//vAmount = dot(bumpData, vec4(1.0, 1.0/255.0, 1.0/65025.0, 1.0/160581375.0));
// move the position along the normal
vec3 newPosition = position + normal * vAmount;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
结果肯定是一团糟:
我可以通过改变这一行让它变得更平坦:
vAmount = dot(bumpData, vec4(1.0, 1.0/255.0, 1.0/65025.0, 1.0/16581375.0));
这会给我一个更平坦的图像,它至少显示了生成地形的漂亮轮廓,但几乎完全平坦的平面(有轻微但不明显的变化):
我认为我做错了一些事情,我只是不知道是什么。我不确定我是否正确编码了原始浮点数。我不确定我是否在顶点着色器中正确解码它(我得到的值肯定超出了 0...200 的范围)。一般来说,我在 3D 图形方面也不是很有经验。因此,任何有关我做错了什么或一般如何实现这一目标的指示都将不胜感激。
同样,可以在此处找到自包含的正在进行的代码:https://github.com/bgourlie/ Three_heightmap https://github.com/bgourlie/three_heightmap