包含了canvas创建，以及webGL环境配置,当gl-canvas被销毁时，requestAnimationFrame也将被销毁。

监听方法

update:
在每一次绘制时会触发该方法供vue做js操作,返回数据为当前帧的一些内置变量。

用法：

<gl-canvas @update="canvasUpdate">
  <!-- ... -->
</gl-canvas>
<script>
  export default{
    // ...
    methods:{
      canvasUpdate(tickData){
        /*
          tickData ==> {
            iResolution;           // viewport resolution (in pixels)
            iTime;                 // shader playback time (in seconds)
            iTimeDelta;            // render time (in seconds)
            iFrame;                // shader playback frame
            iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
            iDate;                 // (year, month, day, time in seconds)
          }
        */
      }
    }
  }
</script>

webGLProgram的创建操作,必须是 gl-canvas 的子组件。

用法：

<gl-canvas>
  <gl-program name="buffer0" :code="bufferCode0"></gl-program>
  <gl-program name="main" :code="mainCode"></gl-program>
</gl-canvas>

WebGLUniform组件,当有int类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法：

<gl-canvas>
  <gl-program name="main" :code="mainCode">
    <gl-int name="u_int0" :value="u_int0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_int0:0,
        mainCode:`
void main(){
gl_FragColor = vec4(vec3(u_int0),1);
}
        `,
      }
    }
  }
</script>

WebGLUniform组件,当有float类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法：

<gl-canvas>
  <gl-program name="main" :code="mainCode">
    <gl-float name="u_float0" :value="u_float0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_float0:.5,
        mainCode:`
void main(){
gl_FragColor = vec4(vec3(u_float0),1);
}
        `,
      }
    }
  }
</script>

WebGLUniform组件,当有vec2类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec2数据；

WebGLUniform组件,当有vec3类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec3数据；

WebGLUniform组件,当有vec4类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为vec4数据；

WebGLUniform组件,当有mat2类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat2数据；

WebGLUniform组件,当有mat3类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat3数据；

WebGLUniform组件,当有mat4类型的uniform传入时，用此组件,必须是 gl-program 的子组件。

用法同上，类型为mat4数据；

WebGLUniform组件,当用到纹理时，用此组件,必须是 gl-program 的子组件。

value 取值；

<string>imageURL:本地图片链接地址。

<HTMLImageElement>imageObj|<HTMLVideoElement>videoObj:可以传入Image对象或者video对象（video对象没测，但是理论上可以的），比如展示跨域image时，自行传入image对象，效果同imageURL;

<string>webGLProgramName:当项目为多WebGLProgram时，value值可设置为gl-program的name值,可以把该frameBuffer引入纹理（除mainwebGLProgram外，其他webGLProgram均可当作纹理对象，原因是mainwebGLProgram要作为主frameBuffer渲染出来）;

<object>textureCubeData:用于添加立方体贴图，并包含以下数据：
| Props | Type | describe | | :-------- | :-----: | :----------- | | front | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 | | back | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 | | left | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 | | right | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 | | top | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 | | bottom | imageURL\|imageObj\|videoObj | 本地图片链接地址或者Image\|VideoHTML对象，最好为2^n的正方形尺寸 |

用法：

<gl-canvas>
  <gl-program name="buffer0" :code="bufferCode0">
  </gl-program>
  <gl-program name="main" :code="mainCode">
    <gl-image name="u_image0" :value="u_image0">
    <gl-image name="u_image1" value="buffer0">
  </gl-program>
</gl-canvas>
<script>
  export default{
    data(){
      return{
        u_image0:require('../assets/image0.png'),
        //bufferCode0:...
        mainCode:`
void main(){
vec2 uv = gl_FragCoord.xy/iResolution.xy;
gl_FragColor = texture2D(u_image0,uv)+texture2D(u_image1,uv);
}
        `,
      }
    }
  }
</script>

用法：

在gl-image示例中已经用到了iResolution;