【WebGL教程】Lesson 1 10

本文地址: http://blog.wysaid.org/721.html
原创,转载请注明出处

第一话,准备工作(blog.wysaid.org)

第一步

观看本教程时,请先确保自己有一定的编程基础,我不会给你讲什么javascript的基础语法的。

但鉴于一般学编程的人不一定懂网页页面设计,我会附带少量DIV,CSS这方面必备的知识。

那么,废话不多说,开始吧。做一件事千万不能着急,磨刀不误砍柴工这个道理相信大家都懂。

做一件事之前先做充足/一定/少量是非常有必要的。比如WebGL做出来的东西肯定是显示在图形界面上的,而不是一个只有功能的控制台程序,那么我们首先应该准备的就是一个简单优雅的界面。

需要了解的知识(为了便于显示,我会给所有的div元素加上边框):div标签是网页设计里面用得非常多的,用于控制网页显示的元素。我们也将用到它来控制显示的界面,包括位置、大小以及可能会处理的鼠标事件等等。此外,我们还需要一个按钮,来点击以运行出结果。

如下:

第二步

本教程为WebGL教程,所以,现在必须引入canvas,你可能知道,从canvas里面创建名叫”2d”的上下文进行绘图。也就是大家所乐道HTML5方式,但是WebGL使用的方式为”experimental-webgl”或者”webgl”,如果后者创建不成功,那么请试试前者,本教程使用前者。

请不要用爪机观看本教程,适当的动手有助于进步。以及,你必须先安装一个支持WebGL的浏览器(IE11+,chrome,firefox,opera等)

为了便于控制,我们将canvas元素写在刚才的div里面:

也许你看不出来canvas已经写进去了,那么你可以试着多点几下上面的run,我将用html5方式在上面的canvas上画出一个红色矩形

第三步

前面说了半天,还没真正说到WebGL本身。那么经过上面两小节的描述,现在进入我们的第一个WebGL小程序:hello webgl

首先,你需要初始化webgl,以获得一个上下文,让浏览器知道你想绘图到什么地方。代码类似于这样:

千万注意上面注释部分那一句,viewport设置的宽高是div的宽高,而不是canvas的,也许你想知道为什么,那么我解释一下:在设计中,你不一定想让canvas具有固定的大小,所以你可能用css控制了元素随着浏览器窗口的变化而变动,但是canvas的宽高属性是独立出来的,不受style控制,即便根据父元素改变了大小,直接获取的宽高值也不对。这里有两种解决办法,一是像上面那样写,二是使用js代码响应每一次窗口大小的变动,把canvas对象的width和height重设。后面如果涉及到复杂一点的布局的时候再讨论。

这里获取到了webgl对象,接下来就要创建Shader对象了。为了节省篇幅,后面的就不写容错代码,只写功能了:

上面这一步获取到了Shader Object对象,那么,再接下来当然是ShaderProgram了,有了program可就差不多大功告成了。

是的,代码就这么简单,我们快要看到我们的第一个webgl程序了。写了一堆辅助函数,下面就要调用它们了,但是调用就要直接写吗?不,我说了,磨刀不误砍柴工。初学一样东西,把准备工作做足,后面才方便继续。因为我们的demo是随着我们的努力不断进步了。不要说学到下一章我们就把第一章的内容丢掉这样的话。我们将在此基础上不断完善,所以这个demo的功能必须写得稍微分开一点。

接下来就是一步完成绘制的函数,加上它,就相当于我们的第一个webgl程序了:

第四步

虽然我说我们的第一个WebGL程序已经写完了,但是不是还感觉少了写什么?对,那就是显示。上面所有的代码相当于对WebGL的一个简单封装,我们要让它显示点什么东西出来才对。让我们的应用我们的封装吧:

好的,第一期教程到此为止,请关注lesson 2。系列教程地址:webgl-lesson.wysaid.org