WebGL 编程指南

test

读《WebGL 编程指南》，相关笔记，持续记录

• 前端笔记
• 2025-03-27
• 121热度
• 1评论
  

摘录声明

1. 文章内容由程序自动从本人阅读 《WebGL 编程指南》 过程中，所记录的知乎笔记同步而来，如有侵权请在下方留言告知！
   

复制代码

《WebGL 编程指南》
1. WebGL 的起源

• 在个人计算机上使用最广泛的两种三维图形渲染技术是 Direct3D 和 OpenGL。Direct3D 是微软 DirectX 技术的一部分，是一套由微软控制的编程接口（API），主要用在 Windows 平台；而 OpenGL 由于其开放和免费的特性，在多种平台上都有广泛地使用：它可以在 Macintosh 或 Linux 系统的计算机、智能手机、平板电脑、家用游戏机（如 PlayStation 和 Nintendo）等各种电子设备上使用。Windows 对 OpenGL 也提供了良好的支持，开发者也可以用它来代替 Direct3D。
• 可编程着色器方法 （programmable shader functions）。
• OpenGL ES 2.0 基于 OpenGL 着色器语言 （GLSL），因此后者又被称为 OpenGL ES 着色器语言 （GLSL ES）。

2. 着色器是什么？
• 顶点着色器 （Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
• 着色器是什么？要使用 WebGL 进行绘图就必须使用着色器。在代码中，着色器程序是以字符串的形式「嵌入」在 JavaScript 文件中的，在程序真正开始运行前它就已经设置好了。这么说可能有些复杂，我们一步一步来解释。WebGL 需要两种着色器：
● 顶点着色器 （Vertex shader）：顶点着色器是用来描述顶点特性（如位置、颜色等）的程序。顶点（vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
● 片元着色器 （Fragment shader）：进行逐片元处理过程的程序。片元（fragment）是一个 WebGL 术语，可以将其理解为像素

3. 初始化着色器
• WebGL 程序包括运行在浏览器中的 JavaScript 和运行在 WebGL 系统的着色器程序这两个部分。

4. 顶点着色器
• 齐次坐标

5. 片元着色器
• 片元 就是显示在屏幕上的一个像素（严格意义上来说，片元包括这个像素的位置、颜色和其他信息）。

6. 顶点着色器
• gl_Position 表示顶点的位置（这里，就是要绘制的点的位置），gl_PointSize 表示点的尺寸
• gl_Position 变量必须被赋值，否则着色器就无法正常工作。相反，gl_PointSize 并不是必须的，如果你不赋值，着色器就会为其取默认值 1.0。

7. 片元着色器
• 片元着色器将点的颜色赋值给 gl_FragColor 变量，该变量是片元着色器唯一的内置变量，它控制着像素在屏幕上的最终颜色

8. WebGL 坐标系统
• 在 WebGL 中，当你面向计算机屏幕时，X 轴是水平的（正方向为右），Y 轴是垂直的（正方向为下），而 Z 轴垂直于屏幕（正方向为外）

9. 使用 attribute 变量
• attribute 变量 传输的是那些与顶点相关的数据，而 uniform 变量 传输的是那些对于所有顶点都相同（或与顶点无关）的数据。

10. 示例程序（HelloPoint2.js）
• attribute 变量必须声明成全局变量，数据将从着色器外部传给该变量。

11. WebGL 坐标系统
• WebGL 的坐标系和 ＜canvas＞ 绘图区的坐标系不同，需要将前者映射到后者。

12. 使用 attribute 变量
• attribute 变量是一种 GLSL ES 变量，被用来从外部向顶点着色器内传输数据，只有顶点着色器能使用它。

13. 命名规则
• 所有的 attribute 变量都以 a_前缀开始，所有的 uniform 变量都以 u_开始，这样从变量的名字就可以轻易辨认出其类型。

14. 获取 attribute 变量的存储位置
• 使用 gl.getAttribLocation（）来获取 attribute 变量的地址
• WebGL 就会对着色器进行解析，辨识出着色器具有的 attribute 变量，每个变量都具有一个存储地址，以便通过存储地址向变量传输数据。

15. uniform 变量
• uniform 变量用来从 JavaScript 程序向顶点着色器和片元着色器传输「一致的」（不变的）数据
• 向 uniform 变量传数据的方式与向 attribute 变量传数据相似：首先获取变量的存储地址，然后在 JavaScript 程序中按照地址将数据传递过去。

16. 使用缓冲区对象
• 缓冲区对象是 WebGL 系统中的一块存储区


uniapp开发笔记，持续记录
2021年12月12日 1247
Uniapp



记录一些以前没见过的JS语法
2021年09月18日 1060
JS笔记



如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用？
2025年02月25日 125
canvas



Stylelint该如何配置？Stylelint使用以及相关配置说明
2022年07月31日 1800
JS笔记



如何用JS实现在网页上通过鼠标移动批量选择元素的效果？
2022年11月11日 1570
JS笔记



不使用构建工具，如何对css进行模块化？
2022年08月20日 1285
CSS笔记



Vue 2.7 “Naruto”发布，新特性介绍
2022年07月23日 1268
Vue学习



Vue Ant Admin学习笔记，持续记录
2022年01月27日 1222
Vue学习



Ant Design Vue自定义主题失效解决办法
2022年06月20日 1434
Vue学习