WebGL Key Examples
for Tutorials
We'll build a necessary and reasonable framework for the tutorial, step by step.
基础篇
- HTML5网页模板
- 一个简单的WebGL应用
- 纯色三角形(WebGL渲染管道)
- 创建WebGLUtils类
- 两个VBOs
- Viewport(高清、全屏)
- 多彩三角形(aPosition, aColor)
- 复合VBO(一个VBO同时绑定两个顶点属性)
- 简单VBO(两个VBOs分别绑定各自的顶点属性)
WebGL 2.0
WebGL 2.0的新特性: VAO
- 升级到WebGL 2.0
- 渲染VAO(createVAO, renderVAO)
- 多个VAOs(createPosVBO, createColorVBO, createPosColorVBO)
渲染基本图元
辅助工具类: ArrayExtensions.js, GLColors.js, WebGLUtils.js.
渲染复杂的几何图形
辅助工具类:GLUHolder, WebGLBufferUtils, CanasUtils,逐步重构的WebGLUtils.
- drawElements方法
- 封装VAO(createIBO, vao.ibos)
- wireframe(solidVAO及wireframeVAO)
- 标注顶点信息
Meshes
- simple meshes(各种基本的Mesh类)
- face mesh(FaceMesh)
- regular polygons(三角函数)
- regular polygons 1(bug fixed)
- regular polygons mesh(RegularPolygonMesh)
- circular mesh(CircularMesh)
3D Worlds
- 模型变换(全局变换)
- 模型独立变换(面向对象解决方案)
- 视图变换(独木不成林)
- 投影、视图、模型变换(解决前面问题)
- 投影、视图、模型变换(第二版)
- 多视口
Animations
(Coming soon)
Textures
(Coming soon)
Lightings
(Coming soon)
Picking
(Coming soon)
Resources
WebGL
CSS
- CSS Grid 1.0 Specification: https://www.w3.org/TR/css-grid-1/