webgl學習路線總結

API：

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

WebGL 3D Perspective：

https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-3d-orthographic.html#toc

https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html

webgl-examples：

https://github.com/mdn/webgl-examples/

一個使用方便的 JavaScript處理向量和矩陣運算的庫。sylvester:

http://sylvester.jcoglan.com/docs.html

性能監視器（監視FPS）：

https://github.com/mrdoob/stats.js

動畫引擎

https://github.com/tweenjs/tween.js

 

頂點着色器根據需要， 也可以完成其他工作。例如，決定哪個包含  texel面部紋理的坐標，可以應用於頂點；通過法線來確定應用到頂點的光照因子等。依此類推，這些信息可以存儲在 變化（varying)或 屬性(attributes)屬性中，以便與片段着色器共享

<script id="shader-vs" type="x-shader/x-vertex">
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;
    
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;
      
      varying lowp vec4 vColor;
    
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
      }
    </script>

　　等價於：

`
      attribute vec3 aVertexPosition;
      attribute vec4 aVertexColor;
    
      uniform mat4 uMVMatrix;
      uniform mat4 uPMatrix;
      
      varying lowp vec4 vColor;
    
      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vColor = aVertexColor;
      }
    `

　　等價於：

[
 "attribute vec3 aVertexPosition;",
 "attribute vec4 aVertexColor;",
 "uniform mat4 uMVMatrix;",
 "uniform mat4 uPMatrix;",
 "varying lowp vec4 vColor;",
 "void main(void) {",
  "gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);",
  "vColor = aVertexColor;",
 "}"
].join( "\n" );