WebGL浮点坐标转裁剪空间及最多渲染4个点问题咨询

裁剪空间坐标是WebGL光栅化的前置坐标，常规转换流程分为三步：

• 模型空间→世界空间：将物体本地坐标乘以模型矩阵，得到世界坐标系下的位置。
• 世界空间→视图空间：将世界坐标乘以视图矩阵，转换为相机视角下的坐标（相机默认位于原点，朝向-z方向）。
• 视图空间→裁剪空间：将视图坐标乘以投影矩阵（正交/透视投影均可），得到齐次裁剪空间坐标。

最终得到的裁剪空间坐标为齐次坐标（x,y,z,w），WebGL会自动执行透视除法（x/w、y/w、z/w）转换为NDC（归一化设备坐标，范围[-1,1]），再映射到屏幕空间。如果直接传入裁剪空间坐标（如你的代码中直接将position赋值给gl_Position），则无需额外转换，只需确保坐标分量落在[-w, w]范围内即可。

你的代码无法渲染超过4个点，核心原因如下：

1. 顶点数据长度与绘制数量不匹配 #

你设置顶点属性类型为gl.FLOAT（每个占4字节），且size=2（每个顶点需要2个float），因此每个顶点需占用8字节存储空间。

你的Uint8Array数据总长度为32字节，刚好容纳4个顶点（4×8=32字节）。若要渲染更多点（如6个），需：

• 扩展Uint8Array，补充对应数量的顶点数据（每个顶点新增8字节的float字节序列）；
• 修改gl.drawArrays的第三个参数（顶点数量）为对应值。

2. 缓冲区内存限制（若存在） #

如果创建缓冲区时，初始分配的内存小于后续写入的数据量（比如初始用gl.bufferData分配32字节，却尝试写入48字节数据），bufferSubData会无法写入超出部分，导致后续顶点无有效数据，最终无法渲染或渲染出的点因坐标非法被裁剪。

解决方法：

• 创建缓冲区时分配足够内存（例如gl.bufferData(gl.ARRAY_BUFFER, 64, gl.DYNAMIC_DRAW)，预留64字节空间）；
• 确保bufferSubData写入的数据总长度不超过缓冲区分配大小。

另外需注意：后续添加的顶点坐标需落在裁剪空间范围内（即gl_Position的x/y分量在[-1,1]之间，齐次坐标需保证x/y/z ∈ [-w, w]），超出范围的点会被WebGL裁剪，无法显示在屏幕上。

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