WebGL2如何配置浮点纹理实现单32位浮点数每像素存储？

问题原因 #

你当前配置的纹理内部格式是RGBA32F，每个像素会占用4个32位浮点数的存储空间（对应RGBA四个通道各存一个float），你的纹理尺寸是3×2=6像素，所以总共需要6×4=24个float值才能填满纹理，这就是你传6个值会报缓冲区不足的原因。

解决方案 #

要实现每个像素仅存一个32位浮点数，你需要改用单通道的浮点纹理格式，调整参数如下：

1. 内部存储格式internalFormat改为gl.R32F（单R通道，32位浮点数，每个像素仅占4字节刚好存一个float）
2. 上传数据的格式format改为gl.RED，对应单通道数据输入

修改后的代码示例：

const level = 0;
const internalFormat = gl.R32F; // 调整为单通道浮点格式
const width = 3;
const height = 2;
const border = 0;
const format = gl.RED; // 调整为单通道数据输入格式
const type = gl.FLOAT;
const data = new Float32Array([ ... 6个值，对应6个像素 ...]); // 现在仅需传入和像素数量相等的浮点值
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, format, type, data);

后续使用注意 #

• 在着色器中采样该纹理时，直接取r通道即可拿到你存储的原始浮点值：float storedValue = texture(u_tex, uv).r;
• 如果你的纹理需要使用线性过滤（gl.LINEAR），需要先开启OES_texture_float_linear扩展；如果仅用最近邻过滤（gl.NEAREST，纯数据存储场景常用）则无需额外扩展，WebGL2原生支持R32F格式。

内容的提问来源于stack exchange，提问作者user9163823