突袭HTML5之WebGL 3D概述

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元素作为渲染的容器。例如：

<body onload="start()">

  <canvas id="glcanvas" width="640" height="480">

    Your browser doesn't appear to support the HTML5 canvas element.

  </canvas>

</body>

下面就是正式开始写脚本的时候了，首先看一下程序入口以及整体结构：

function start() {

    var canvas = 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

这个方法的代码如下：

var gl;

function initGL(canvas) {

  gl=null;

  try {

    // Try to grab the standard context. If it fails, fallback to experimental.

    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

  }

  catch(e) {}

  // If we don't have a GL context, give up now

  if (!gl) {

    alert("Unable to initialize WebGL. Your browser may not support it.");

  }

}

这个方法很简单，就是获取WebGL的绘制环境，需要把参数"webgl"传给canvas.getContext方法就行了，但是由于目前WebGL的标准没有最终定型，所以实验阶段用的参数都是"experimental-webgl"。当然你直接去调用canvas.getContext("experimental-webgl")也是可以的，等标准定下以后，你再修改一个代码。

步骤二：初始化着色器Shaders - initShaders

着色器Shader概念比较简单，说白了就是显卡运算指令。构造3D场景需要进行大量的颜色、位置等等信息的计算，如果这些计算由软件执行的话，速度会很慢。所以把这些运算让显卡去计算，速度就很快；如何去执行这些计算，就是由着色器指定的。着色器代码是用一种叫做GLSL的着色器语言编写的，这个我们不去讲述这个语言了。

着色器可以在html中定义，在代码中使用。当然了你在程序中用一个字符串去定义着色器也是一样的。

下面先看定义的部分：

<script id="shader-fs" type="x-shader/x-fragment">

    precision mediump float;

    varying vec4 vColor;

    void main(void) {

        gl_FragColor = vColor;

    }

script>

<script id="shader-vs" type="x-shader/x-vertex">

    attribute vec3 aVertexPosition;

    attribute vec4 aVertexColor;

    uniform mat4 uMVMatrix;

    uniform mat4 uPMatrix;

    varying vec4 vColor;

    void main(void) {

        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

        vColor = aVertexColor;

    }

</script>

这里有两个着色器：面着色器和顶点着色器。

关于这两个着色器，这里有必要说明一下，计算机中的3D模型基本都是由点结合三角面片去描述的，顶点着色器就是去处理这些点的数据，而面着色器就是通过插值的方式，去处理三角面片上点的数据。

上面定义的顶点着色器就定义了顶点的位置和颜色计算方式；而面着色器定义了插值点的颜色计算方式。实际的应用场景中，还会涉及到在着色器中处理光线等效果。

定义了着色器，在程序中就可以查找到它们并可以去使用：

    var shaderProgram;

    function initShaders() {

        var fragmentShader = getShader(gl, "shader-fs");

        var vertexShader = 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("Could not initialise shaders");

        }

        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文档，查找着色器的定义，拿到定义后创建着色器，这里就不细说了：

function getShader(gl, id) {

    var shaderScript, theSource, currentChild, shader;

    shaderScript = document.getElementById(id);

    if (!shaderScript) {

        return null;

    }

    theSource = "";

    currentChild = shaderScript.firstChild;

    while(currentChild) {

        if (currentChild.nodeType == currentChild.TEXT_NODE) {

            theSource += currentChild.textContent;

        }

        currentChild = currentChild.nextSibling;

    }

    if (shaderScript.type == "x-shader/x-fragment") {

      shader = gl.createShader(gl.FRAGMENT_SHADER);

    } else if (shaderScript.type == "x-shader/x-vertex") {

      shader = gl.createShader(gl.VERTEX_SHADER);

    } else {

     // Unknown shader type

     return null;

    }

   gl.shaderSource(shader, theSource);

   // Compile the shader program

   gl.compileShader(shader);  

   // See if it compiled successfully

   if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {

      alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));

      return null;

   }

   return shader;

}

步骤三：创建/加载模型数据 - initBuffers

