13 docs tagged with "图形学"

破除"学 WebGL 必须精通高等数学"的常见误解，从前端工程师的实际需求出发，划定学习边界：哪些数学必须掌握（向量、矩阵、坐标系）、哪些只需会用公式、哪些完全不需要（微积分/线性代数理论），并给出 6 周学习路径建议。

图形学数学基础第 0 周，速通单位圆定义、三角函数（sin/cos/tan）公式与图像、弧度制与角度制互转，结合 WebGL/Three.js 中的旋转与曲线绘制场景，面向零基础或想补齐数学短板的前端工程师。

光照模型、Three.js 材质对比、阴影与 PBR

前端图形学课程地图，涵盖 canvas、WebGL、GLSL、Three.js、Three.js 源码、WebGPU 六套互补课程。

图形学数学基础第 1 周，系统讲解向量的定义、模长、点积、叉积与归一化，以及左手/右手坐标系、Three.js 中的 Object3D.position 与 Camera 空间，结合 Three.js 实战场景。

图形学数学基础第 3 周，建立对渲染管线的整体认知：顶点处理→图元装配→光栅化→片段着色→输出合并，深入理解顶点(Vertex)与片段(Fragment)的区别、深度测试(Z-Buffer)与混合模式(Blending)的底层原理。

3D 图形学的坐标空间、MVP 矩阵与投影

图形学数学基础第 5-6 周综合实战：Draw Call 优化、几何体合并(Geometry Merging)、InstancedMesh 复用、Frustum Culling 与 LOD 策略，串联前 4 周数学与渲染知识，回顾 Three.js 性能优化的完整方法论。

数学与图形学入门课程，6 周从三角函数、向量、矩阵、坐标变换到渲染管线与着色器编程，结合 Three.js 与 WebGL 实例，面向零基础或想补齐数学短板的前端工程师。

图形学数学基础第 4 周，深入 GLSL 着色器编程：基本类型（float/int/bool）、Uniform 与 Attribute 的区别、Vertex Shader 与 Fragment Shader 的协作方式，以及如何用 ShaderMaterial 在 Three.js 中替换默认材质。

图形学数学基础第 2 周，深入讲解 4x4 矩阵的结构、平移/旋转/缩放矩阵的推导、矩阵乘法顺序（左乘 vs 右乘），以及 Three.js 中 Object3D.matrix 的工作机制，帮你建立坐标变换的几何直觉。

从直观对比与底层逻辑理解矩阵在图形学中的「万能压缩」作用：旋转、缩放、平移打包成 16 个数字

把 RGB 和 HSB 看作两种不同坐标系：RGB 是给机器（屏幕）看的 RGB Color Cube 立方体，HSB 是给人类（直觉）看的极坐标。讲解 RGB/HSV/HSL 的数学转换、WebGL 着色器中常见的色彩处理技巧，以及如何用 Shader 实现色彩空间互转。