webgl learning 之体会总结

lesson4 ，见：http://learningwebgl.com/blog/?p=370

本次学习要点

1. 画cube，四个面不同的颜色。

2.画cube时，将全部vetex一次输入，用gl.drawElements可以按照指定的点的索引来画。

lesson 5 学习要点（http://learningwebgl.com/blog/?p=507）：

1. 可以create一个texture， 其属性可以设置为一个图片。

2. texture替代color，与每一个vertext进行运算，想当于加上该种texture。

3. 设置texture时，该图片的四个点对应cube的每个面上的四个点，面上的texture则由图片进行相应的缩放来得到

4. 每个texture的大小都看作是1.

lessson 6 (http://learningwebgl.com/blog/?p=571)

1. 三张textures的缩放效果

2. 处理用户的key event。

lesson7 (http://learningwebgl.com/blog/?p=684)

这一节的主要内容是模拟光线。

光线的方向由向量数组来表示，光线的值由RGB来表示。当光线照射到cube的表面时，要计算光线向量与在cube某一个表面的法向量上的投影大小。投影大小作为系数，乘以光线的值，再加上原来cube上点的RGB的值。就构成了光线照射物体表面后的光线效果。

lesson 8(http://learningwebgl.com/blog/?p=859)

1. 使用depth_test方式绘图时，前面的图会遮挡后面的图，这是系统会根据Z坐标来判断的。

2.可以使用blendFunc函数来指定，将两个buffer的内容混合，第一个参数指定它的源颜色的factor，第二个参数指定它的目标颜色的factor。目标颜色是先画的buffer里的颜色。

3. 在此课中，将对blendFunc的默认处理进行了修改，也就是对两个buffer里面的颜色的混全方式作出了修改，见frame shader中的内容。

lesson 9(http://learningwebgl.com/blog/?p=1008)

1. 小星星的画法法：先画正方形，然后把材质star.gif贴上即可。

2.文中的

 // Rotate back so that the star is facing the viewer
    mat4.rotate(mvMatrix, degToRad(-this.angle), [0.0, 1.0, 0.0]);
    mat4.rotate(mvMatrix, degToRad(-tilt), [1.0, 0.0, 0.0]);

的意思是：由于小星星的画法原因，当我们用上下键，将这个“星系”转到90度时，我看到的就不是“星系”正面，而是它的侧面。这时看到的侧面将是线状的边缘。为了在这个侧面也看到圆形的小星星，我们要再移动一次小星星，就能看到它的侧面时的正面图像，即

 mat4.rotate(mvMatrix, degToRad(-this.angle), [0.0, 1.0, 0.0]);

这一句的功效。

3. 闪烁效果的实现，是通过在一个位置上画两个小星星实现的。我不太明白。

4. 我们学会怎么定义一个class，这类似于面向对象编程。

lesson 10 (http://learningwebgl.com/blog/?p=1067)

1. 本例中的3D图像是从文本加载来的，但如何创建3D图像，是要研究和学习的东西 。

2.webgl中的CAMEAR是默认在（0,0,0）的，我们不能改变。要创造出camera移动的效果，其实实现的方式是：让物体移动相对于camera来移动。这样，也就相当于camera在 围绕物体来移动 。

3. 比如，我们假設新的camera點是在(x,y,z), camera从默认位置移到些点的向量就是(x,y,z),但其实移动的是物体，所以，此物体的移动向量是(-x,-y,-z).

4. 要看到空间上下的场景，要让camera围绕着x轴旋转，但旋转的时候 可以使camera的镜头与x轴成一定的角度。要看到空间左右的场景 ，要让camera围绕着y軸轉，也可以使镜头与y軸成一定的角度。

5. 文中还提到一种joggy效果，没看太懂。

6. 在指定texture坐标的时候，指定的数字如何大于6,会mod 5来取余，这样，可以在object上重复一些材质。

lesson 11 (http://learningwebgl.com/blog/?p=1253)

1. 學習如何繪制球体：将球体用经緯度分割成类似的“矩形”，每个矩形也是用三角形来分割。保存所有的经緯交叉点，就是我们要的顶点。

2.新的一个函数: multipy.

3. canvas的mouse event.

lesson 12(http://learningwebgl.com/blog/?p=1359)

1.學習点光源：设置光源的方向时，点光源的位置减去一个顶点的位置，就是点光源的方向。

lesson 13(http://learningwebgl.com/blog/?p=1523)

1. 讲述了一个知识点：

    per－vertex  lighting： 在x－vertex中，生成两个vertex之间的lighting，在x－fragment中的lighting由系统根据一定的插值算法来生成。

    per－fragment lighting：在x－vertex中由系统计算vetex坐标及光线向量等，在x－fragment中根据插值算法生成vertex坐标及光线向量，然后重新计算每个点的lighting。

lesson 14 (http://learningwebgl.com/blog/?p=1658)

1.所谓spectual lighting，我的理解是光线照射到光滑物体表面反射后，在该光滑物体表面上留下的一个亮点。这个spectual lighting的计算公式是：

 power（R_m . V）,Rｍ是光线反射出去的微量，V是人眼到系统默认camera点（即（0，0，0）点）的向量。

2. 可以从JSON加载实体模型。　

lesson 15(http://learningwebgl.com/blog/?p=1778)

1. 本例实现的一个效果是：在海洋的地方，会画出一个亮点。在陆地的地方，不会出现亮点，这个所謂的亮點，其实就是sepcatual lighting。

2. specutual lighting 的实现是用两个材质来实现的。sepctual lighting是打到一个黑白材貭上去的,它会判断: 如果材质的値是零，也就是黑色的海洋的地方，就设置较大的specutal lighting,反之，如果是白色的地方 ，也就是大陆的地方，就设置比较不明显的spectual lighting.

3. 在x-fragment shader 中，取另一个彩色材质中的颜色进行渲染，就能出现彩色地球图样。同时，这个彩色材质的去留，并不会影响spectual lighting. 由于较小的spectual lighting 在彩色图中并不明显，这样看起来，就是有海洋的地方就有spectual  lighting, 在陆地的地方，就没有sectual lighting(其实只是亮度小看不出来而已)。

lesson 16(http://learningwebgl.com/blog/?p=1786)

1.此例的主要内容是在一个scene中镶嵌入另一个scene: 在notebook的模型屏幕中呈现另一个旋转的crate和sphere。

2.主要是通过FrameBuffer来实现的: 创建一个framebuffer，然后为該framebuffer创建renderbuffer和texturebuffer，将这二者都关联到framebuffer。然后使用framebuffer来画crate和sphere。这样，刚才画的场景都可以保存在texturebuffer中。最后在画notebook熒幕的时候，将該texturebuffer作为材质，附加在熒幕上即可。