这些小例子中，模型数据基本都是直接生成的，实际的程序中，这些数据应该都是从模型加载得到的：

    var triangleVertexPositionBuffer;

    var triangleVertexColorBuffer;

    function initBuffers() {

        triangleVertexPositionBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

        var vertices = [

             0.0,  1.0,  0.0,

            -1.0, -1.0,  0.0,

             1.0, -1.0,  0.0

        ];

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        triangleVertexPositionBuffer.itemSize = 3;

        triangleVertexPositionBuffer.numItems = 3;

        triangleVertexColorBuffer = gl.createBuffer();

        gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);

        var colors = [

            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, new Float32Array(colors), gl.STATIC_DRAW);

        triangleVertexColorBuffer.itemSize = 4;

        triangleVertexColorBuffer.numItems = 3;

    }

上面这段代码创建了三角形的顶点和顶点的颜色数据并放在缓冲区中。

步骤四：渲染 - drawScene

准备好了数据以后，交给WebGL去渲染就好了，这里调用的是gl.drawArrays方法。看代码：

    function drawScene() {

        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图形库。

前面我们看到了使用原生的WebGL API开发是多么的累，正因为如此，大量的WebGL框架被开发出来。使用这些框架，你可以快速创建需要的3D场景。这些框架不同程度的封装了创建3D场景的各种要素，例如场景，相机、模型、光照、材质等等；使用这些封装起来的对象，就可以很简单的创建需要的3D场景，这样你就只需要把更多精力放在逻辑方面就可以了。

目前并没有哪一个具有能压倒其他框架的优势，选择什么样的框，还是看个人喜好吧，不过选择框架的时候，个人觉得还是多看看框架最后的更新时间，选择稳定更新的框架能让你始终能使用上最新的特性，使你的程序稳定性更好。

下面的例子就使用了Three.js框架进行开发。

Three.js是一个比较全面的开源框架，它良好的封装的3D场景的各种要素。你可以用它来很容易的去创建摄像机，模型，光照，材质等等。你还可以选择不同的渲染器，Three.js提供了多种渲染方式，你可以选择使用canvas来渲染，也可以使用WebGL或者SVG来进行渲染。

此外，Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。而且内置了比较基础的东西：(球体)Spheres, (飞机)Planes, (立方体) Cubes, (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。

好了，不废话了，直接看代码：

<DOCTYPE html>

<html>

 <head>

  <title>threeJSDemo title>

  <meta charset="utf-8">

  <style>

   body

   {

    margin:0px;

    background-color:#B0B0B0;

    overload:hidden;

   }

  </style>

 </head>

 <body>

  <script src="Three.js">script>

  <script>

   var camera,scene,renderer;

   var mesh;

   init();

   animate();

   function init(){

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70,window.innerWidth / window.innerHeight,1,1000);

    camera.position.z = 400;

    scene.add(camera);

    geometry = new THREE.CubeGeometry(200,200,200);

    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh(geometry,material);

    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();

    renderer.setSize(window.innerWidth,window.innerHeight);

    document.body.appendChild(renderer.domElement);

   }  

   function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.05;

    mesh.rotation.y += 0.05;

    renderer.render( scene, camera );

   }

   </script>

 </body>

</html>

这个是全部的代码，相对于前面使用WebGL的API的代码，这个简直就是太简单了。

代码很直观，就那么几步：

1. 创建场景scene。

2. 创建摄像机camera。

3. 创建/加载模型geometry。

4. 加载材质material。

5. 渲染模型对象mesh(是由geometry和material组成)。

6. 启用动画。

这是每个框架都提供的功能，使用不同的框架除了函数的名称可能不同以外，这些步骤基本都是一样的。下面的参考中列出了很多的框架学习文档，大家可以选几种学习一下。

针对模型数据，我还想说一点，因为JSON短小精悍，所以比较适合网络传输。未来它可能成为最适合WebGL的模型数据格式，所以很多的框架都开始支持JSON格式的模型数据。

突袭HTML5之WebGL 3D概述的更多相关文章

