Web编程技术营地
研究、演示、创新

Key Examples
for WebGL Tutorial

We'll build a necessary and reasonable framework for the tutorial, step by step.

基础篇

  1. HTML5网页模板
  2. 铺满浏览器视口的canvas
  3. 一个简单的WebGL应用
  4. 纯色三角形WebGL渲染管道)
  5. 创建并使用WebGLUtils类
  6. 两个VBOs
  7. Viewport-0(区分缓冲区尺寸与浏览器客户端尺寸)
  8. Viewport-1(应用devicePixelRatio
  9. Viewport-2(设置缓冲区比例)
  10. Viewport-3(添加resize事件)
  11. Viewport(高清、动态按比例缩放、Enter键切换全屏)
  12. 多彩三角形aPosition, aColor
  13. 复合VBO(一个VBO同时绑定两个顶点属性)
  14. 复合VBO(封装与重构)
  15. 两个的简单VBOs(重构后的两个VBOs分别绑定各自的顶点属性)
  16. WebGL PlaygroundWebGLLiveEditor

WebGL 2.0

WebGL 2.0的新特性: VAO

  1. 升级到WebGL 2.0(着色器语法、VAO
  2. 渲染VAO(封装:createVAO, renderVAO
  3. 多个VAOs(封装:createPosVBO, createColorVBO, createPosColorVBO

渲染基本图元

辅助工具类: ArrayExtensions.js, GLColors, 逐步重构的WebGLUtils.

  1. GLColors用例(随机填充颜色)
  2. 线段
    1. 两点一线
    2. 不闭合的线段
    3. 闭合的线段
  3. 三角形
    1. 独立的三角形
    2. 共边的三角形
    3. 共点的三角形

渲染复杂的几何图形

辅助工具类:GLUHolder, WebGLBufferUtils, CanasUtilsWebGLUtils.

  1. drawElements方法
  2. 封装IBOcreateIBO, vao.ibos
  3. wireframesolidVAO, wireframeVAO, renderVAO(wireframeVAO, true)
  4. PCPanel面板
  5. WebGLBuffer对象信息
  6. getBufferSubData方法详析
  7. 标注顶点信息

Meshes

  1. simple meshesSolidMesh, WireframeMesh
  2. face meshFaceMesh
  3. regular polygons(三角函数)
  4. regular polygons 1(bug fixed)
  5. regular polygons meshRegularPolygonMesh
  6. circular meshCircularMesh

3D Worlds

  1. 模型变换(全局变换)
  2. 模型独立变换(面向对象解决方案)
  3. 视图变换(独木不成林)
  4. 投影、视图、模型变换(在视锥体内渲染)
  5. 投影第二版(同步视口及投影变换)
  6. 单视口
  7. 居于右边的单视口
  8. 居于顶部的单视口
  9. 左视口内容消失的双视口
  10. 正确的双视口

应用框架

  1. 全功能应用(全面应用前面所学)
  2. Viewport Info(打印Viewport类及可用快捷键)
  3. ViewportManager Info(打印ViewportManager类及可用快捷键)
  4. Camera Info(打印Camera类、键盘快捷键,及鼠标操作)
  5. Meshes(渲染目前所定义的所有网格物体)
  6. 单视口(多种Meshes共同亮相)
  7. 视锥体(Mesh的部份超出视锥体范围)

Animations

(Coming soon)

Textures

(Coming soon)

Lightings

(Coming soon)

Picking

(Coming soon)

Resources

WebGL

  1. WebGL 1.0 Specification
  2. WebGL 2.0 Specification