23 docs tagged with "图形学"

掌握 WebGL GPGPU 编程范式，使用纹理与 FBO 进行通用 GPU 计算，实现基于 GPU 的粒子系统。

掌握 WebGL Uniform 变量的使用、渲染循环与时间驱动的动画，对比 Three.js 的动画系统。

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

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

深入 WebGL 光照模型，掌握 Lambert 漫反射与 Phong 镜面高光的实现原理，对比 Three.js 光照系统。

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

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

通过 WebGL 片段着色器实现图像处理，掌握卷积运算原理，实现模糊、锐化、边缘检测等滤镜效果。

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

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

掌握 WebGL 离屏渲染技术，理解 FBO 颜色/深度/模板附件，实现后处理效果。

深入 WebGL 性能瓶颈，掌握 Draw Call 优化、Shader 优化、纹理优化等工业级性能调优手段。

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

深入理解 WebGL 的底层运行机制：状态机模型、渲染管线五大阶段以及 MVP 坐标变换链路。

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

深入 WebGL Shader 编译流程、错误处理与调试技巧，理解 Program 链接过程及 Three.js Material 的封装机制。

深入 MVP 矩阵的数学原理与乘法顺序，掌握旋转、缩放、平移变换，对比 Three.js 矩阵系统。

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

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

掌握 WebGL 顶点缓冲区的创建与配置，理解 vertexAttribPointer 五大参数及 Three.js BufferGeometry 的封装原理。

掌握 WebGL 纹理的加载、绑定与 UV 坐标系统，理解采样、过滤与 wrap 模式。

综合运用 WebGL 全栈知识构建完整 3D 场景，对比原生 WebGL 与 Three.js 的工程化实现。

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