WebGL Fundamentals

简介

WebGL Fundamentals 是一个专注于从零开始系统讲解 WebGL 技术的开源教程网站。该站点秉持 “自底向上，拒绝魔法（WebGL from the ground up. No magic）” 的核心理念，旨在帮助开发者彻底理解 WebGL 的本质与运行机制。与网络上大量陈旧、过时的 OpenGL 衍生资料不同，本教程内容全新编写，摒弃了过时的开发范式，提供纯粹且现代化的 WebGL 编程指南。网站同时提供英语、简体中文、日语、韩语、法语、波兰语、葡萄牙语、俄语及乌克兰语等多语言版本，方便全球开发者无障碍学习。

核心内容与功能架构

网站内容以系列文章形式组织，覆盖 WebGL 开发的完整知识体系与工程实践：

• 基础原理与管线机制：深入剖析 WebGL 工作原理、状态图（WebGL State Diagram）及渲染核心逻辑。
• 着色器与 GLSL 编程：系统讲解顶点着色器与片段着色器的编写方法，掌握 GLSL 语言基础。
• 2D 与 3D 图形变换：详细拆解 2D 平移、旋转、缩放及矩阵数学运算；深入 3D 正交投影、透视投影、摄像机控制与场景图（Scene Graphs）组织。
• 光照、纹理与几何处理：涵盖方向光、点光源、聚光灯实现，阴影技术，Lathe 几何体生成，OBJ/MTL 模型加载，以及多纹理混合、环境映射、天空盒与投影映射等高级纹理技术。
• 进阶技术与性能优化：包含 GPGPU 计算实践、实例化渲染（Instanced Drawing）、索引顶点优化（gl.drawElements）、ShaderToy 技巧及常见反模式（Anti-Patterns）解析。
• 实用工具与参考手册：内置轻量级 WebGL 辅助库 TWGL 的 API 文档，提供完整的函数参考（Attributes、Texture Units、Framebuffers、readPixels 等）、常见问题解答（Q&A）及跨平台兼容性指南。

注：若需学习 WebGL2 进阶特性，可访问官方姊妹站点 webgl2fundamentals.org。

适用场景

• WebGL 初学者：希望摆脱“复制粘贴”代码的依赖，建立扎实图形学底层基础的学习者。
• 前端/图形工程师：需要深入理解 WebGL 渲染管线、渲染状态管理及性能调优的开发者。
• 技术栈迁移者：正在从传统 OpenGL 教程转向现代 WebGL 标准，或计划升级至 WebGL2 的开发者。
• 项目快速查阅：作为日常开发中的纹理映射、矩阵计算、光照模型与优化技巧的速查参考手册。

补充信息

本项目由开发者 greggman 主导维护，目前已积累超过 1200 次社区贡献，完全开源并欢迎开发者通过 GitHub 进行修复、分支与贡献（Fix, Fork, Contribute）。适合作为 WebGL 系统学习与工程实践的首选参考资源。