注意：文章翻译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 id="canvas"></canvas>

    </body>

</html>

上面代码中，script.js是自己准备的包括各种处理的javascript文件。

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

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

关于着色器

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

[WebGL入门]四，渲染准备的更多相关文章

  1. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  2. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  3. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  4. 脑残式网络编程入门(四)：快速理解HTTP/2的服务器推送(Server Push)

    本文原作者阮一峰,作者博客:ruanyifeng.com. 1.前言 新一代HTTP/2 协议的主要目的是为了提高网页性能(有关HTTP/2的介绍,请见<从HTTP/0.9到HTTP/2:一文读 ...

  5. WebGL入门教程(三)-webgl动画

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(tr ...

  6. 【原创】NIO框架入门(四)：Android与MINA2、Netty4的跨平台UDP双向通信实战

    概述 本文演示的是一个Android客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo. 当前由于NIO框架的流行,使得开发大并发.高性能的互联网服务端成为可能. ...

  7. python学习笔记--Django入门四 管理站点--二

    接上一节  python学习笔记--Django入门四 管理站点 设置字段可选 编辑Book模块在email字段上加上blank=True,指定email字段为可选,代码如下: class Autho ...

  8. Swift语法基础入门四(构造函数, 懒加载)

    Swift语法基础入门四(构造函数, 懒加载) 存储属性 具备存储功能, 和OC中普通属性一样 // Swfit要求我们在创建对象时必须给所有的属性初始化 // 如果没办法保证在构造方法中初始化属性, ...

  9. Thinkphp入门 四 —布局、缓存、系统变量 （48）

    原文:Thinkphp入门 四 -布局.缓存.系统变量 (48) [控制器操作方法参数设置] http://网址/index.php/控制器/操作方法 [页面跳转] [变量调节器] Smarty变量调 ...

随机推荐

  1. 初识缓存以及ehcache初体验

    1.缓存的意义 缓存机制就是将数据库中经常使用的数据取出放入内存中.程序调用时直接从内存中取,丌用每次使用  数据都訪问数据库,这样提高了效率. 2.缓存须要关注的问题 1)  缓存的更新 缓存中的数 ...

  2. jQuery中间each实施例的方法

    $.each()和$(selector).each()很阶段似,但它是不一样的. 前者可用于遍历数组或json对象 后者被设计成遍历jQuery对象 第一个是$.each()对,通常这么用 $.eac ...

  3. 二分图行列匹配---> hdu2119,hdu1498

    hdu2119 题意:给定一个矩形方格,每个格子里面的数字是0或者1,每次操作可以把一整行或列的1变成0,问最少多少次操作能将1全部变为0 一次可以消除某一行或者某一列的1但是可以这么想,最多有多少个 ...

  4. sharepoint 2013 使用powershell更改站点集配额和锁定

    打开sharepoint powershell 2013,使用管理员方式打开 逐行输入下面命令: $Admin =  new-object Microsoft.SharePoint.Administr ...

  5. JDK源码学习系列02----AbstractStringBuilder

     JDK源码学习系列02----AbstractStringBuilder 因为看StringBuffer 和 StringBuilder 的源码时发现两者都继承了AbstractStringBuil ...

  6. [文学阅读] METEOR: An Automatic Metric for MT Evaluation with Improved Correlation with Human Judgments

    METEOR: An Automatic Metric for MT Evaluation with Improved Correlation with Human Judgments Satanje ...

  7. NPOI+ExcelReport

    分享我基于NPOI+ExcelReport实现的导入与导出EXCEL类库:ExcelUtility (续2篇-模板导出综合示例)   自ExcelUtility类推出以来,经过项目中的实际使用与不断完 ...

  8. c++分割字符串(类似于boost::split)

    由于c++字符串没有split函数,所以字符串分割单词的时候必须自己手写,也相当于自己实现一个split函数吧! 如果需要根据单一字符分割单词,直接用getline读取就好了,很简单 #include ...

  9. 关于.net MVC5+EF6 网站部署的问题

    创建mvc web application,采用code first 的方式,MVC5,EF6.0 整了一个网站.开发完之后.直接publish.就这样部署到服务器上了. 在使用过程中发现,网站打开的 ...

  10. HDU 2815 Mod Tree 离散对数 扩张Baby Step Giant Step算法

    联系:http://acm.hdu.edu.cn/showproblem.php?pid=2815 意甲冠军: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...