码迷,mamicode.com
首页 > Web开发 > 详细

webgl学习路线总结

时间:2018-02-07 11:59:10      阅读:288      评论:0      收藏:0      [点我收藏+]

标签:attr   var   应用   position   type   blog   -o   矩阵运算   phi   

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>

  等价于:

`
      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" );

  

webgl学习路线总结

标签:attr   var   应用   position   type   blog   -o   矩阵运算   phi   

原文地址:https://www.cnblogs.com/guxingzhe/p/8425382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!