webgl

讲清 WebGL 的技术定位与能力边界，说明 WebGL 1.0/2.0 与 OpenGL ES 2.0/3.0 的版本对应与能力裁剪，并给出与 Canvas 2D、WebGPU 的选型建议。

讲清如何判断浏览器与设备是否支持 WebGL、如何读取显卡与扩展信息，以及如何搭好本地静态服务器与浏览器调试工具链，避免上线后才发现设备不兼容。

讲清 WebGL 上下文的创建方式、渲染缓冲与显示尺寸的区别、设备像素比适配写法，并盘点 WebGL 在数据可视化、3D 展示、在线游戏与数字孪生中的落地场景。

梳理 WebGL 从顶点着色器到片元着色器的完整数据流转，给出顶点着色器最小可用实现，讲清裁剪坐标范围与 gl_Position 的赋值要求。

讲清片元着色器如何输出颜色、varying 如何插值，以及 attribute 与 uniform 在数据传递语义、更新频率和使用场景上的区别与选择依据。

梳理着色器从创建、编译、附加到链接为程序的完整流程，给出编译日志与链接日志的读取方法，以及常见 GLSL 报错的定位思路。

讲清顶点缓冲对象的创建与上传时机、STATIC_DRAW 与 DYNAMIC_DRAW 的选择，以及用 vertexAttribPointer 正确描述顶点布局的完整写法与常见错位问题。

对比交错布局与分离布局的存储结构与缓存效率，讲清索引缓冲如何复用顶点降低数据量，并给出顶点缠绕顺序与 drawElements 的完整用法。

讲清用 bufferSubData 与 DYNAMIC_DRAW 更新逐帧顶点数据的方法与适用边界，并解释 WebGL 全局状态机模型与绑定缓存对绘制时机的影响。

讲清齐次坐标为什么用四维向量表达平移与透视，以及模型矩阵如何把顶点从局部坐标变换到世界坐标，含矩阵拼接顺序与常见误区。

讲清视图矩阵如何把世界坐标转换到相机坐标，以及透视投影矩阵的视场角、宽高比与远近裁剪面配置方式，含近平面取值对深度精度的影响。

讲清正交投影的适用场景与配置方式，以及为什么法线不能用模型矩阵直接变换，必须用法线矩阵（逆转置矩阵）才能保持正确朝向。

讲清纹理对象的创建与图片上传流程，以及 UV 坐标如何把二维贴图对应到三维顶点，含图像翻转、纹理单元绑定与 UNPACK_FLIP_Y 配置。

讲清放大与缩小过滤的取值差异、mipmap 的作用与生成条件，以及重复、镜像重复与边缘钳制三种环绕模式的适用场景与配置方式。

讲清跨域图片的 CORS 配置与纹理上传的正确时机，以及 RGBA、LUMINANCE 等纹理格式的取舍、透明度与颜色空间处理要点。

讲清 TRIANGLES、TRIANGLE_STRIP、LINES、POINTS 等绘制类型的顶点消耗与适用场景，以及用循环按半径、分段数生成矩形、圆环、网格等参数化顶点的方法。

讲清用索引把顶点组成网格的规则、缠绕顺序如何决定正面朝向，以及面剔除的开启方式与常见失效原因。

讲清如何把鼠标与触摸事件的屏幕坐标转换为 WebGL 裁剪坐标，并实现拖拽旋转、滚轮缩放等基础交互，含设备像素比与画布偏移的正确处理。

讲清上下文丢失的触发场景与 webglcontextlost 事件处理、资源重建流程，以及 getError 错误码的含义与逐步定位方法。

给出黑屏的按层排查清单（着色器、顶点数据、矩阵、视口、状态），讲清不同设备渲染结果不一致的常见成因，以及用视口与辅助线验证坐标映射的方法。