WebGL Tutorial
and more

WebGL Key Examples
for Tutorials

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

基础篇

  1. HTML5网页模板
  2. 一个简单的WebGL应用
  3. 纯色三角形(WebGL渲染管道)
  4. 创建WebGLUtils类
  5. 两个VBOs
  6. Viewport(高清、全屏)
  7. 多彩三角形aPosition, aColor
  8. 复合VBO(一个VBO同时绑定两个顶点属性)
  9. 简单VBO(两个VBOs分别绑定各自的顶点属性)

WebGL 2.0

WebGL 2.0的新特性: VAO

  1. 升级到WebGL 2.0
  2. 渲染VAOcreateVAO, renderVAO
  3. 多个VAOscreatePosVBO, createColorVBO, createPosColorVBO

渲染基本图元

辅助工具类: ArrayExtensions.js, GLColors.js, WebGLUtils.js.

  1. GLColors用例
  2. 线段
    1. 两点一线
    2. 不闭合的线段
    3. 闭合的线段
  3. 三角形
    1. 独立的三角形
    2. 共边的三角形
    3. 共点的三角形

渲染复杂的几何图形

辅助工具类:GLUHolder, WebGLBufferUtils, CanasUtils,逐步重构的WebGLUtils.

  1. drawElements方法
  2. 封装VAOcreateIBO, vao.ibos
  3. wireframesolidVAOwireframeVAO
  4. 标注顶点信息

Meshes

  1. simple meshes(各种基本的Mesh类)
  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. 多视口

系统集成

  1. 全功能应用(全面应用前面所学)
  2. 单视口(多种Meshes共同亮相)
  3. 视锥体(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

CSS

  1. CSS Grid 1.0 Specification: https://www.w3.org/TR/css-grid-1/