基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
前言档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
根据矩阵变化实现基于 HTML5 的 WebGL 3D 自动布局
在数学中,矩阵是以行和列排列的数字,符号或表达式的矩形阵列,任何矩阵都可以通过相关字段的标量乘以元素.矩阵的主要应用是表示线性变换,即f(x)= 4 x等线性函数的推广.例如,旋转的载体在三维空间是一 ...
基于 HTML5 的 WebGL 3D 智能楼宇监控系统
前言智能监控的领域已经涉及到了各大领域,工控.电信.电力.轨道交通.航天航空等等,为了减少人员的消耗,监控系统必不可少.之前我写过一篇 2D 的智能地铁监控系统广受好评,突然觉得,既然 2D 的这么 ...
基于 HTML5 的 WebGL 3D 版俄罗斯方块
前言摘要:2D 的俄罗斯方块已经被人玩烂了,突发奇想就做了个 3D 的游戏机,用来玩俄罗斯方块...实现的基本想法是先在 2D 上实现俄罗斯方块小游戏,然后使用 3D 建模功能创建一个 3D 街机模 ...
系列文章--突袭HTML5之Javascript
突袭HTML5之Javascript API扩展5 - 其他扩展突袭HTML5之Javascript API扩展4 - 拖拽突袭HTML5之Javascript API扩展3 - 本地存储突袭H ...
系列文章--突袭HTML5
学习新的网站构建技术:基于HTML5,但不限于HTML5. 突袭HTML5之Javascript API扩展5 - 其他扩展突袭HTML5之Javascript API扩展4 - 拖拽 ...
WebGL实现HTML5贪吃蛇3D游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...
8月7号晚7点Autodesk北京办公室，我们来聊聊HTML5/ WebGL 3D 模型浏览技术
Autodesk 发布了一款完全无需插件的三维模型浏览器 Autodesk 360 Viewer,大家有没有兴趣,下班后过来聊聊吧! 8月7号周四, 19:00~21:00 Autodesk北京 ...
基于 WebGL 的 HTML5 楼宇自控 3D 可视化监控
前言智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...

随机推荐

C#_技巧：窗口抖动
原理 * 窗口抖动:即每隔一段很小的时间,窗口位置发生变化 * 时间控制:利用for循环||利用timer * 窗口位置发生变化:控件Left/Top属性或Location属性, 注:Left/To ...
Windows 7 IE主页被篡改，如何修复？
有时我们的电脑会因为病毒的入侵,使得IE主页被篡改,然后就会被没底线的广告包围,有时用杀毒软件也不修复,那么此时应该怎么修复呢?其实很简单,只需几步,就可以让您的电脑重新清净下来. 第一步点击“开始 ...
修改SQL SERVER表,并添加说明
alter table dbo.user_PersonManagement add F_FGBM nvarchar(500)GO EXEC sys.sp_addextendedproperty @na ...
高性能Server---Reactor模型
原文地址:http://www.ivaneye.com/2016/07/23/iomodel.html 无处不在的C/S架构在这个充斥着云的时代,我们使用的软件可以说99%都是C/S架构的! 你发邮 ...
多线程编程-工具篇-BlockingQueue
在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全"传输"数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序 ...
Method Swizzling
学习博客: http://www.cocoachina.com/ios/20160121/15076.html (这个作者太牛了,写了我一直想知道的类簇的swizz方法) 一. 一般的swizz 先给 ...
JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别
JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的 ...
word嵌入图片部分被段落遮挡
这是因为图片所在段落的行距被设置为固定行距造成的解决办法: 把图片所在段落的行距改为单倍行距
C#类和接口
1.类的定义 C#使用类关键字class定义类,如: public class MyClass { } 2.类的继承类继承使用: public class BaseClass { } public ...
TypeScript & JavaScript
http://www.typescriptlang.org/docs/tutorial.html handbook: Basic Types Variable Declarations Interfa ...

突袭HTML5之WebGL 3D概述

突袭HTML5之WebGL 3D概述的更多相关文章

随机推荐

热门专题