[WebGL入门]四,渲染准备 必须准备的东西 HTML的准备 关于着色器 着色器的处理方法 总结

注意:文章翻译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等函数非常easy能获取到这个canvas对象。获取了这个canvas之后。利用javascript能够完毕全部的操作。

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

<html>
    <head>
        <title>WebGL TEST</title>
        <script src="script.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas ></canvas>
    </body>
</html>
上面代码中,script.js是自己准备的包括各种处理的javascript文件。

canvas的大小能够在HTML中设定,当然也能够使用javascript来动态制定。

另外,全部的脚本都写在HTML中当然是能够的。个人觉得将javascript代码分离成单独的文件比較好,这个不是必须的。


关于着色器

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

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

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

假设有了固定渲染管线,编敲代码就比較easy了,由于全部的变换都是由固定渲染管线来完毕的,可是缺点就是*度低。

固定渲染管线仅仅能完毕一些最主要的操作,假设想要做一些特殊的处理。就比較麻烦了。

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

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

这样能够由程序猿控制的机制叫做可编辑渲染管线。

而着色器又有 处理几何图形顶点的顶点着色器和处理像素的片段着色器两种类型。

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


着色器的处理方法

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

实际上。着色器的加入能够有多种做法。着色器是由程序猿自己编写的,并且着色器的代码就是简单的字符串而已。

所以,无论用什么方法,仅仅要把这个着色器字符串传给程序就能够了。

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

<script >
    ※顶点着色器
</script>

<script >
    ※片段着色器
</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