Skip to content

MrZJD/webgl

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 12, 2017
d68a8b0 · Feb 12, 2017

History

3 Commits
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017
Feb 12, 2017

Repository files navigation

《WebGL编程指南》书籍学习札记


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

目录

Chapter 1 - 简介

  • WebGL基于OpenGL ES 2.0

Chapter 2 - 初步

attribute uniform varying 的区别与联系

  1. attribute : 只能在vertex shader中使用,用于逐定点操作,接受外部不停地传入的值。
  2. uniform : 在vertex/fragment shader都可以使用,用于接受外部的限定值,在逐顶点绘制的过程,不能改变。
  3. varying : 用于vertex和fragment之间的沟通。

Chapter 3 - 三角形

  • lesson1 - 使用ARRAY_BUFFER缓冲区绘制三个点
  • lesson2 - 绘制三角形
  • lesson3 - 认识基本绘制单位
  • lesson4 - 施以平移变换矢量
  • lesson5 - 用数学公式施以旋转变换
  • lesson6 - 使用矩阵抽象所有变换方式

Chapter 4 - 高级变换

  • lesson1 - 认识Matrix4类
  • lesson2 - 基于requestAnimationFrame创建动画

Chapter 5 - 颜色和纹理

  • lesson1 - 一个缓冲区buf对象定义解析规则,为多个着色器变量传值
  • lesson2 - varying变量
  • lesson3 - 彩色三角形-验证光栅化
  • lesson4 - 使用纹理
  • lesson5 - 使用多个纹理

varying变量的内插作用

在光栅化的过程中,一条线段(图案)的两端颜色不同时,线段上的所有颜色值都会被恰当的计算下来,再传给片元着色器的varying变量中。

图片坐标与GL中的纹理坐标

图片坐标系中原点在左上角要进行 y->t 反转

Chapter 6 - 着色器语言

  • 强类型 大小写敏感 严格分号 类C程序语法结构
  • 保留前缀 : gl_ webgl_ _webgl_
  • 内置矢量和矩阵计算
  • 内置纹理取样器
  • 函数不允许递归操作
  • 精度限定 : 片元着色器中float没有默认精度,所以需要手动提前指定

Chapter 7 - 三维世界初步

  • lesson1 - ViewMatrix视点-观察者
  • lesson2 - 观察者 + 模型变化
  • lesson3 - 通过键盘事件调整观察者-进一步认识ViewMatrix
  • lesson4 - 通过键盘事件调整盒装可视范围
  • lesson5 - 通过键盘事件调整盒装可视范围
  • lesson6 - 透视投影范围 - Model+View+Pers 共冶一炉
  • lesson7 - 隐藏面擦除解决重叠现象 + 多边形偏移解决深度冲突
  • lesson8 - 使用索引绘制图形 //=>绘制一个立方体
  • lesson9 - 顶点与颜色分开传入 //=>为每一面指定颜色

Chapter 8 - 光照

  • lesson1 - 平行光漫反射
  • lesson2 - 平行光漫反射+环境光环境反射
  • lesson3 - 通过键盘事件调整观察者-进一步认识ViewMatrix
  • lesson4 - 运动物体的光照 //=>模型矩阵逆转置*法向量
  • lesson5 - 点光源漫反射+环境光环境反射 //=>逐顶点与逐片元

Chapter 9 - 层次模型

  • lesson1 - 单关节
  • lesson2 - 多关节 //=>使用同一个基础矩形(同一个索引)
  • lesson3 - 多关节 //=>使用不同的索引
  • initShaders() 实现原理

Chapter 10 - 高级技术

  • 使用鼠标拖拽
  • 选取一个物体/面
  • 结合canvas2d显示文字实现HDD
  • fog雾化模拟大气效果
  • 绘制圆点
  • α混合(透明度)
  • 切换着色器
  • 渲染结果作为纹理使用(帧缓冲区)
  • 绘制阴影
  • OBJViewer从外部加载模型数据

Author : MrZebra

Contact : 390303304@qq.com


About

webgl编程指南

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published