[WebGL入门]七，context的初始化

最新推荐文章于 2023-09-20 11:05:17 发布

lufy

最新推荐文章于 2023-09-20 11:05:17 发布

阅读量1.3w

点赞数 7

分类专栏： WebGL WebGL入门文章标签： WebGL

WebGL入门同时被 2 个专栏收录

32 篇文章 316 订阅

订阅专栏

WebGL

31 篇文章 16 订阅

订阅专栏

注：文章译自http://wgld.org/，原作者杉本雅広(doxas)，文章中如果有我的额外说明，我会加上［lufy：］，另外，鄙人webgl研究还不够深入，一些专业词语，如果翻译有误，欢迎大家指正。

非常重要的初始化

从这次开始，开始着手WebGL的处理。首先是WebGL的初始化，完成渲染前的所有准备。
前面的文章也给过HTML的雏形，还记得吧，像下面的代码这样。

<html>
    <head>
        <title>WebGL TEST</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>

这一次，从这个代码开始说明，这个HTML代码，纯粹只是在页面上放置一个canvas，从这个canvas中获取context，然后进行WebGL的初期化。

获取context

刚才的代码，在head标签中引用了外部js文件script.js，那么来看一下这个文件中的代码。首先，通过getElementById来取得canvas。

var c = document.getElementById('canvas');

这样，c就表示canvas对象，接下来定义canvas的大小。

c.width = 500;
c.height = 300;

这样就把canvas的大小设置成了宽500px，高300px了。当然，这个canvas的大小可以根据你的需求自由的设定。我这里是随便设置的，没有什么特别的意思。
接着，获取WebGL的context，需要使用getContext函数，getContext函数是从canvas中获取context对象，参数是字符串，指定你想要获取的context的名称。
本文写的时候（2012年2月），WebGL的context，还不能通过正式的名称webgl来获取，必须使用experimental-webgl来获取context对象。
但是，以后也有可能通过正式的名称来获取context，所以，在获取context对象的时候，使用或运算（||）来按照名称的顺序来执行。

var gl = c.getContext('webgl') || c.getContext('experimental-webgl');

如果浏览器支持的话，这个时候gl就是你获取到的WebGL的context，接下来就通过gl来操作WebGL。

画面的初始化

WebGL的context和之前的context（开始WebGL之前，先了解一下canvas）一样，都是包含了绘图相关的各种各样的处理的对象，里面有非常多的函数，常量和属性。
在这些函数里，有一个是用来清除画面的，函数名叫做clear，其实看名字就知道了吧......
这个函数将画面清空，回到一个全新的状态。参数是要清空的对象，或者是WebGL中定义的常量。这一次，只是清空一下画面上的颜色，所以使用COLOR_BUFFER_BIT这个常量，这个常量是为了使用canvas里面指定的颜色来清空画面而定义的。

gl.clear(gl.COLOR_BUFFER_BIT);

如果要清空画面所使用的颜色的话，就必须得另外定义了。这个函数是clearColor。clearColor函数的参数有四个，就是单纯的RGBA，很直观吧，使用方法如下。

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

像上面这样，clear方法执行的时候，就会使用黑色将画面初期化。参数的数值的指定范围是0 ～ 1之间，注意不可以像普通的HTML中那样使用16进制的颜色。
上面的处理整理一下的话，就是下面的script.js代码，因为要在页面加载完才能执行，所以把代码写在onload中。

onload = function(){
    // canvasエレメントを取得
    var c = document.getElementById('canvas');
    c.width = 500;
    c.height = 300;

    // webglコンテキストを取得
    var gl = c.getContext('webgl') || c.getContext('experimental-webgl');
    
    // canvasを黒でクリア(初期化)する
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
};

点击下面的连接，可以看一下实际的demo。
获取WebGL的context，然后进行初期化的demo

这个例子，只是纯粹的获取一下WebGL的context，然后使用黑色将canvas清空一下而已，所以画面只是一片黑色。但是如果画面可以运行出来的话，WebGL的准备工作就算基本完成了。

总结

这一次，只是获取一下WebGL的context，然后将使用黑色将画面清空一下。但是事实上，这样就可以开始使用WebGL了。
接下来，会更具体更详细的介绍WebGL相关的处理，但不管做什么，基础都是很重要的，这次的内容还是需要彻底理解一下的。

下次，介绍一下着色器相关的基础知识。

转载请注明：转自lufy_legend的博客http://blog.csdn.net/lufy_legend

lufy

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
[WebGL入门]七，context的初始化

这一次，只是获取一下WebGL的context，然后将使用黑色将画面清空一下。但是事实上，这样就可以开始使用WebGL了。接下来，会更具体更详细的介绍WebGL相关的处理，但不管做什么，基础都是很重要的，这次的内容还是需要彻底理解一下的。
复制链接

扫一扫