WebGL初探

来源：互联网发布：大数据思维与决策心得编辑：程序博客网时间：2024/06/06 06:39

一、什么是WebGL?

“WebGL -OpenGL ES 2.0 for the Web”这是WebGL的官网首页上最明显的标题，可以说是对WebGL简明扼要的概括，那么是什么意思呢？就是网页版的OpenGL ES 2.0。可能有人会问什么是OpenGL ES 2.0，这里就暂不讨论。

对于WebGL，官方给出的进一步解释是：一个基于OpenGL ES 2.0的跨平台，免税的用于开发低级别的3D图形的API Web标准，它通过HTML5的Cavnas元素作为对象模型的借口展示出来。

二、WebGL能做什么？

WebGL使得浏览器拥有不用插件就可以展示3D特性的权利。

三、那些浏览器支持WebGL?

苹果的Safari，谷歌的Chrome，FireFox（火狐）,Opera等主要浏览器（IE反对采用WebGL，因为一直以来OpenGL 和开发InternetExplore 的Microsoft公司独自开发的三维图形API(DirectX)处于竞争者关系。）

四、如何使用WebGL？

1. 环境要求：

１．文本编辑器（什么都没有也没关系）
２．运行WebGL的浏览器（推荐：Google Chrome）
３．调试器（推荐：Google Chrome）
４．WebGL库 Three.js

2. 获取Tree.js：

登录https://github.com/mrdoob/three.js/，点击下图红框部分进行下载：

3. 使用WebGL：

解压下载好的zip文件（我的是mrdoob-three.js-r49-0-g40649e0.zip）,拷贝build里面的Tree.js到你要使用WebGL网页所在的工作目录,在html文件中通过“<script src="Three.js"></script>”语句引入Tree.js文件，然后就可以在javaScript中使用WebGL

4、WebGL试运行

在任意位置创建文件夹dirname，按照第三步将Tree.js拷贝到该文件夹中,创建文本文档，将以下代码拷贝到其中，并保存为test.html,然后点击即可在支持WebGL的浏览器中看到一个红色的长方体了。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Three.js测试</title><script src="Three.js"></script><style type="text/css">div#canvas-frame{  border: none;  cursor: pointer;  width: 600px;  height: 600px;  background-color: #EEEEEE;}</style><script>  var renderer;  function initThree(){    width = document.getElementById('canvas-frame').clientWidth;    height = document.getElementById('canvas-frame').clientHeight;    renderer =new THREE.WebGLRenderer({antialias:true});    renderer.setSize(width, height );    document.getElementById('canvas-frame').appendChild(renderer.domElement);    renderer.setClearColorHex(0xFFFFFF,1.0);  }   var camera;  function initCamera(){    camera =new THREE.PerspectiveCamera(45, width / height ,1,10000);    camera.position.x=100;    camera.position.y=20;    camera.position.z=50;    camera.up.x=0;    camera.up.y=0;    camera.up.z=1;    camera.lookAt({x:0, y:0, z:0});  }  var scene;  function initScene(){       scene =new THREE.Scene();  }  var light;  function initLight(){    light =new THREE.DirectionalLight(0xFF0000,1.0,0);    light.position.set(100,100,200);    scene.add(light);  }  var cube;  function initObject(){      cube =new THREE.Mesh(         new THREE.CubeGeometry(50,50,50),                //设定形状         new THREE.MeshLambertMaterial({color: 0xff0000})//设定材质    );    scene.add(cube);    cube.position.set(0,0,0);  }  function threeStart(){//    initThree();    initCamera();    initScene();       initLight();    initObject();    renderer.clear();    renderer.render(scene, camera);  }</script></head> <body onload="threeStart();"><div id="canvas-frame"></div></body></html>

效果图如下：

五、使用Tree.js的步骤参照如下：

1. 画布的准备：

在HTML文件中直接添加Cavans元素，或者通过javaScript向HTML文件添加Cavans，如document.getElementById('canvas-frame').appendChild(renderer.domElement);

注意：最好要给Cavans元素设置id或名字

2. Three.js的初始化（initThree()）

三维空间里的物体映射到二维平面的过程被称为三维渲染。一般来说我们都把进行渲染操作的软件叫做渲染器。

上例进行下面这些处理：

(0) 声明全局变量（对象）
(1) 获取画布的大小
(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）
(3) 指定渲染器的高宽（和画布框大小一致）
(4) 追加【canvas】元素
(5) 设置渲染器的清除色(clearColor)

3. 相机的准备（initCamera()）

OpenGL（WebGL）中、三维空间中的物体投影到二维空间的方式中，存在透视投影和正投影两种相机。透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。正投影就是不管物体和视点距离，都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体，因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。

上例按照以下的步骤设置透视投影方式。

(0) 声明全局的变量（对象）
(1) 设置透视投影的相机
(2) 设置相机的位置坐标
(3) 设置相机的上为「z」轴方向
(4) 设置视野的中心坐标

4. 场景的准备（initScene()）

场景就是一个三维空间。用 [Scene] 类声明一个叫 [scene] 的对象。

5. 光源的准备（initLight()）

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。作为对应，Three.js中可以设置点光源(Point Light)、聚光灯(Spot Light)、平行光源(Direction Light)和环境光(Ambient Light)。在一个场景中可以设置多个光源。基本上，都是环境光和其他几种光源进行组合。如果不设置环境光，那么光线照射不到的面会变得过于黑暗。

上例中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。
(0) 声明全局变量(对象)
(1) 设置平行光源
(2) 设置光源向量
(3) 追加光源到场景

6. 物体的装备（initObject()）

按照已设定的相机来观察场景中的物体的方式来进行实际绘制。

7. 执行绘制（threeStart()）

本文大力参考了一下文章：http://www.hiwebgl.com/?p=1058