[WebGL入门]四，渲染准备

时间 2019-11-26

标签 webgl 入门渲染准备繁體版

原文原文链接

注意：文章翻译http://wgld.org/，原做者杉本雅広(doxas)，文章中假设有个人额外说明，我会加上［lufy：］。另外。鄙人webgl研究还不够深刻，一些专业词语，假设翻译有误，欢迎你们指正。javascript

必须准备的东西

上次介绍了3D画图的基础知识。html

讲了一下由Z坐标的不一样决定的两种坐标系。以及坐标变换的种类。这一次，说一说实际WebGL画图的时候必须准备的东西。java

首先，HTML。javascript相关的基础知识就不解释了。假设，有不明确的单词或概念的话。请本身查一下。web

我是以为你有必定的HTML和javascript基础的前提下进行解说的。canvas

HTML的准备

就像前面说的那样(二，開始WebGL以前，先了解一下canvas)。WebGL利用的是canvas的画图区域。也就是说。使用WebGL的网页，HTML里面确定含有canvas标签。浏览器

向这个canvas标签上加入一个ID属性，在javascript中使用getElementById等函数很是easy能获取到这个canvas对象。获取了这个canvas以后。利用javascript可以完毕所有的操做。函数

一个最低限度的HTML模版，就是像如下这样。webgl

<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来动态制定。spa

另外，所有的脚本都写在HTML中固然是可以的。我的以为将javascript代码分离成单独的文件比較好，这个不是必须的。.net

关于着色器

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

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

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

假设有了固定渲染管线，编敲代码就比較easy了，因为所有的变换都是由固定渲染管线来完毕的，但是缺点就是自由度低。

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

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

前面说了。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