Learning the WebGL

\color{blue}{ch2}

坐标图

canvas1.png

canvas的坐标横轴为x轴(正方向朝右),纵轴为y轴(正方向朝下)

canvas3.png

webgl的右手坐标

canvas4.png

对应坐标

绘图简单步骤

canvas2.png

1. 获取canvas: var canvas = doucment.getElementById('webgl')
2. 获取上下文: var gl = getWebGLContext(canvas)
3. 初始化着色器 initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE)
4. 设置背景色: gl.clearColor(0.0, 0.0, 0.0, 1.0)
5. 清空canvas: gl.clear(gl.COLOR_BUFFER_BIT)
6. 绘图: gl.drawArrays(gl.POINTS, 0, 1)

使用变量

1. 声明: attribute vec4 a_Position;\n
2. 将变量赋值给gl_Position: gl_Position = a_Position;\n
3. 向变量传输数据:

var a_Position = gl.getAttribLocation(gl.program, 'a_Position')
gl.vertexAttrib3f(a_Position, 0.0, 0.0, 0.0)

要点

1. WebGL程序包括运行在浏览器中的Javascript和运行在WebGL系统的着色器程序俩个部分
2. vec4 四个浮点数 组成的矢量(也称为齐次坐标是四维的,通常把最后一个变量设置为1.0代表三维)
3. 顶点着色器两个内置变量: gl_Position, gl_PointSize
4. 片元着色器内置变量: gl_FragColor
5. attribute变量: 传输与顶点相关的数据, unifrom变量传输对所有顶点相同的数据(或与顶点无关)

\color{blue}{ch3}

绘制多点(使用缓冲区)

1. 创建缓冲区对象: var vertexBuffer = gl.creteBuffer()
2. 绑定缓冲区对象: gl.bindBuffer(gl.ARRAY_BUFFER, vextexBuffer)
3. 将数据写入缓冲区: gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
4. 将缓冲区对象分配给一个attribute变量(多点一次性分配)): gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
5. 开启attribute变量(为了使顶点着色器能够访问缓冲区数据): gl.enableVertexAttribArray(a_Position)

要点

1. new Float32Array([])类型化数组: BYTES_PER_ELEMENT 数组中每个元素所占的字节数

WebGl绘制基本图形

gl.drawArrays(gl.TRIANGLES, 0, n)

canvas5.png

\color{blue}{ch4}

变换矩阵步骤

1. 为旋转矩阵创建Matrix对象: var xformMatrix = new Matrix4()
2. 将xformMatrix设置为旋转矩阵: xformMatrix.setRotate(ANGLE, 0, 0, 1)
3. 将旋转矩阵传输给顶点着色器: gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix.elements)
4. varying变量的作用是从顶点着色器向片元着色器传输数据

要点

1. gl.uniformMatrix4fv()的最后一个参数一定要是类型化数组
2. 将变换全部复合在一起的矩阵称为模型矩阵
3. 当有多种数据传输时,可以使用多个缓冲区存不同数据或者使用一个缓冲区进行数据的交错组织

一个缓冲区处理多种数据

canvas6.png

传输颜色

varying vec4 v_Color;\n +
.......
v_Color = a_Color;\n+
.......
gl_FragColor = v_Color;\n+

调用片元着色器

片元着色器计算出该片元的颜色,并写入颜色缓冲区,直到第15部最后一个片元被处理完成,浏览器就会显示处最终的结果

canvas7.png

\color{blue}{ch6}

要点

1. vec4 v4 = vec4(1.0, 2.0, 3.0, 0.0) 可以通过v4.x, v4.y, v4.z访问
2. 存储限定字Attribute变量: 只能出现在顶点着色器中,“逐顶点”
3. uniform变量: 逐片元或顶点共用
4. varying: 从顶点着色器向片元着色器传输数据, 但变量一定是同名和同类型的varying变量

\color{blue}{ch7}

视图矩阵

视图矩阵表示观察者的状态:观察者的视点,观察点,上方向

canvas8.png

视图矩阵步骤

1. uniform mat4 u_ViewMatrix;\n 用来接收视图矩阵
   .......
2. gl_Position = u_ViewMatrix * a_Position;\n 视图矩阵与顶点坐标相乘
   .......
3. var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix) 获取存储位置
4. var viewMatrix = new Matrix4()
5. viewMatrix.setLookAt(0.20, 0.25, 0.25, 0, 0, 0, 0, 1, 0) 设置视点,视线和上方向
6. gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements) 传输

要点

1. 将平移,缩放等基本变换矩阵或它们的组合称为模型矩阵
2. <视图矩阵> x <模型矩阵> x <原始顶点坐标>
3. 也可以将视图矩阵和模型矩阵相乘的结果成为模型视图矩阵: var modelViewMatrix = viewMatrix.multiply(modelMatrix)
4. <投影矩阵> x <视图矩阵> x <模型矩阵>称为模型视图投影矩阵

鼠标或键盘控制思路

1. 在main()里注册事件, 参数有:事件, gl, 顶点数, 视图矩阵储存位置, 视图矩阵document.onkeydown = function(ev){keydown(ev, gl, n, u_ViewMatrix)}
2. 在main()里画初始的(还没调用keydown函数): draw(gl, n, u_ViewMatrix, viewMatrix)
3. 在keydown改变viewMatrix.setLookAt()参数, 最后调用draw画图
4. 执行draw:传递viewMatrix, gl.drawArrays(gl.TRIANGLES, 0, n)

可视空间

1. 盒子空间, 由正射投影产生: 大小与其所在的位置没有关系(不能产生深度感), 用到的矩阵是 正射投影矩阵(OrthoView)

canvas9.png

canvas10.png

canvas11.png

