【笔记】《WebGL编程指南》学习-第2章WebGL入门(2-WebGL的HelloWorld)

来源：互联网发布：java nested查询编辑：程序博客网时间：2024/05/16 14:37

今日目标：编写世界上最短的WebGL程序，HelloCanvas。

这个程序的功能就是使用背景色清空了 <canvas> 标签的绘图区。
今天的成果：
这里写图片描述

开始学习！

HTML文件

先来看一下HelloCanvas.html

HelloCanvas.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Clear canvas</title></head><body onload="main()">    <canvas id="webgl" width="400" height="400">        Please use a browser that supports "canvas"    </canvas>    <script src="../lib/webgl-utils.js"></script>    <script src="../lib/webgl-debug.js"></script>    <script src="../lib/cuon-utils.js"></script>    <script src="HelloCanvas.js"></script></body></html>

文件的结构很简单：首先使用 <canvas> 元素定义绘图区域，然后引入HelloCanvas.js文件。除此之外还引入了一些其他文件（就是上一篇文章我说的要去下载的）。

这里写图片描述

HelloCanvas.js

好啦，其实真正使用WebGL来绘制三维图形是在 HelloCanvas.js 这个文件里，看之前先回顾一下上一篇提到的绘制二维图形的三个步骤：

获取 <canvas> 元素
获取绘图上下文
开始绘图
HelloCanvas.js

function main() {    //获取canvas元素    var canvas = document.getElementById("webgl");    if(!canvas){        console.log("Failed to retrieve the <canvas> element");        return;    }    //获取WebGL绘图上下文    var gl = getWebGLContext(canvas);    if(!gl){        console.log("Failed to get the rendering context for WebGL");        return;    }    //指定清空<canvas>颜色    gl.clearColor(0.0, 0.0, 0.0, 1.0);    //清空<canvas>    gl.clear(gl.COLOR_BUFFER_BIT);}

本例子中，main()函数的执行流，包含了以下四个步骤，我们将分别解析：

获取 <canvas> 元素（不说了，和上一篇一样，传id）
获取WebGL绘图上下文
设置背景色
清空 <canvas>

为WebGL获取绘图上下文

 var gl = getWebGLContext(canvas);

通常来说，应该使用 canvas.getContex() 函数来获取绘图上下文，但在获取WebGL绘图上下文时，canvas.getContex() 函数接受的参数，在不同浏览器种不同，所以这里写了一个函数 getWebGLContext() 来隐藏不同浏览器之间的差异。

而这个函数就在要下的那几个文件里，在前面html文件里引进来的。
下面是该函数的一些规范
这里写图片描述

设置 <canvas>颜色

gl.clearColor(0.0, 0.0, 0.0, 1.0);

在上一篇笔记中，我们在绘制矩形之前就制定了绘图颜色。在WebGL中，与之类似，清空绘图区之前你也得指定背景颜色，同样是以 RAGB 格式设置背景色，但不同的是取值范围。
在上一篇二维图形程序中，颜色分量值是在0到255之间。凡是，由于 WebGL 是继承自 OpenGL 的，所以它遵循传统的 OpenGL 颜色分量的取值范围，是从 0.0 到 1.0。RGB 的值越高，颜色越亮。透明度还是相同的取值范围。

一旦指定了背景色后，背景色就会贮存在WebGL系统（WebGL System）中，在下一次调用 gl.clearColor() 前不会改变。

清空 <canvas>

gl.clear(gl.COLOR_BUFFER_BIT);

最后调用这个函数，用之前指定的背景色清空（用背景色填充，擦除已经绘制的内容）绘图区域。

注意，函数的参数是 gl.COLOR_BUFFER_BIT ，而不是表示绘图区域的<canvas>。这是因为 WebGL 中的 gl.clear() 方法实际上继承自 OpenGL ，它基于多基本缓冲区模型。清空绘图区域，实际上是在清空颜色缓冲区（color buffer），传递参数 gl.COLOR_BUFFER_BIT 是在告诉 WebGL 清空颜色缓存区，比如深度缓冲区和模板缓存区（后面介绍，有个印象就行）。

这里写图片描述

如果没有指定背景色，那么使用的默认值如下图：

这里写图片描述

运行下html文件就可以看到这样的啦：
这里写图片描述

更改颜色的RGB值，还可以更改颜色
这里写图片描述

今天就到这啦，打完收工！

阅读全文

0 0