linear-webgl：想学 WebGL 却没案例？这份极客练习册帮你补上！

很多初学者在学习 WebGL 时都会遇到一个共同问题：

• 教程要么只讲概念，没有完整案例；
• 要么一上来就是 Three.js、Babylon.js 等封装库，虽然简单，但背后原理看不清。

如果你想要真正理解 WebGL 的底层逻辑，又苦于找不到合适的案例，那么 linear-webgl (opens in a new tab) 就是你要的答案。

这是开发者 cedric-h 整理的一份 原生 WebGL 演示集。几十个小 demo，每一个都是单文件 HTML + JS，没有任何封装，代码直白到一眼就能看懂。它就像一本“WebGL 极客练习册”，让你一步步掌握从三角形到复杂交互的全部过程。

为什么推荐 linear-webgl？

1. 极简、直白的代码风格

• 每个 demo 就是一个 .html 文件，直接打开就能跑。
• 不依赖任何库，所有功能都来自原生 WebGL API。

2. 丰富而系统的示例集合

仓库包含数十个案例，既有入门三角形，也有复杂的交互控件：

• 基础图形：tri.html（三角形）、cube.html（立方体）、cube-grid.html（立方体网格）。
• 纹理与光照：如何加载图片纹理、控制光源，帮助理解 Shader 的作用。
• 相机与交互：cube-camera.html、cube-gizmos.html，演示了视角切换、模型编辑器的实现。
• 性能与效果：scroll_thick.html 用来测试滚动性能，验证大规模绘制下的渲染表现。
• 进阶功能：gizmos、撤销/重做、节点布局等，让你看到 WebGL 不只是画图，还能做 UI 工具。

3. 开源免费，学习成本为零

• 完全开源，直接 clone 即可使用。

• 无需任何配置，浏览器就是运行环境。

用 Live Server 跑Demo

克隆仓库

git clone https://github.com/cedric-h/linear-webgl.git
cd linear-webgl

打开 VS Code 并安装 Live Server 插件

在 VS Code 插件市场搜索并安装 Live Server。

运行示例

• 在 VS Code 中右键 tri.html → 选择 “Open with Live Server”。

• 浏览器自动打开页面，你会看到用 WebGL 绘制的第一个三角形 🎉。

实践案例

展示几个使用webgl实现的案例效果。

立方体旋转

节点展示

立方体编辑

绘画

总结

linear-webgl 不只是一个 demo 集合，而是一份 原生 WebGL 学习手册：

• 循序渐进：从最简单的三角形，到立方体、相机、交互控件，覆盖完整学习曲线。

• 直击底层：没有封装和黑箱，代码一眼就能看懂 GPU 的工作方式。

• 自由实验：每个 demo 都能随改随跑，是探索渲染原理和验证想法的绝佳工具。

如果你想真正掌握 WebGL 的核心，而不仅仅停留在封装库的使用层面，那么 linear-webgl 会是你最值得收藏的起点。

🔗 GitHub 仓库： cedric-h/linear-webgl (opens in a new tab)