本系列文章是Oak3D这套WebGL图形引擎的教程，面向广大开发者，既包括拥有图形开发经验的图形工程师，也包括第一次接触或者尚未接触计算机图形学的前端工程师。我们力图在教程中尽量用浅显易懂的语言和实例去解释那些专业和复杂的计算机图形学知识和数学知识；实时上，Oak3D本身也是一套很傻瓜的图形引擎，它本身可以自动完成大量具体的图形渲染的细节工作，开发者只需要编写上层逻辑即可。所以这两点应该是非常贴切的，希望大家能够喜欢这套教程。如果有什么意见和建议，请给我们留言。
目录
准备工作： 浏览器请下载并安装好Google Chrome浏览器、Mozilla Firefox浏览器或者其他你喜欢的支持WebGL的浏览器。
具体信息请参考，并为以上浏览器做必要的设置。
代码编辑器请准备好你喜欢的IDE，例如Visual Studio、Apanta，或者使用Notepad++、Sublime Text、UltraEdit等文本编辑器。
Oak3D简介Oak3D是由Oak3D Team开发的一套的WebGL框架，它的最大优势是流程清晰、简单易用、性能高效。开发人员，尤其是不熟悉计算机图形学的前端开发人员，可以不必关注底层的渲染细节，而把主要精力都放到上层逻辑上。WebGL的底层绘制细节都会由Oak3D负责完成。许多复杂功能，例如动态光影等，都不需要开发者特别编写专门的代码，只需要用简单的参数设置开启或关闭即可，Oak3D会自动帮你完成剩下的所有工作。
注意：在本节课中提到的所有的专业术语，比如Array Buffer等等，你都不需要理解它们的具体含义，本节课的目的只是让大家能够对使用Oak3D Engine进行WebGL开发的基本流程做一个了解。
Oak3D分为两层——Oak3D Core和Oak3D Engine。
Oak3D CoreOak3D Core封装了WebGL的底层接口，既有类似于Array Buffer、Frame Buffer、Render Buffer和Texture等渲染管线的基础元素，也有处理模型、材质、相机和骨骼动画等必备功能，并增加了图形开发所必需的数学库。以下是Oak3D Core层中封装的主要对象：
Oak3D EngineOak3D Engine是建立在Oak3D Core层之上的一层，它完全基于现代图形引擎的理念开发，进一步将底层渲染细节再次进行二次封装，封装之后的Engine层只需要简单的参数配置就可以实现大量原本非常复杂的图形显示效果。在Oak3D API参考手册中除了上面列出的Core层的封装对象之外，其余的类都属于Engine层；要注意的是，其中用于封装材质对象的okMaterial是Core层和Engine层共用的。因为Engine层是基于Core层开发的，所以Engine层的对象可以调用包括Core层在内的所有接口，但Core层不能调用Engine层的对象。所以，在okMaterial中，有一部分接口只能在Engine层使用。
因为Oak3D Engine的简单易用，它非常贴合于我们实际工作生活中的需求，方便我们快速出活儿，因此在这套教程中我们会重点介绍如何使用Oak3D Engine开发WebGL应用。
Oak3D Engine绘制流程看完上面的叙述，如果你从未接触过图形开发，可能还是一头雾水。不过别急，下面让我们来看一个最基本的Demo，看完这个Demo，我想你应该会对使用Oak3D开发WebGL应用的流程有个基本的认识了。
Oak3D 教程 – 第一课: Oak3D Engine 绘制流程
让我们用浏览器打开这个Demo，你会看到我们在一个黑色的画布上绘制了一个球体线框。下面，让我们用代码编辑器打开这个index.html文件，来详细看一下代码。
首先，如何使用Oak3D引擎呢？要使用Oak3D引擎非常简单，你只需要把Oak3D的JavaScript库文件引入到网页中即可。
5 script>
然后让我们从代码最下面的<body>开始看起。首先，你可以看到我们为<body>的onload事件添加了一个函数调用，也就是说在载入<body>的时候，我们会调用这个名字叫做onLoad()的函数。你也许已经猜到了，我们就是要把所有的WebGL的绘制代码都放到这个onLoad()函数中。
接着，可以看到我们在页面中添加了一个id为RenderArea的<div>标签，然后整个HTML文件就结束了。
你肯定会感到奇怪——“<canvas>元素到哪里去了？不是说WebGL是在<canvas>元素里进行绘制的嘛？”别着急，这是因为Oak3D可以帮助你自动生成<canvas>，所以我们甚至连添加Canvas的代码都可以省掉了！
让我们接着往上，看一看onLoad函数，你就都明白了！
首先我们要做的就是判断用户当前的浏览器是否支持WebGL，这也是建议大家在编写任何WebGL应用时都要做的第一件事。
9 10 11 12 ifWebglSupport
在Oak3D中，okIsSupportWebGL()函数是一个非常实用的工具，它可以从根本上判断当前浏览器是否支持WebGL。这样我们就不需要再手动编写额外的代码来进行浏览器判断。
13 document.
做了必要的判断之后，我们马上就先满足你的愿望，这也是大家对WebGL的基本认知——我们使用okGenCanvas()函数生成了一个<canvas>元素，其中的参数的含义是：这个<canvas>宽800像素、高600像素，它的父级元素的id是RenderArea，这恰好就是我们在<body>中添加的那个<div>标签的id。这样当浏览器读取到这一行代码的时候，Oak3D就会自动在指定id的父级元素下，创建一个指定大小的<canvas>元素。
为什么我们要用这种方式生成<canvas>元素呢？理由如下：
接下来，我们创建了一个新的引擎配置对象（okEngineSetting），并把刚刚创建的<canvas>元素指定为该引擎配置文件中的canvas。
14 15 myEngineSetting.canvas = myCanvas;
然后，我们正式创建了一个新的Oak3D引擎对象（okEngine），并且使用刚才创建的引擎配置文件来初始化这个引擎对象。
16 17 18 19 20 myEngine ifEngineInitialize ifEngineInitialize
在Oak3D中初始化引擎时，引擎的初始化方法，即okEngine.init()将会返回一个布尔值，如果这个布尔值为true，则表示初始化成功；如果为false，则表示初始化失败。
接下来，我们通过为mySceneManager变量赋值，获取到了我们引擎的场景管理器。然后，我们使用引擎管理器创建了一个名字叫做myScene的场景。
21 22 myScene
有了场景，我们就可以在场景中摆放相机了。
23 24 25 26 27 28 29 myCamera myCamera.myCamera.myCamera.myCamera.myCamera.myCamera.
现在，你暂时还不需要理解相机的各种设置的具体含义，你只需要想象一下，我们添加了一个场景，而你就是摄影师，你可以在场景中摆放相机了！相机决定了观众也就是用户能看到的图像。
相关文章
精彩导读
热门资讯
关注我们
