WebGL：基础练习 / 简单学习 / demo / canvas3D
一、前置内容
canvas：理解canvas / 基础使用 / 实用demo-CSDN博客
WebGL：开始学习 / 理解 WebGL / WebGL 需要掌握哪些知识 / 应用领域 / 前端值得学WebGL吗_webgl培训-CSDN博客
二、在线运行HTML
用来运行WebGL代码，粘贴--运行（有时候不太好用，莫名报错）
在线运行Html5
三、获取画布、获取上下文环境对象
//获取画布元素
var canvas = document.getElementById('canvas')
//获取到元素的上下文环境对象
var webgl = canvas.getContext('webgl')
三、WebGL练习
demo来至AI
3.1、绘制正方形
在这个 Demo 中，我们首先获取了 WebGL 上下文，然后定义了一个顶点着色器和一个片元着色器。接着，我们创建了着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。
然后，我们创建了一个顶点缓冲区，并将顶点坐标存储在这个缓冲区中。我们启用了顶点属性，并将顶点缓冲区对象绑定到这个属性上。
接下来，我们设置了视口大小，并清空了画布。最后，我们使用 gl.drawArrays() 方法绘制了一个正方形。
需要注意的是，绘制图形时，我们使用的是 gl.TRIANGLE_FAN，它表示绘制一个三角形扇形，也就是一个由五个三角形组成的正方形。这样可以减少绘制的顶点数量，提高性能。
WebGL 基础 Demo
3.2、清屏
这个 Demo 创建了一个空的 WebGL 上下文并在 canvas 上进行了清屏操作。可以通过更改 clearColor() 的参数来修改屏幕上的颜色。
WebGL Demo
3.3、WebGL 三角形渲染
它包括以下步骤：
获取 canvas 元素和 WebGL 上下文对象。
定义顶点着色器和片段着色器。
创建顶点着色器和片段着色器对象。
创建着色器程序对象。
定义三角形顶点坐标并写入缓冲区。
获取顶点着色器中 aPosition 的地址并启用。
清除画布并绘制三角形。
WebGL Demo
3.4、WebGL 绘制了一个红色的三角形
WebGL 绘制了一个红色的三角形，该三角形的顶点坐标分别为 (0.0, 0.5)、(-0.5, -0.5) 和 (0.5, -0.5)。在绘制过程中，我们首先编译和链接了顶点着色器和片元着色器，并创建了一个着色器程序。然后我们创建了一个顶点缓冲，并将顶点数据绑定到该缓冲上。接下来我们通过顶点属性将顶点数据传递给顶点着色器，在片元着色器中设置了颜色，并通过调用 gl.drawArrays(gl.TRIANGLES, 0, 3) 绘制了该三角形。
WebGL Demo
3.5、WebGL 绘制颜色渐变矩形
在这个 Demo 中，我们首先创建了一个 WebGL 上下文，并定义了一个顶点着色器和一个片元着色器。接着，我们创建了一个着色器程序对象，并将顶点着色器和片元着色器附加到这个程序对象上，并进行链接。
然后，我们创建了一个顶点缓冲区，并将顶点坐标存储在这个缓冲区中。我们还设置了视图和投影矩阵，并使用着色器程序。接下来，我们启用了顶点属性，并将顶点缓冲区绑定到这个属性上。最后，我们使用 gl.drawArrays() 方法绘制了一个矩形。
在片元着色器中，我们使用了 mix() 函数来计算每个像素的颜色，从而实现了颜色渐变效果。我们还定义了两个 uniform 变量 u_colorA 和 u_colorB，用于控制矩形的颜色。
在这个 Demo 中，我们只是绘制了一个简单的颜色渐变矩形，但你可以根据需要对其进行修改和扩展。
WebGL Demo
3.6、绘制一个彩色三角形
WebGL Demo
3.7、旋转的立方体
本例的代码中，我们使用 THREE.js 库创建了一个场景，相机和渲染器。我们还创建了一个立方体，并将其添加到场景中。最后，我们创建了一个动画函数，使立方体绕 X 和 Y 轴旋转，并在每个帧中更新渲染器。
运行上面的代码，您将在浏览器中看到一个绿色的立方体，它在不断旋转。
WebGL Demo
3.8、彩色三角形
获取 WebGL 上下文；
编写顶点着色器和片元着色器代码；
初始化着色器程序和获取 attribute 变量和 uniform 变量的位置；
准备顶点数据和颜色数据，并创建对应的缓冲区；
设置绘制参数，包括启用 attribute 位置、绑定缓冲区和设置指针；
设置投影矩阵和模型视图矩阵，并绘制三角形。
WebGL Demo
3.9、绘制圆形
获取 canvas 元素和绘图上下文
定义 顶点着色器 和 片元着色器，顶点着色器用于处理顶点数据，片元着色器用于处理每个像素的颜色值
创建 顶点着色器 和 片元着色器，并编译
创建 程序对象，并将 顶点着色器 和 片元着色器 附加到程序对象上
链接程序对象，并使用
定义圆形顶点数据（分割成 n 个三角形）
创建缓冲对象并绑定到目标上
向缓冲对象写入数据
获取 属性变量 位置
设置 属性变量，并启用
获取 uniform 变量位置
设置背景颜色
清空画布
绘制圆形
这个 demo 绘制了一个红色的圆形。
WebGL Demo
四、过程记录
记录一、WebGL是基于canvas吗
WebGL是基于HTML5中的canvas元素的。WebGL使用OpenGL ES 2.0规范来编写3D图形。WebGL的API允许JavaScript在canvas元素上绘制各种类型的3D图像，并使用GPU加速。所以，可以说WebGL是基于canvas，但它使用了更高级的图形处理技术来实现复杂的3D图像。
记录二、理解 canvas3D
canvas3D是HTML5的一个新特性，它提供了对3D图形的支持，使得在网页上实现3D效果成为可能。canvas3D是基于WebGL实现的，WebGL是一种基于OpenGL ES 2.0的图形库，它可以在网页中实现高性能的3D图形渲染。
使用canvas3D，您可以创建和操作3D对象、应用材质和贴图、添加光照和阴影等等。它提供了一组丰富的API，可以用于绘制和操作3D图形，包括对物体的旋转、缩放、平移等操作。
虽然canvas3D目前还处于实验阶段，但它已经得到了许多浏览器的支持，未来可能会成为HTML5标准的一部分。如果您对3D图形编程感兴趣，可以尝试使用canvas3D来实现您的项目。
----文心一言
五、欢迎交流指正
六、参考链接
什么是WebGL? | 码上动力
【精选】【WebGL】简单入门教程_webgl教程-CSDN博客