当前,我的JavaScript代码如下:
var a = new ArrayBuffer();
// Model.VerticeMap is an array holding all vertices [x1, y1, z1, x2, y2, z2, ...]
a = Model.VerticeMap; // array length: 36864
var dataArray = new Float32Array(a);
var vMapTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, vMapTexture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 2, 2, 0, gl.RGB, gl.FLOAT, dataArray);
当纹理的宽度和高度为2时,我没有任何错误。如果取值更高,将会出现错误“ArrayBufferView not big enough for request
”。
我还使用扩展功能 OES_texture_float
来处理纹理中的浮点数。
我必须承认,我不太确定自己在做什么。这多少是一个反复试验的过程,当我用这段代码没有出现任何错误时,我有点高兴了。我的主要想法是将每个顶点的 x、y、z 值作为每个像素的 r、g、b 值存储到纹理中。因此,纹理大小必须等于或大于我的 3D 模型三角形数量。不幸的是,在 WebGL 中,纹理大小被限制为 2 的幂次方。由于我计划在场景中渲染多个模型,因此顶点数也应该是可变的。
对于正确使用 ArrayBuffer
、Float32Array
和 texImage2D()
命令来解决在 WebGL 中将顶点发送到片段着色器的问题,我将感激您提供帮助。