HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
作者：佚名
字体：[ ] 来源：互联网 时间：01-31 10:58:21
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。WebGL同canvas 2D的API一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2D不同的就是3D涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容。
浏览器的支持由于微软有自己的图形发展计划，一直不支持WebGL，所以IE目前除了安装插件外，是无法运行WebGL的。其他的主流浏览器如Chrome、FireFox、Safari、Opera等，都装上最新的版本就可以了。除了浏览器要装最新的外，还要保证显卡的驱动也是最新的。装上这些以后，可以打开浏览器，输入下面的网址验证一下浏览器对WebGL的支持情况：http://webglreport.sourceforge.net/。
在正常安装以上浏览器之后还是不能运行WebGL，那你可以强制开启WebGL支持试一试。开启方法如下：Chrome浏览器我们需要为Chrome加入一些启动参数，以下具体操作步骤以Windows操作系统为例：找到Chrome浏览器的快捷方式，右键点击快捷方式，选择属性；在目标框内，chrome.exe后面的引号后面，加入以下内容：
--enable-webgl--ignore-gpu-blacklist--allow-file-access-from-files
点击确定后关闭Chrome，然后用此快捷方式启动Chrome浏览器。几个参数的含义如下：--enable-webgl的意思是开启WebGL支持；--ignore-gpu-blacklist的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL；--allow-file-access-from-files的意思是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不添加这个参数。
Firefox浏览器Firefox的用户请在浏览器的地址栏输入&about:config&，回车，然后在过滤器（filter）中搜索&webgl&，将webgl.force-enabled设置为true；将webgl.disabled设置为false；在过滤器（filter）中搜索&security.fileuri.strict_origin_policy&，将security.fileuri.strict_origin_policy设置为false；然后关闭目前开启的所有Firefox窗口，重新启动Firefox。前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不设置此项。
Safari浏览器在菜单中找到&属性&&&高级&，选中&显示开发菜单&，然后到&开发&菜单，选中&开启WebGL&。
下面的代码只是简单总结一下相关的概念，它来源于参考中的中文教程，涉及较多的3D方面的知识。感兴趣的同学直接可以跳到实用参考中的中文教程中学习，比我这里讲解的要详细和准确的多。凑热闹的同学简单看看就可以了，不用深究每一行代码的含义。
准备工作这个不用说了，就是在页面上添加一个canvas元素作为渲染的容器。例如：代码如下:&bodyonload="start()"&&canvasid="glcanvas"width="640"height="480"&Yourbrowserdoesn'tappeartosupporttheHTML5canvaselement.&/canvas&&/body& 下面就是正式开始写脚本的时候了，首先看一下程序入口以及整体结构：代码如下:functionstart(){varcanvas=document.getElementById("glcanvas");initGL(canvas);initShaders();initBuffers();gl.clearColor(0.0,0.0,0.0,1.0);gl.enable(gl.DEPTH_TEST);drawScene();} 这里的几个方法代表了典型的WebGL的绘制步骤：步骤一：初始化WebGL工作环境 - initGL这个方法的代码如下：代码如下:functioninitGL(canvas){gl=try{//Trytograbthestandardcontext.Ifitfails,fallbacktoexperimental.gl=canvas.getContext("webgl")||canvas.getContext("experimental-webgl");}catch(e){} //Ifwedon'thaveaGLcontext,giveupnowif(!gl){alert("UnabletoinitializeWebGL.Yourbrowsermaynotsupportit.");}} 这个方法很简单，就是获取WebGL的绘制环境，需要把参数&webgl&传给canvas.getContext方法就行了，但是由于目前WebGL的标准没有最终定型，所以实验阶段用的参数都是&experimental-webgl&。当然你直接去调用canvas.getContext(&experimental-webgl&)也是可以的，等标准定下以后，你再修改一个代码。
步骤二：初始化着色器Shaders - initShaders着色器Shader概念比较简单，说白了就是显卡运算指令。构造3D场景需要进行大量的颜色、位置等等信息的计算，如果这些计算由软件执行的话，速度会很慢。所以把这些运算让显卡去计算，速度就很快；如何去执行这些计算，就是由着色器指定的。着色器代码是用一种叫做GLSL的着色器语言编写的，这个我们不去讲述这个语言了。着色器可以在html中定义，在代码中使用。当然了你在程序中用一个字符串去定义着色器也是一样的。下面先看定义的部分：代码如下:&scriptid="shader-fs"type="x-shader/x-fragment"&pvaryingvec4vCvoidmain(void){gl_FragColor=vC}&/script&&scriptid="shader-vs"type="x-shader/x-vertex"&attributevec3aVertexPattributevec4aVertexCuniformmat4uMVMuniformmat4uPMvaryingvec4vCvoidmain(void){gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);vColor=aVertexC}&/script& 这里有两个着色器：面着色器和顶点着色器。关于这两个着色器，这里有必要说明一下，计算机中的3D模型基本都是由点结合三角面片去描述的，顶点着色器就是去处理这些点的数据，而面着色器就是通过插值的方式，去处理三角面片上点的数据。上面定义的顶点着色器就定义了顶点的位置和颜色计算方式；而面着色器定义了插值点的颜色计算方式。实际的应用场景中，还会涉及到在着色器中处理光线等效果。定义了着色器，在程序中就可以查找到它们并可以去使用：代码如下:varshaderPfunctioninitShaders(){varfragmentShader=getShader(gl,"shader-fs");varvertexShader=getShader(gl,"shader-vs");shaderProgram=gl.createProgram();gl.attachShader(shaderProgram,vertexShader);gl.attachShader(shaderProgram,fragmentShader);gl.linkProgram(shaderProgram);if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)){alert("Couldnotinitialiseshaders");}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor");gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");} 着色器是有了，但是怎么让显卡去执行，Program就是这种桥梁，它是WebGL原生的二进制码，它的作用基本上就是让显卡运行着色器代码去渲染指定的模型数据。这里还用到一个辅助方法getShader，这个方法就是遍历html文档，查找着色器的定义，拿到定义后创建着色器，这里就不细说了：代码如下:functiongetShader(gl,id){varshaderScript,theSource,currentChild,shaderScript=document.getElementById(id);if(!shaderScript){}theSource="";currentChild=shaderScript.firstCwhile(currentChild){if(currentChild.nodeType==currentChild.TEXT_NODE){theSource+=currentChild.textC}currentChild=currentChild.nextS}if(shaderScript.type=="x-shader/x-fragment"){shader=gl.createShader(gl.FRAGMENT_SHADER);}elseif(shaderScript.type=="x-shader/x-vertex"){shader=gl.createShader(gl.VERTEX_SHADER);}else{//Unknownshadertype}gl.shaderSource(shader,theSource);//Compiletheshaderprogramgl.compileShader(shader);//Seeifitcompiledsuccessfullyif(!gl.getShaderParameter(PILE_STATUS)){alert("Anerroroccurredcompilingtheshaders:"+gl.getShaderInfoLog(shader));}} 步骤三：创建/加载模型数据 - initBuffers这些小例子中，模型数据基本都是直接生成的，实际的程序中，这些数据应该都是从模型加载得到的：代码如下:vartriangleVertexPositionBvartriangleVertexColorBfunctioninitBuffers(){triangleVertexPositionBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);varvertices=[0.0,1.0,0.0,-1.0,-1.0,0.0,1.0,-1.0,0.0];gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);triangleVertexPositionBuffer.itemSize=3;triangleVertexPositionBuffer.numItems=3;triangleVertexColorBuffer=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);varcolors=[1.0,0.0,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,1.0,1.0];gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);triangleVertexColorBuffer.itemSize=4;triangleVertexColorBuffer.numItems=3;} 上面这段代码创建了三角形的顶点和顶点的颜色数据并放在缓冲区中。步骤四：渲染 - drawScene准备好了数据以后，交给WebGL去渲染就好了，这里调用的是gl.drawArrays方法。看代码：代码如下:functiondrawScene(){gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);pMatrix=okMat4Proj(45.0,gl.viewportWidth/gl.viewportHeight,0.1,100.0);mvMatrix=okMat4Trans(-1.5,0.0,-7.0);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);setMatrixUniforms();gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);} 这个函数首先设置了3D世界的背景为黑色，然后设置投影矩阵，设置待绘制对象的位置，然后根据缓冲中的顶点和颜色数据，绘制对象。这里还有一些生成投影矩阵和模型视图矩形的辅助方法(使用了Oak3D图形库中的矩阵辅助方法)与主题关系不大，这里就不详细解释了。基本上流程就是这么多了，更复杂的纹理，光线等都是在这些基础上加入一些WegGL的特性实现的，这个请参看后面的中文教程，里面有详细的例子。
怎么样？使用原生的WebGL开发是一种什么感受？不仅需要有深厚的3D知识，还需要知道各种实现细节。WebGL这样做是为了灵活的适应各种应用场景，但是对于大多数像我这样非专业人士来说，很多细节是不需要知道的。这样就催生了各种辅助开发的类库，例如这节用到的Oak3D库(为了演示WebGL开发，例子中只用到了矩阵辅助方法)。下一节会介绍一个用的比较多的Three.js图形库。
实用参考：中文教程：
开发中心：
大家感兴趣的内容
12345678910
最近更新的内容谷歌人体浏览器怎么用，怎么开启WebGL_百度知道9612人阅读
javascript（3）
在支持mono-design的过程中，还是有些用户不是很清楚如何启动WebGL，尤其是在XP的环境下，所以简单总结了下，WebGL在主流的浏览器上如何设置，但是对于IE没有详细介绍，由于IE11才支持WebGL，IE6-10只能使用其他办法，所以后期用单独一篇介绍IE的情况
要运行WebGL，必须有一个支持它的浏览器。先来看看在桌面平台上有哪些设备和平台已经支持WebGL了
Google Chrome 9及以上版本Mozilla Firefox 4以及上版本Safari 5.1及以上版本（仅限于Mac OS X操作系统，不包括Windows操作系统；所有情况下必须强制开启WebGL支持，请参考下文）Opera Next 即Opera 12 alpha及以上版本IE并不支持WebGL(IE11支持WebGL)，但是可以下载并安装这个插件，或来运行一些WebGL应用
那么这些浏览器该如何启用WebGL呢，请看下面解决方法：
Chrome浏览器
需要为Chrome加入一些启动参数，以下具体操作步骤(以Windows操作系统为例)
1、找到Chrome浏览器的快捷方式，如果没有就创建一个快捷方式（右键点击chrome.exe，选择“创建快捷方式”或者“发送到”→“桌面快捷方式”），右键点击快捷方式，选择属性。
2、在目标框内，双引号的后边，空格，然后加入以下内容
--enable-webgl --ignore-gpu-blacklist --allow-file-access
3、设置完成的后的快捷方式属性窗口看起来应当是这样的，注意“目标”文本框：
4、关闭目前开启的所有Chrome窗口，然后用此快捷方式启动Chrome浏览器。
--enable-webgl
的意思是开启WebGL支持
--ignore-gpu-blacklist
的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL
--allow-file-access-from-files
的意思是允许从本地载入资源
Firefox浏览器
1、Firefox的用户请在浏览器的地址栏输入“about:config”，回车
2、在过滤器（filter）中搜索“webgl”
3、通过双击的方式将webgl.force-enabled的值设置为true
4、通过双击的方式将webgl.disabled的值设置为false
5、在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”
6、通过双击的方式将security.fileuri.strict_origin_policy的值设置为false
7、关闭目前开启的所有Firefox窗口，然后重新启动Firefox。
其中前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源
如果强制开启了WebGL，还是不能运行，更多信息可参考
我在Window XP上测试Firefox的WebGL时，在强制开启了WebGL后，仍然得到Error: WebGL: Error during ANGLE OpenGL ES initialization
悲催的发现Firefox对厂家的不支持和硬件不支持(分别在虚拟机上和显卡为Intel G31/G33 chipset)
On Windows
All vendors other than AMD/ATI, NVIDIA, Intel are blocked (bug 623338). This was required primarily by various crashes on virtual machines with unusual vendor names (bug 621411). We’re open to whitelisting more vendors if needed.
If force-enabling a feature doesn’t work, that probably means that your hardware doesn’t support it. For example, layers acceleration currently requires support for 4Kx4K textures, which rules out some graphics cards, like the Intel G31/G33.
Safari浏览器
1、进入“偏好设置 (Preferences)”菜单并点击高级 (Advanced)
2、选中复选框“在菜单栏中显示‘开发’菜单 (Show Develop menu in the menu bar)”
3、从“开发 (Develop)”菜单中启用 webGL，勾选“启用WebGL”
4、允许从本地载入资源，勾选“停用本地文件限制”
这里要强调：如果电脑的显卡非常老旧，或者是板载的集成显卡，那么需要在浏览器中强制开启WebGL支持；另外因为其他的一些原因（比如操作系统是Windows XP），在正常安装以上浏览器之后还是不能运行WebGL，最好也强制开启WebGL支持
如何判断自己目前的浏览器是否支持WebGL？
如果显示Yay，说明浏览器支持WebGL如果显示Nay，说明浏览器目前还不能运行WebGL
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：97988次
排名：千里之外
原创：17篇
转载：10篇
(1)(3)(1)(1)(1)(2)(1)(1)(2)(1)(1)(1)(1)(3)(5)(1)(2)如何在Internet Explorer 11中开启WebGL
稿源：Lao3D
感谢的投递
正如我们，国外开发者Francois Remy在泄露版Windows Blue附带的Internet Explorer 11中发现，WebGL接口已经封装完成，但功能上还未能开放支持。在这之后，另一名开发者Rafael Rivera继续深入挖掘，竟然发现了在此版本的Internet Explorer 11中开启WebGL支持的方法。
实际上方法简单地称奇。首先你必须已经安装了Windows 8 Blue build 9364和最新的显卡驱动（系统自带的显卡驱动在OpenGL方面支持不足），然后只需要简单地导入以下的注册表脚本即可。
Windows&Registry&Editor&Version&5.00
[HKEY_CURRENT_USER\Software\Microsoft\Internet&Explorer\Main\FeatureControl]
[HKEY_CURRENT_USER\Software\Microsoft\Internet&Explorer\Main\FeatureControl\FEATURE_WEBGL]
"iexplore.exe"=dword:
[HKEY_CURRENT_USER\Software\Microsoft\Internet&Explorer\Main\FeatureControl\FEATURE_WEBGL_HLSL_SHADERS]
"iexplore.exe"=dword:
需要特别值得注意的是其中最后一个FEATURE_WEBGL_HLSL_SHADERS的键值，如果设置为1，那么会让Internet Explorer 11使用IESL代替GLSL作为着色器语言。如果设置为0，则符合先在大多数WebGL应用的习惯。目前IE 11对WebGL的支持度仍然非常有限，你可以把一下代码另存为HTML文件，然后在IE
11中打开，你会发现网页中出现一片蓝色的区域，而这正代表着网页成功获得了名为“experimental-webgl”的3D绘制上下文——
Internet Explorer 11终于支持WebGL了！
&body&onload="demo()"&
&canvas&style="height:&100%;&width:&100%"&id='webgl'&/&
var&gl&=&{};
function&demo()
&&var&canvas&=&document.getElementById("webgl");
&&&&gl&=&canvas.getContext("experimental-webgl");
&&}&catch(e)&{&}
&&if&(gl)&{
&&&&gl.clearColor(0,&0.678,&0.937,&1.0);
&&&&gl.clear(gl.COLOR_BUFFER_BIT);
下面附上IE 11运行的视频：
回顾过去，自从WebGL这项新的网页图形规范提出伊始，微软就从未表露出喜色。在2011年6月，微软更是雇佣一家欧洲安全机构对WebGL提出
最强烈的质疑，认为让网页直接暴露给GPU是非常危险的行为。如果真要认真地从技术上讲，微软当时主要发难于跨域资源、DoS攻击以及直接操控GPU。
虽然作为一个刚刚诞生的技术标准，WebGL的确有很多路要走，但是如此兴师动众的指责让很多对这项新技术充满希望的开发者感到微软有些过分。当时
开发者普遍认为微软对于WebGL的指责不是从技术角度出发的，而是完全出于商业目的。著名的WebGL开发者和布道师Gregg
Tavares更是祭出一篇题目直接带着脏字的战斗檄文直斥微软。参见：
在震惊业界的斥责之后，WebGL工作组把工作重心转移到了致力于解决安全问题上，一直到今天Khronos Group在GDC 2013上最新公布的WebGL 1.0.2标准中还是把安全放在了首位。
随后在2012年，微软指责WebGL的多项安全软肋都已经取得了极为有效的解决进展：现在CORS已经可以有效的解决跨域资源的问题；而许多厂商
也已经部署了GL_ARB_robustness扩展来解决DoS攻击问题，并且WebGL工作组还在继续寻找其他的解决办法。至于直接操控GPU的问
题，则是无法避免的，只要一种技术可以直接与GPU对话都会造成一定程度的安全威胁，在2011年于墨尔本召开的一次技术大会上，有人用相同的原理在
Microsoft Silverlight 5、Adobe Flash 11和WebGL上实现了同样的漏洞攻击。
尽管微软仍然对WebGL持抗拒态度，但是在2011年8月举办的Siggraph 2011上，却爆出IE 10即将支持Typed
Array（类型化数组）的消息。微软拒绝了WebGL，但却抵不住诱惑，引进了因为WebGL才诞生的Typed
Array，这项技术允许开发者直接在Web上操控二进制数据。日，微软IE官方博客发表了一片名为《 Working with
Binary Data using Typed Arrays》的文章，正式为 IE10 引进了Type Array。
时光荏苒，微软此后在多个场合多次被问到关于WebGL的问题，但微软发言人永远都是微笑的避而不答，当然有时候也会重复一下安全问题这个老梗。
日，在香港举办的World Internet Developers’ Summit活动中，微软高级布道师Giorgio
Sardo做了《切绳子游戏的幕后故事》的演讲，在提问环节中有人提出IE将会在什么时候支持WebGL的问题，他的回答是“Not
now”。令人感动的是他没直接说“never”实在是太给面子了。
随着WebGL的日渐成熟，越来越多的WebGL实例和应用脱引而出，微软逐渐意识到了不管他们是否要支持WebGL，他们现在缺乏一种网页图形技术来让自己的浏览器在网页视觉领域和Mozilla、Google、Opera来抗衡。
2012年11月，CNET 的记者 Shankland 采访了微软网络标准工作组的领导人、同时也是 W3C HTML 工作组的联合主席
Paul Cotton。他依然用安全问题作为挡箭牌，但是却破天荒指出IE团队对开发者关于IE缺乏图形API的诟病深表理解，他说：“我们依然坚持对
WebGL 的安全问题表示担忧。如果要我们支持 WebGL，那么就必须毫无余地的解决这些安全问题。从 IE8、IE9 到
IE10，每次我们宣布添加新的特性的时候，都会有人反馈要求支持其他功能，而在这些人们呼吁的功能中 WebGL 绝对是位居前五位的。我们对 IE
博客上的留言非常清楚，也很明白现在的状况。在 Web 上开发可交互的 3D 图形的确很棒。如果我们可以解决安全问题，那我想我们会认真地寻找一种为
Web 引入 3D 图形的方法。”
此后，Windows Blue泄露，开发者意外发现IE 11已经封装好WebGL接口，并且可以通过注册表开启支持，这样才有了本文开头的一幕。
这正是四年盘踞龙虎斗，微软终将入大流！欢迎IE 11加入WebGL大家庭！
[责任编辑：ugmbbc]
-5-4-3-2-1012345
当前平均分: 打分后显示
-5-4-3-2-1012345
当前平均分: 打分后显示
Advertisment ad adsense googles}