HTML5 Canvas实战
9.2 创建三角形平面
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

与画布交互:为图形和区域附加事件监听器

创建图表

通过游戏开发来拯救世界

WebGL简介

创建一个WebGL包装器来简化WebGLAPI

创建三角形平面

现在,我们的WebGL包装器已经构建好,让我们在屏幕上绘制一个简单的三角形,来创建我们的第一个WebGL应用。它将作为创建更复杂的3D模型的典型步骤的良好基础。本节,我们将介绍位置缓冲区的概念,它其实就是用来定义3D模型的位置和形状的顶点的数组。

创建三角形平面
图9-1 创建三角形平面

操作步骤

按照以下步骤使用WebGL渲染一个2D三角形:

1. 链接到glMatrix库和WebGL包装器:

<script type="text/javascript" src="glMatrix-1.0.1.min.js"> </script>
<script type="text/javascript" src="WebGL.js"> </script>

2. 定义initBuffers()函数,该函数初始化三角形的位置缓冲区:

function initBuffers(gl){
  var triangleBuffers  =  {};
  triangleBuffers.positionBuffer  = gl.createArrayBuffer([
    0,  1,  0,
    -1, -1, 0,
    1,  -1, 0
  ]);
  return triangleBuffers;
}

3. 定义stage()函数,该函数设置透视矩阵,把模型-视图矩阵设置到单位矩阵,在z轴方向将模型-视图矩阵向后平移-5个单位,把位置缓冲区发送到显卡,然后调用drawArrays()方法绘制该三角形:

function stage(gl, triangleBuffers){
  gl.clear();
  // 把视野设置为45°,把可见范围设置为0.1 到100.0单位
  gl.perspective(45,  0.1,  100.0);
  gl.identity();
  //平移模型-视图矩阵
  gl.translate(0,  0,  -5);
  gl.pushPositionBuffer(triangleBuffers);
  gl.drawArrays(triangleBuffers);
}

4. 页面加载完成后,新建一个WebGL包装器对象的实例,把着色器程序设置为“BLUE_COLOR”,初始化三角形的缓冲区,然后绘制画布:

window.onload  = function(){
  var gl  = new WebGL("myCanvas", "experimental-webgl"); 
  gl.setShaderProgram("BLUE_COLOR");
  var triangleBuffers  = initBuffers(gl); 
  stage(gl, triangleBuffers);
};

5. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250"  style="border:1px solid black;">
</canvas>

工作原理

页面加载完成后,我们要做的第一件事,就是使用experimental-webgl上下文来初始化WebGL包装器对象。在本书写作之时,experimental-webgl上下文是所有支持WebGL的主流浏览器中唯一的画布上下文,这些主流浏览器包括Google Chrome,Firefox,和Safari。

接下来,我们可以把着色器程序设置为“BLUE_COLOR”,它将使用预建的GLSL程序渲染蓝色的顶点和片段。一旦着色器程序设置完成,我们需要初始化我们的缓冲区。缓冲区是顶点的数组,顶点用来定义3D模型的位置和形状。本节,我们仅仅使用一个位置缓冲区,来定义三角形的顶点位置。在未来的几节中,我们将介绍其它缓冲区类型,包括索引缓冲区、纹理缓冲区、法线缓冲区。本节的位置缓冲区包含9个元素,它们代表3个顶点(每个顶点都有一个x,y,z分量)。

一旦三角形的缓冲区初始化完成,我们就可以绘制画布了。stage()函数先清除画布,再设置透视矩阵。我们的WebGL包装器对象的perspective()方法接受3个参数,一个视角参数,一个最小可见距离参数,一个最大可见距离参数。本节,我们把最小可见距离设置为0.1个单位,把最大可见距离设置为100个单位。任何比0.1个单位还近的对象将不可见,任何比100个单位还远的对象也不可见。如果我们的画布上包含很多复杂模型并遍布整个空间,因为要立刻在屏幕上渲染太多的对象,较大的最大可见距离可能导致潜在的性能问题。

接下来,我们可以使用identity()函数把模型-视图矩阵设置到单位矩阵,再把模型-视图矩阵平移到(0, 0, -5)。这就是说,我们只是简单地把模型-视图矩阵,在z轴方向上向远离用户的方向,平移5个单位。

最后,我们可以使用pushPositionBuffer()方法,把位置缓冲区发送到显卡,然后调用drawArrays()方法绘制该三角形。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验