webgl渲染过程

一、简介

1.WebGL概述

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

2.WebGL优点

• 通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持。
• 利用底层的图形硬件加速功能进行的图形渲染，通过统一的、标准的、跨平台的OpenGL接口实现的。

二、着色器

2.1 sampler2D采样器类型

WebGL在处理图片纹理，编写片元着色器的时候，会通过sampler2D关键字声明一个纹理相关的变量。sampler2D和vec2、float都表示一种数据类型，只不过sampler2D关键字声明的变量表示一种取样器类型变量，简单点说就是该变量对应纹理图片的像素数据。

  static vertexShaderSource = `
    attribute vec2 xy;//顶点位置坐标
    varying highp vec2 uv;//插值后纹理坐标
    void main(void) {
      gl_Position = vec4(xy, 0.0, 1.0);//内置变量gl_Position
      // Map vertex coordinates (-1 to +1) to UV coordinates (0 to 1).
      // UV coordinates are Y-flipped relative to vertex coordinates.
      uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
    }
  `;

  static fragmentShaderSource = `
    varying highp vec2 uv;//接收插值后的纹理坐标
    uniform sampler2D texture;//纹理图片像素数据
    void main(void) {
      gl_FragColor = texture2D(texture, uv);//采集纹理，逐片赋值像素值
    }
  `