lucefer/webgl

webgl examples

敲开 WebGL 的神秘之门

各个文件的作用

• utils/webgl-helper.js ：WebGL 辅助库，为开发者提供操作 WebGL 的便捷功能，减少不必要的编码。
• pages : 示例代码
• css : 示例代码中的公共 css。

示例

• 初级入门：从一个点开始 : pages/lesson1.html

  • 源码

• 初级入门：动态绘制点 : pages/lesson1.1.html

  • 源码

• 初级入门：绘制线段 : pages/lesson5.html

  • 源码

• 初级入门：绘制三角形 : pages/lesson2.html

  • 源码

• 初级入门：绘制渐变三角形(多缓冲) : pages/lesson3.html

  • 源码

• 初级入门：绘制渐变三角形(单缓冲) : pages/lesson4.html

  • 源码

• 初级入门：绘制正方形 : pages/lesson6.html

  • 源码

• 初级入门：利用索引绘制正方形 : pages/lesson7.html

  • 源码

• 初级入门：利用三角带绘制正方形 : pages/lesson8.html

  • 源码

• 初级入门：利用三角扇绘制正方形 : pages/lesson9.html

  • 源码

• 初级入门：绘制圆形 : pages/lesson10.html

  • 源码

• 初级入门：绘制环形 : pages/lesson11.html

  • 源码

• 初级入门：立方体 : pages/lesson12.html

  • 源码

• 初级入门：纹理贴图 : pages/lesson13.html

  • 源码

• 初级入门：环境光照 : pages/lesson14.html

  • 源码

• 初级入门：漫反射光照 : pages/lesson15.html

  • 源码

• 初级入门：镜面高光 : pages/lesson16.html

  • 源码

• 深入研究：欧拉角的应用 -- 使用鼠标控制模型旋转

  • 源码

• 深入研究：四元数的应用 -- 使用鼠标控制模型旋转

  • 源码

• 初级入门：球体 : pages/lesson19.html

  • 源码

• 初级入门：棱台体 : pages/lesson20.html

  • 源码

• 初级入门：棱锥体 : pages/lesson21.html

  • 源码

• 深入研究：使用 CSS 实现照片墙

  • 敬请期待

• 深入研究：使用 CSS 实现图片盒

  • 敬请期待

• 深入探究：使用 CSS 实现魔方

  • 敬请期待

• 深入探究：简易机器人

  • 敬请期待

• 深入探究：WebGL 实现天空盒

  • 敬请期待

• 深入研究：帧缓冲 : pages/lesson22.html

  • 源码

• 深入探究：抖音特效实现 : pages/lesson23.html

  • 源码