使用顶点着色器的WebGL高度图，使用32位而不是8位 [英] WebGL heightmap using vertex shader, using 32 bits instead of 8 bits

问题描述

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

I'm using the following vertex shader (courtesy http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html) to generate terrain from a grayscale height map:

uniform sampler2D bumpTexture;
uniform float bumpScale;

varying float vAmount;
varying vec2 vUV;

void main()
{
  vUV = uv;
  vec4 bumpData = texture2D( bumpTexture, uv );

  vAmount = bumpData.r; // assuming map is grayscale it doesn't matter if you use r, g, or b.

  // move the position along the normal
  vec3 newPosition = position + normal * bumpScale * vAmount;

  gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0);
}

我希望具有32位分辨率，并生成了一个高度图，该高度图将高度编码为RGBA.我不知道如何去改变着色器代码来适应这种情况.有任何指导或帮助吗?

I'd like to have 32-bits of resolution, and have generated a heightmap that encodes heights as RGBA. I have no idea how to go about changing the shader code to accommodate this. Any direction or help?

推荐答案

bumpData.r，.g，.b和.a的数量都在[0.0，1.0]范围内，等于除以原始字节值通过255.0.

bumpData.r, .g, .b and .a are all quantities in the range [0.0, 1.0] equivalent to the original byte values divided by 255.0.

因此，根据您的字节序，天真的转换回原始int的可能是:

So depending on your endianness, a naive conversion back to the original int might be:

(bumpData.r * 255.0) + 
(bumpdata.g * 255.0 * 256.0) + 
(bumpData.b * 255.0 * 256.0 * 256.0) + 
(bumpData.a * 255.0 * 256.0 * 256.0 * 256.0)

所以这与带有向量(255.0, 65280.0, 16711680.0, 4278190080.0)的点积相同，这可能是实现它的更有效的方法.

So that's the same as a dot product with the vector (255.0, 65280.0, 16711680.0, 4278190080.0), which is likely to be the much more efficient way to implement it.

这篇关于使用顶点着色器的WebGL高度图，使用32位而不是8位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！