webgl學習路線總結

API:
WebGL 3D Perspective:
webgl-examples:
一個使用方便的 JavaScript處理向量和矩陣運算的庫。sylvester:
性能監視器(監視FPS):
動畫引擎
 
頂點着色器根據須要, 也能夠完成其餘工做。例如,決定哪一個包含  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>

  等價於:html

`
      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;
      }
    `

  等價於:git

[
 "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" );
相關文章
相關標籤/搜索