/WebGLGuide

learnning webGL

Primary LanguageJavaScript

《WebGL编程指南》 读书札记

Tips: 可试用 Visual Studio Code 编辑器进行代码编写查阅，搭配 Live Server 插件可以实时查看效果更新

  • 作者：Kouichi Matsuda Rodger lea
  • 译者：谢光磊
  • 2014.6 第一版
  • 书籍网站及其官方源码
  • 手写代码，相比于书籍源代码，结合了自己的理解和写代码的习惯

目录

Chapter 1 - 简介

Chapter 2 - WebGL 入门

  • 2-1 - 用 canvas API 绘制图案
  • 2-2 - 用 webgl API 绘制图案
  • 2-3 - 用 webgl API 绘制一个点
    • 2-3-1 - 使用 GLSL ES 的 attribute 变量
  • 2-4 - 添加事件联动

attribute 只用在顶点着色器，uniform 可以用在顶点和片元着色器

Chapter 3 - 绘制和变换三角形

  • 3-1 - 使用缓冲区对象
  • 3-2 - 绘制三角
  • 3-3 - 绘制矩形（由两个三角形组成）
  • 3-4 - 点平移
  • 3-5 - 点旋转
  • 3-6 - 变换矩阵(Transformation matrix)

常见变换矩阵推导--平移、旋转

Chapter 4 - 高级变换与动画基础

  • 4-1 - 初步使用 Matrix4 对象
  • 4-2 - 复合变换
  • 4-3 - 动画（更新三角形->绘制三角形->再次调用更新，不断重复）

使用多个基本变换组合实现复杂变换，初步了解动画的原理

Chapter 5 - 颜色与纹理

  • 5-1 - 启用多个缓冲区数据
  • 5-2 - 使用步进偏移，将点数据（位置、大小、颜色、纹理等等）集中到一起；使用 varying 将顶点着色器的值传给片元着色器
  • 5-3 - 使用纹理(暂时无法正确绘制纹理)

使用纹理时，只绘制出一个正方形黑块，纹理图片无法绘制，暂时检查不出原因

Chapter 7 - 进入三维世界

  • 7-1 - 绘制三维图形，认识视点和视线
  • 7-2 - 改变视点
  • 7-3 - 认识可视空间
  • 7-4 - 透视投影

Chapter 8 - 光照

  • 8-1 - 光线影响-漫反射
  • 8-2 - 环境光影响
  • 8-3 - 点光源
  • 8-4 - 逐片元光照

本章介绍了几种不同光照类型和反射类型下点三维场景，通过改变着色器以获得更逼真点三维场景

Chapter 9 - 层次模型

  • 9-1 - 单关节模型