我使用下面的顶点着色器(礼貌http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html )来从灰度高度图地形:
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高度图。 我不知道如何去改变着色器代码,以适应这一点。 任何方向或帮助?
bumpData.r
, .g
, .b
和.a
是在范围[0.0,1.0]等效于除以原始字节值的所有数量255.0
。
所以,这取决于你的字节序,天真转换回原来的INT可能是:
(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)
这很可能是实现它的更有效的方式。
随着threejs
const generateHeightTexture = (width) => {
// let max_texture_width = RENDERER.capabilities.maxTextureSize;
let pixels = new Float32Array(width * width)
pixels.fill(0, 0, pixels.length);
let texture = new THREE.DataTexture(pixels, width, width, THREE.AlphaFormat, THREE.FloatType);
texture.magFilter = THREE.LinearFilter;
texture.minFilter = THREE.NearestFilter;
// texture.anisotropy = RENDERER.capabilities.getMaxAnisotropy();
texture.needsUpdate = true;
console.log('Built Physical Texture:', width, 'x', width)
return texture;
}