说起来，

无框架原生 WebGL 入门：把点坐标从 JavaScript 传给 GPU

上一篇我们完成了 WebGL 的第一个最小闭环：在屏幕中间绘制一个红色点。

那一篇有一个关键的特点：点的位置是直接写死在顶点着色器里的。

说白了GPU 并不是从外部读取顶点数据，而是自己在 shader 内部写了：

gl_Position = vec4;

这种方式很适合入门，因为你可以先专注理解渲染流程本身。但它也有一个明显问题：

• 点的位置不能灵活变化
• 如果你要画多个点。写法会越来越别扭
• JavaScript 的数据无法真正参与渲染

一、这篇文章解决什么问题

上一篇的点画在屏幕中心，是因为顶点着色器里写死了：

gl_Position = vec4;

再看这一次改成了，

attribute vec3 aPosition;void main {
gl_Position = vec4;gl_PointSize = /* size */;}

注意这次不再直接写 而是从 aPosition 读取位置。

二、先看运行后的效果

• 页面背景仍然是黑色
• 屏幕上只有一个红色点。但这个点不在中心，而是偏右一点

为什么会偏右？因为这次传入的点数据是：

const pointData = new Float32Array;

三、完整代码跑起来

四、和上一篇对比：新增内容在哪里？

. 新增顶点数据

const pointData=new Float32Array;

. 新增数据传输流程

      关键一句话： 把 pointData  里的坐标传给顶点着色器中的 aPosition .

五、第 步：准备顶点数据

• 为什么用 Float32Array？- WebGL 要求底层以二进制形式接收数值，普通数组无法满足性能需求。
• 怎么验证？- 把 X 改成负数会让图形移到左边；改 Y 会向上移动，改 Z 则会影响深度测试。
• 主要概念 - 点坐标已掌握在 JavaScript 中，可以随时更新。

六、第 步：让顶点着色器接收外部位置

• `attribute` 用来声明顶层输入变量。
• `vec3` 表示该属性由三个 float 分量组成。
• `aPosition` 是变量名，在 JavaScript 中通过 getAttribLocation 找到对应编号。
• `vertexAttribPointer` 决定从缓冲区如何读取这些分量。
• `main` 中把 `aPosition` 转成四维向量并赋值给 `gl_Position`。
⚠️ 常见错误提示：如果忘记加 “float” 或者 “int” 类型，会导致编译失败。若位置参数为字符串，则会报错 “Attribute 'aPosition' must be of type 'vec...'”。提示 ：始终确保属性名称与 GLSL 声明完全一致，包括大小写！如果出现 “Unknown uniform variable” 或 “Attribute not found” 的错误，就检查此处。text Error compiling vertex shader: 至于ERROR，OpenGL ES GLSL program link failed. 此时检查 `.getAttribLocation`。`.enableVertexAttribArray`,`.vertexAttribPointer` 是否正确执行。javascript // 示例调试代码 if{console.error;不过，} "