WebGL学习(2) — 坐标系统

WebGL使支持HTML<canvas>标签的浏览器不安装任何插件，便可以使用基于OpenGL ES 2.0的API在canvas中进行3D渲染。WebGL程序由js控制代码和计算机的图形处理单元(GPU,Graphics Processing Unit)中执行的渲染代码(shader code)组成。webgl元素可以和其他HTML元素混合，并且会和页面的其他部分或页面背景相合成。

• 需要理解的几个概念

canvas: 画布
vertex shader: 顶点着色器，用来存储图像的位置相关信息，如坐标、大小等
fragment shader: 片元着色器，用来描述对象的颜色纹理等信息
buffer: 缓冲区，通常情况下如果绘制多个点或复杂的纹理会特别使用到buffer object，其他情况下，图形会在该区域进行缓冲，缓冲完成后显示在屏幕上。

• 协同工作过程

协同工作过程

通过canvas获取webgl的上下文 > vartex shader和fragment shader指定图形的形状和样式 > 将图形数据放入相应缓冲区 > 绘制

• 获取webGL执行环境

 + html
<canvas id="canvas"></canvas>
 + js
var canvas = document.getElementById('canvas');
// 获取webgl执行环境的上下文
var webgl = canvas.getContext('webgl');
// 实际上，getContext的参数可能为["webgl", "experimental-webgl","webkit-3d","moz-webgl"]中的任意一个，因此通常情况下在正式项目中，需要对浏览器的兼容性进行处理。

• 坐标系统
  webgl的三维坐标系统是笛卡尔坐标系中的右手坐标系，具有x，y，z三个维度。右手坐标系如下图：(箭头指向为正轴方向)

右手坐标系

• canvas与webgl坐标系对应关系(默认下)

canvas的中心点：webgl的坐标原点(0.0, 0.0, 0.0)
canvas x轴左右边缘：webgl中x轴的-1.0和1.0
canvas y轴上下边缘：webgl中y轴的1.0和-1.0

• 关于-1.0和1.0
  webGL本质上是基于光栅化的API，而不是基于3D的API。webGL只关注两个方面，即投影矩阵的坐标和投影矩阵的颜色。使用webGL程序的任务是实现具有投影矩阵坐标和颜色的webGL对象。顶点着色器提供投影矩阵的坐标，片段着色器提供投影矩阵的颜色。无论目标图形尺寸多大，其投影矩阵的坐标范围始终是从-1.0到1.0。
  笛卡尔坐标系以屏幕中心为原点，规范正交化后是-1到1，方便转化为笛卡尔坐标计算。

上一篇： WebGL学习(1) — 浏览器支持测试