2. 金字塔可视空间, 由透视投影产生: 一般真实的世界用的都是透视投影, 用到矩阵是 透视投影矩阵(projMatrix)

canvas12.png

canvas13.png

canvas14.png

处理对象的前后关系

1. WebGL会按照缓冲区的顺序绘制图形,而且后绘制的图形覆盖先绘制图形
2. 可以利用WebGL提供的隐藏面消除功能消除
3. 步骤:

开启隐藏面消除功能 gl.enable(gl.DEPTH_TEST)
在绘制之前,清除深度缓冲区 gl.clear(gl.DEPTH_BUFFER_BIT)

4. 深度缓冲区就是用来存储深度信息的,所以在绘制一帧之前,都必须清除缓冲区(包括颜色和深度): gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

画3D图使用索引

1. 使用gl.drawElements()代替gl.drawArrays()
2. 上面两种方法的区别在于gl.ELEMENT_ARRSY_BUFFERT它管理着具有索引结构的三维模型数据
   
   

   canvas15.png

3. 索引值是整型数,使用Uint8Array

   
   
   

   canvas16.png
4. 当多次调用缓冲区时,可以把缓冲区封装成一个函数,initArrayBuffer(gl, data, num, type, attribute)

其中data为顶点或者颜色坐标,type表示坐标的类型, attribute代表变量名, num代表每个顶点的占位数

\color{blue}{ch8}

反射类型

1. 漫反射(diffuse)

<漫反射光颜色> = <入射光颜色> x <表面基底色> x cosa

2. 环境反射(ambient)

<环境反射光颜色> = <入射光颜色> x <表面基底色>

物体最终颜色

<表面的反射光颜色> = <漫反射光颜色> + <环境反射光颜色>

平行光下的漫反射

1. 入射角cosa = <光线方向> · <法线方向>,两者的点积,两个向量进行归一化
2. 平面上任意一点都具有相同的法向量, 所以顶点坐标个数与顶点颜色个数与法线量个数要保持一致
3. 归一化(normalize)光线以Float32Array类型的形式储存在lightDirection对象的elements属性中

运动物体光照

1. 对顶点坐标进行变换的模型矩阵

变换后的法向量: 用法向量乘以模型矩阵的逆转矩阵\color{green}{modelMatrix}

求逆转置步骤:

1. 求原矩阵的逆矩阵 normalMatrix.setInverseOf(modelMatrix)
2. 将上一步的求得的逆矩阵进行转置normalMatrix.transpose()
   这里的用normalMatrix来存储

点光源的漫反射

1. 在物体不同位置(不同顶点)的入射光的方向不同
2. 计算顶点的入射光的方向步骤:

1. 计算模型变换后的顶点坐标(世界坐标)var vertexPosition = u_ModelMatrix * a_Position
2. 光线方向是由点光源坐标减去顶点坐标,在进行归一化 vec3 lightDirecti on = normalize(u_LightPosition - vec3(vertexPosition))

要点

1. 为了更逼真:逐片元光照

\color{blue}{ch9}

要点

1. 模型矩阵(\color{red}{modelMatrix}): 变换原始顶点坐标(旋转,平移,缩放)
2. 视图矩阵(\color{red}{viewMatrix}): 观察者状态lookAt
3. 投影矩阵(\color{red}{projMatrix}): 可视空间包括setPerspective, setOrtho
4. 一组顶点多次复用时,平移和旋转都有类似的光标概念

层次结构模型

1. 例:单关节模型

1. 初始化顶点坐标和颜色缓冲区n = initVertexBuffer(gl)
2. 注册键盘事件,参数:ev, gl, n(顶点索引数组个数), viewProjMatrix(投影矩阵) , u_MvpMatrix(投影视图模型矩阵), uNormalMatrix
3. 触发键盘事件, 改变全局变量g_arm1Angle和g_joint1Angle, 从而改变全局模型矩阵g_modelMatrix, 多次调用
4. 重新计算视图投影模型矩阵 viewProjMatrix

2. 例: 多关节模型

1. 初始化顶点坐标和颜色缓冲区n = initVertexBuffer(gl)
2. 注册键盘事件,参数:ev, gl, n(顶点索引数组个数), viewProjMatrix(投影矩阵) , u_MvpMatrix(投影视图模型矩阵), uNormalMatrix
3. 触发键盘事件, 改变全局变量g_arm1Angle和g_joint1Angle, g_joint2Angle, g_joint3Angle, 从而改变全局模型矩阵g_modelMatrix
4. 多次调用draw画组件,在画手指之前缓存g_modelMatrix, pushMatrix存储矩阵的栈,将矩阵推入栈

\color{blue}{ch10}

纹理图像步骤

1. 顶点着色器中接收顶点的纹理坐标, 光栅化后传递给片元着色器

var verticesTexCoords = new Float32Array([...])创建顶点坐标和纹理坐标
var a_TexCoord = gl.getAttribLocation()分配并开启

2. 片元着色器根据片元的纹理坐标,从纹理图像中抽取纹素颜色,赋给当前片元

initTextures()函数负责配置和加载纹理:

var texture = gl.createTexture()创建纹理对象来管理纹理
var u_Sampler = gl.getUni...变量用来接收纹理图像
image.onload = function () { loadTexture(gl, n, texture, u_Sampler, image)}来等图片加载完成执行
loadTexture()用来配置纹理:

1. gl.pixelStorei()反转转y坐标
2. gl.activeTexture() 激活纹理单元, --管理
3. gl.bindTexture()绑定纹理对象, --操作
4. gl.texParameteri() 配置纹理对象的参数
5. gl.texImage2D()将纹理图像分配给纹理对象
6. gl.uniform1i()将纹理单元传递给片元着色器