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

注:文章译自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

展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值