WebGL

本文将结合2024 年抖音欢笑中国年的部分项目，重点介绍如何利用 Wasm 和 WebGL 对目前流行的一些前端互动技术进行创新和实践，利用 Wasm 和 WebGL 等新技术方案的特性和优势提升业务性能和流畅度，给用户带来更好的体验。

纹理对象，是将像素（Texels）以数组方式传给 GPU 的对象，常见场景是贴图，就是将图片的数据应用到 3D 物体上。

现在我们来绘制一个立方体，其实本质和绘制二维图形是一样，也是绘制三角形，只是绘制很多个，然后组合起来，作为立方体的几个面，拼在一起就是一个立方体了。

长方体可视空间是一种常用的可视空间，它由正射投影（Orthographic Projection） 产生。此外还有更常用的 透视投影。

纹理映射会根据纹理图像，将光栅化后的每个片元（像素点）设置对应颜色值。这些像素也称为 纹素（Texels, Texture Elements）。

对于一个立方体来说，我们从它的正前方看，不管距离它多远，也只能看到一个二维的正方形。因此我们需要引入 视图矩阵（view matrix）。它的作用就像是一个在特定位置的摄像头。

本节讲了Varying 的能力：将顶点着色器中的变量传递给片元着色器。并演示了使用两个缓冲区对象，位置数据和颜色数据，以及将它们组合成一个缓冲区对象的实现。

Firefox 110 现在可以下载了，带来了以下新功能。

基于Canvas和WebGL，我们可以快速实现各种复杂的前端动画、特效渲染，如果，自己完全原生写法，一个是工作量会比较大，另外，处理不好会引发一些奇怪的问。这里分享几个帮助开发人员更加高效地使用Canvas和WebGL进行绘图的JS库。

WebGL 用的是按列主序（column major order）规则，即按列填充矩阵，从左往右，属于主流。

在 WebGL 中，图元有三种：点、线、以及三角形。今天来说说 WebGL 中的三种图元。

这次绘制三角形，要绘制的点就有三个了，不再是一个。为此我们需要用到缓存区对象（buffer object）。

这是设置片元着色器的 Float 精度为高精度。因为现在桌面端浏览器性能都很好，我们直接设置高精度即可。此外还有 Mediump 中等精度，和 Lowp 低精度，适合用在一些性能羸弱的设备上。精度越低，渲染的效果越差。

这节课我们会通过 JavaScript 给着色器动态提供数据，而不需要重新编译着色器。

WebGL 是浏览器支持的一种绘制图形的 API，是一个标准。我们可以通过 Canvas 元素在网页的特定区域绘制 2D 和 3D 图形。