[WebGL入门]四,渲染准备

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


必须准备的东西

上次介绍了3D绘图的基础知识。讲了一下由Z坐标的不同决定的两种坐标系,以及坐标变换的种类。这一次,说一说实际WebGL绘图的时候必须准备的东西。

首先,HTML,javascript相关的基础知识就不解释了。如果,有不明白的单词或概念的话,请自己查一下。我是认为你有一定的HTML和javascript基础的前提下进行讲解的。


HTML的准备

就像前面说的那样(二,开始WebGL之前,先了解一下canvas),WebGL利用的是canvas的绘图区域。也就是说,使用WebGL的网页,HTML里面肯定含有canvas标签。

向这个canvas标签上添加一个ID属性,在javascript中使用getElementById等函数很容易能获取到这个canvas对象,获取了这个canvas之后,利用javascript可以完成所有的操作。

一个最低限度的HTML模版,就是像下面这样。

<html>
    <head>
        <title>WebGL TEST</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
</html>
上面代码中,script.js是自己准备的包含各种处理的javascript文件。canvas的大小可以在HTML中设定,当然也可以使用javascript来动态制定。

另外,所有的脚本都写在HTML中当然是可以的,个人认为将javascript代码分离成单独的文件比较好,这个不是必须的。


关于着色器

WebGL中,所谓的固定渲染管线是不存在的。估计会有人问,什么是固定渲染管线?先来简单说明一下。

固定渲染管线,简单来说,就是3d渲染所进行的一连串的计算流程,就像流水线一样。(说的有点太简单了。)

固定渲染管线中,上次所说的模型,视图,投影的坐标变换都会替我们完成。不需要理解细节,只需要知道所有的这些坐标变换都包含在里面,都会帮我们计算好。

如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了。

好了,固定渲染管线就说到这里了。

前面说了,WebGL中不存在固定渲染管线。也就是说,坐标变换必须全部由自己来做。而且,这个记述了坐标变换的机制就叫做着色器(Shader)。

这样可以由程序员控制的机制叫做可编辑渲染管线。而着色器又有 处理几何图形顶点的顶点着色器和处理像素的片段着色器两种类型。

由于WebGL中没有固定管线,所以必须准备好顶点着色器和片段着色器。


着色器的处理方法

顶点着色器和片段着色器要怎么准备呢?

实际上,着色器的添加可以有多种做法。着色器是由程序员自己编写的,而且着色器的代码就是简单的字符串而已。所以,不管用什么方法,只要把这个着色器字符串传给程序就可以了。

最简单的方法,就是把着色器记录在HTML中。使用这种方法的话,是利用HTML的script标签来做的。下面是一个简单的例子。

<script id="vshader" type="x-shader/x-vertex">
    ※顶点着色器
</script>

<script id="fshader" type="x-shader/x-fragment">
    ※片段着色器
</script>
canvas也一样,为了在javascript中可以调用,给script标签加上了id属性。另外,type属性是和javascript不同的,不要误认为是javascript代码。

>>指定type属性的理由

type属性指定了[x-shader/x-vertex]和[x-shader/x-fragment],这并不是HTML中定义的正式的写法。但是一般的浏览器如果遇到不识别的标签的话会无视掉的,浏览器不会认为这是javascript代码的。浏览器只会把它当成无意义的字符串,而程序中则可以使用标签里面的内容。

另一个,也可以不使用script标签来做。

主要是因为着色器的代码就是简单的字符串,可以直接在javascript内部定义字符串。这样的话,着色器被定义在了javascript文件中,HTML的代码就变的简单多了,并不是说,这种做法比前一种做法好。


总结

使用WebGL进行3D渲染,这次说了下面几个必须要做的准备。

最低限度,需要HTML,canvas标签,处理WebGL的javascript代码,顶点着色器和片段着色器的代码。

另外,比如要描画3D模型的模型数据,图片文件等当然有时候也是需要的,但是根据你用WebGL想要做的东西不同而不同。真要说最新限度的话,只需要一个HTML文件。javascript代码和着色器代码都可以记录在HTML文件中。

基本上,本网站的所有javascript代码都是记录在单独的文件内的,而着色器的代码,也不是必须记录在HTML中,要根据情况随机应变吧。


下次,介绍3D绘图的核心内容,矩阵。


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

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

抵扣说明:

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

余额充值