Key Examples
for WebGL Tutorial
We'll build a necessary and reasonable framework for the tutorial, step by step.
基础篇
- HTML5网页模板
- 铺满浏览器视口的canvas
- 一个简单的WebGL应用
- 纯色三角形(WebGL渲染管道)
- 创建并使用WebGLUtils类
- 两个VBOs
- Viewport-0(区分缓冲区尺寸与浏览器客户端尺寸)
- Viewport-1(应用devicePixelRatio)
- Viewport-2(设置缓冲区比例)
- Viewport-3(添加resize事件)
- Viewport(高清、动态按比例缩放、Enter键切换全屏)
- 多彩三角形(aPosition, aColor)
- 复合VBO(一个VBO同时绑定两个顶点属性)
- 复合VBO(封装与重构)
- 两个的简单VBOs(重构后的两个VBOs分别绑定各自的顶点属性)
- WebGL Playground(WebGLLiveEditor)
WebGL 2.0
WebGL 2.0的新特性: VAO
- 升级到WebGL 2.0(着色器语法、VAO)
- 渲染VAO(封装:createVAO, renderVAO)
- 多个VAOs(封装:createPosVBO, createColorVBO, createPosColorVBO)
渲染基本图元
辅助工具类: ArrayExtensions.js, GLColors, 逐步重构的WebGLUtils.
渲染复杂的几何图形
辅助工具类:GLUHolder, WebGLBufferUtils, CanasUtils,WebGLUtils.
- drawElements方法
- 封装IBO(createIBO, vao.ibos)
- wireframe(solidVAO, wireframeVAO, renderVAO(wireframeVAO, true))
- PCPanel面板
- WebGLBuffer对象信息
- getBufferSubData方法详析
- 标注顶点信息
Meshes
- simple meshes(SolidMesh, WireframeMesh)
- face mesh(FaceMesh)
- regular polygons(三角函数)
- regular polygons 1(bug fixed)
- regular polygons mesh(RegularPolygonMesh)
- circular mesh(CircularMesh)
3D Worlds
- 模型变换(全局变换)
- 模型独立变换(面向对象解决方案)
- 视图变换(独木不成林)
- 投影、视图、模型变换(在视锥体内渲染)
- 投影第二版(同步视口及投影变换)
- 单视口
- 居于右边的单视口
- 居于顶部的单视口
- 左视口内容消失的双视口
- 正确的双视口
应用框架
- 全功能应用(全面应用前面所学)
- Viewport Info(打印Viewport类及可用快捷键)
- ViewportManager Info(打印ViewportManager类及可用快捷键)
- Camera Info(打印Camera类、键盘快捷键,及鼠标操作)
- Meshes(渲染目前所定义的所有网格物体)
- 单视口(多种Meshes共同亮相)
- 视锥体(Mesh的部份超出视锥体范围)
Animations
(Coming soon)
Textures
(Coming soon)
Lightings
(Coming soon)
Picking
(Coming soon)
