Javascript 为什么顶点着色器忽略Uint8Array数据而不忽略Float32Array数据？

我的顶点着色器具有以下属性：

属性浮动a_颜色；

我有一个数组缓冲区（WebAssembly的内存），它只包含0和1，我通过创建

Uint8Array

来创建它的视图。但是，我的顶点着色器忽略它（没有错误，但似乎将所有内容都视为0）。我正在使用

twgl

。这是我的密码：

顶点着色器：

属性向量2 a_位置；
属性浮动a_颜色；
均匀vec2u_分辨率；
均匀浮动u_点_宽度；
可变的vec4 v_颜色；
vec2标准化坐标（vec2位置）{
浮动x=位置[0]；
浮动y=位置[1]；
float resx=u_分辨率[0]；
float resy=u_分辨率[1]；
返回vec2（2.0*x/resx-1.0，2.0*y/resy-1.0）；
}
void main（）{
gl_PointSize=u_point_width；
vec2坐标=标准化坐标（a坐标位置）；
gl_位置=vec4（坐标*vec2（1，-1），0,1）；
v_color=vec4（0，a_color，0,1）；
}

片段着色器：

高精度浮点；
可变的vec4 v_颜色；
void main（）{
gl_FragColor=v_颜色；
}

Javascript:

const canvas=document.getElementById（“c”）；
常量单元格大小=10；
const gl=canvas.getContext（“webgl”）；
const programInfo=twgl.createProgramInfo（gl[
“顶点着色器”，
“片段着色器”
]);
setDefaults（{attribPrefix:“a_”}）；
twgl.resizeCanvasToDisplaySize（gl.canvas，window.devicePixelRatio）；
总图视口（0，0，总图画布宽度，总图画布高度）；
const universe=universe.new(
数学单元（gl.canvas.width/CELL_SIZE/2），
数学单元（gl.canvas.height/CELL\u SIZE/2）
);
const width=universe.width（）；
常数高度=宇宙高度（）；
设点=[]；
for（设i=0；i

如果我手动将

单元格

转换为

Float32Array

，则没有问题。我做错什么了吗

下面是上述代码的简化版（屏幕上应该有绿色点，但没有）：

---

如果您实际使用的是twgl，那么，就像它猜测位置为3，颜色为4，texcoords为2一样，twgl猜测使用

normalize:true

的问题，您需要告诉它

normalize:false

从

规范化

布尔-- 规范化

VertexAttributePointer

。如果类型为

Int8Array

或

Uint8Array

则默认为

true

，否则为

false

所以

const数组={
职位：{
数据：新Float32Array（points.flat（）），
尺码：2
},
颜色：{
数据：单元格，
尺寸：1，
类型：gl.UNSIGNED_字节，
normalize:false，//添加了您正在使用的库没有始终默认
未定义的属性。沿
Uint8Array
和
Int8Array
数组类型的某些路径将
normalized
设置为
true

规范化属性缓冲区数据
中的normalize参数if
true
将规范化单位范围内的整数。对于有符号-1到1和无符号0到1

当您使用类型为
Uint8Array
的数组且不定义
normalized的值时，这将导致
color
属性设置为
1/255
`

可以在顶点着色器中将该值缩放回1

顶点着色器示例

attribute float color;

//... code

varying vec4 colorOut;
void main() {

    // ... code

    colorOut = vec4(0, color * 255.0, 0, 1);  // scale the color by 255
}

例子
显示如何
规范化
更改属性数据。红色为未规范化，绿色为。请注意，这不使用任何库


const GL_OPTIONS={alpha:false，depth:false，premultpliedAlpha:false，preserveDrawingBufer:true}；
常量单元格大小=10，网格大小=32，网格宽度=网格大小*单元格大小，单元格=网格大小**2；
常量GL_设置={
get context（）{return canvas.getContext（“webgl”，GL_OPTIONS）}，
获取位置（）{return[“A_pos”，“A_green”，“A_red”，“U_res”]}，
获取顶点（）{return`
属性向量2位；
属性浮动绿色；
属性浮动红色；
均匀矢量2；
变化的v
attribute float color;

//... code

varying vec4 colorOut;
void main() {

    // ... code

    colorOut = vec4(0, color * 255.0, 0, 1);  // scale the color by 255
}