最好的HTML5 WebGL中文资讯站！
1,198 次浏览
WebGL专题沙龙上海站即将召开！报名即可参加！还有意外的奖品等待大家！欢迎报名！
959 次浏览
在 Google I/O 2012 中，技术人员最喜欢的环节也许不只是炫目的发布会，还有非正式的技术讨论会（Fireside Chat），它只对开发者开放，并且不谈论任何商业话题，只讨论技术。在今年的这一环节中，大家纷纷聚焦于 Chrome for Android 这一王者浏览器的移动版本。其中，嘉宾透露了 Chrome for Android 将确定支持 WebGL 这一信息。
1,875 次浏览
苹果从 iOS 4.2 开始在自己的广告网络 iAd 中支持 WebGL，去年11月有人发现可以通过使用私有 API 将 WebGL 支持扩展到 UIWebView 的其他使用场合。自从 iOS 5.1.1 可以被成功越狱只会，在 iOS 上开启 WebGL 就变得更加简单了。
WebGL Enabler 是由 Demoseen.com 的作者开发的一款可以在 iOS 设备上开启 WebGL 支持的软件，安装之后可以让所有的 UIWebView 控件支持 WebGL，也就是说不但是原装自带Safari浏览器，也包括了其他的使用了 UIWebView 空间的第三方浏览器（例如腾讯浏览器HD）。
833 次浏览
历经2011年的“HTML5来敲门”沙龙；8大城市的HTML5技术沙龙普及；2011年中国最大的几次行业HTML5盛会：“拥抱HTML5”“HTML5在中国”“HTML5年会”的成功召开，以及各大浏览器、HTML5游戏公司纷纷加入W3C组织，HTML5已经逐渐在国内崭露头角，成为年度互联网行业的绝对最热闹关键词之一。
2,214 次浏览
最近HTML5游戏小有爆发之势。网页游戏如浪潮般流行开来，开发者也已经开始把寻找一套上手的API和其他开发工具列入日程。Rob Hawkes热衷于高歌赞颂HTML5和HTML5网页游戏。Rob是一名图形程序员，也是Mozilla的技术文章作者和布道师，目前正在负责Mozilla在游戏方面的工作以及开发社区。下面是他在于墨尔本举行的“Web Directions Code”大会上的演讲的核心内容，其中向我们展示了HTML5游戏是如何正在迅速的成为现实。
3,538 次浏览
感谢HiWebGL访客 故攻 的推荐！
推荐一个相当不错的WebGL应用，这个应用是由CCP Games官方发布的，可供用户在浏览器框架中把玩其游戏大作《星战前夜OL》游戏中各种飞行器模型。 是对HTML5、WebGL以及多种渲染技术的综合应用，呈现的效果非常棒。 另外其源代码未经过多混淆，可以拿来作技术研究借鉴之用。
1,448 次浏览
由 HiWebGL、HTML5 梦工场联合主办、Khronos Group 和 ARM 中国区大学计划提供支持的中国国内首次 WebGL 交流沙龙于 5 月 19 日在北京举行。
1,385 次浏览
对于互联网来说，除了HTML5和CSS3之外，WebGL也是一项最有前途的正在进化的技术之一。从简单的模型查看器到复杂的3D场景，由OpenGL ES驱动的网页结合CSS3和视频纹理也许会成为下一代互联网网页的主流。由于应用广泛，富WebGL应用程序必须易于搭建和渲染，缩短响应时间，提供更好的可扩展性。这正是当前对于这些WebGL框架来说最为迫切的需求。
1,414 次浏览
Sunglass，一家成立不久的创业公司，不仅将CAD软件搬到了浏览器上，同时还让用户免费使用基础的CAD功能（更多功能需要付费）。它就像3D模型版的Google Docs一样，不仅可以在上面创建、设计CAD模型，同时还可以和他人通过语音或文字交流来协作完成3D建模设计。
973 次浏览
5 月 9 日，Firefox 正式宣布在当天的编译的 Nightly 版本中提供对 WebGL 纹理压缩扩展的支持。此前，WebKit 也已经悄悄将纹理压缩扩展并入最新的版本。
因为目前纹理压缩依然处于草稿状态，所以和其他扩展一样依然使用了厂商前缀，在 Firefox 中此扩展的名称是“MOZ_WEBGL_compressed_texture_s3tc”，而在 Chrome 和 Safari 等 WebKit 核心的浏览器中为“WEBKIT_WEBGL_compressed_texture_s3tc”。
加入我们的QQ群
HiWebGL技术讨论群①群群号（已满）②群群号（已满）③群群号（已满）④群群号（已满）⑤群群号（已满）500人群群号欢迎各位程序员和工程师加入！
HiWebGL产业讨论群①群群号（已满）②群群号欢迎关注Web3D发展的从业者与富有理想与激情的创业者朋友加入！
关注我们的新浪微博！[哆啦A梦吃惊] : 因写了抢猫粮插件被抓的小喵。 来自 转发微博 : 在看颜的时代，如何让一款游戏画面更具高bigger？从8位像素画风到1080P/4K，再到ARM的Enlighten全局光照技术，能够分分钟变化出数十种光照效果，再挑的玩家都给它点赞了，不信你就来看看[围观][围观] 来自 转发微博 : 你知道使用 target='_blank' 也会有安全漏洞么？尤其是在各种 UGC 网站中。不过小编早就玩过了，其实一般倒也不会用在钓鱼上，而是用在各种各样的广告点击中。推荐文章《target='_blank' 安全漏洞示例》地址
$w 来自 不做游戏，帮转 : 有做WebVR游戏的公司么，求合作。求圈内大神帮忙转发。@寒冬winter @大城小胖 @w3cplus 来自 阿里云OSS是否支持websockets?有人知道吗？ 来自 文章点击排行
- 54,569 次浏览 - 40,260 次浏览 - 28,001 次浏览 - 21,941 次浏览 - 20,535 次浏览 - 11,161 次浏览 - 6,817 次浏览 - 6,695 次浏览 - 6,642 次浏览 - 6,457 次浏览
Designed by . In collaboration with , , .&>&Oak3D_v_0_5_4.js
Oak3D_v_0_5_4.js
上传大小：436KB
关于学习oak必备的库，另加一个实例源码：
&html lang=&zh-CN&&
&title&WebGL中文教程 - 由HiWebGL翻译整理，感谢Oak3D提供图形库支持！&/title&
&meta charset=&UTF-8& /&
[removed][removed]
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
attribute vec3 aVertexP
uniform mat4 uMVM
uniform mat4 uPM
void main(void) {
gl_Position = uPMatrix * uMVM
atrix * vec4(aVertexPosition, 1.0);
function initGL(canvas) {
gl = canvas.getContext(&experimental-webgl&);
gl.viewportWidth = canvas.
gl.viewportHeight = canvas.
} catch (e) {
if (!gl) {
alert(&Could not initialise WebGL, sorry :-(&);
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
var str = &&;
var k = shaderScript.firstC
while (k) {
if (k.nodeType == 3) {
str += k.textC
k = k.nextS
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);
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
var shaderP
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.pMatrixUniform = gl.getUniformLocation(shaderProgram, &uPMatrix&);
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, &uMVMatrix&);
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix.toArray());
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix.toArray());
var triangleVertexPositionB
var squareVertexPositionB
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
var vertices = [
-1.0, -1.0,
1.0, -1.0,
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, -1.0,
-1.0, -1.0,
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
pMatrix = okMat4Proj(45, 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);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
mvMatrix = okMat4Trans(1.5, 0.0, -7.0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
function webGLStart() {
var canvas = document.getElementById(&lesson01-canvas&);
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
WebGL中文教程，由HiWebGL翻译整理，感谢&a href=&http://www.oak3d.com&&Oak3D&/a&提供图形库支持!&br/&
&a href=&http://www.hiwebgl.com/?p=93&&&& 回到Lesson 1&/a&&br /&
&canvas id=&lesson01-canvas&& width=&500& height=&500&&&/canvas&
&a href=&http://www.hiwebgl.com/?p=93&&&& 回到Lesson 1&/a&&br /&
[removed][removed]&noscript&&a href=&http://www.linezing.com&&&img src=&http://img.tongji.linezing.com/2578423/tongji.gif&/&&/a&&/noscript&
...展开收缩
综合评分：4
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有5条
最近学webgl，正好要用到，多谢楼主分享！
很好的webgl库
确实可用~~~~感谢分享~~~~
综合评分：
积分/C币：3
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
Oak3D_v_0_5_4.js
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
xiaosi1202
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
Oak3D_v_0_5_4.jsOak3D 教程 – 第一课: Oak3D Engine 绘制流程 - 推酷
Oak3D 教程 – 第一课: Oak3D Engine 绘制流程
本系列文章是Oak3D这套WebGL图形引擎的教程，面向广大开发者，既包括拥有图形开发经验的图形工程师，也包括第一次接触或者尚未接触计算机图形学的前端工程师。我们力图在教程中尽量用浅显易懂的语言和实例去解释那些专业和复杂的计算机图形学知识和数学知识；实时上，Oak3D本身也是一套很傻瓜的图形引擎，它本身可以自动完成大量具体的图形渲染的细节工作，开发者只需要编写上层逻辑即可。所以这两点应该是非常贴切的，希望大家能够喜欢这套教程。如果有什么意见和建议，请给我们留言。
准备工作：
请下载并安装好
或者其他你喜欢的支持WebGL的浏览器。
具体信息请参考
，并为以上浏览器做必要的设置。
代码编辑器
请准备好你喜欢的IDE，例如Visual Studio、Apanta，或者使用Notepad++、Sublime Text、UltraEdit等文本编辑器。
Oak3D是由Oak3D Team开发的一套的WebGL框架，它的最大优势是流程清晰、简单易用、性能高效。开发人员，尤其是不熟悉计算机图形学的前端开发人员，可以不必关注底层的渲染细节，而把主要精力都放到上层逻辑上。WebGL的底层绘制细节都会由Oak3D负责完成。许多复杂功能，例如动态光影等，都不需要开发者特别编写专门的代码，只需要用简单的参数设置开启或关闭即可，Oak3D会自动帮你完成剩下的所有工作。
在本节课中提到的所有的专业术语，比如Array Buffer等等，你都不需要理解它们的具体含义，本节课的目的只是让大家能够对使用Oak3D Engine进行WebGL开发的基本流程做一个了解。
Oak3D分为两层——Oak3D Core和Oak3D Engine。
Oak3D Core
Oak3D Core封装了WebGL的底层接口，既有类似于Array Buffer、Frame Buffer、Render Buffer和Texture等渲染管线的基础元素，也有处理模型、材质、相机和骨骼动画等必备功能，并增加了图形开发所必需的数学库。以下是Oak3D Core层中封装的主要对象：
okArrayBuffer
okFrameBuffer
okMaterial
okRenderBuffer
okSkeletonAnimation
Math library
Oak3D Engine
Oak3D 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应用的流程有个基本的认识了。
让我们用浏览器打开这个Demo，你会看到我们在一个黑色的画布上绘制了一个球体线框。下面，让我们用代码编辑器打开这个index.html文件，来详细看一下代码。
首先，如何使用Oak3D引擎呢？要使用Oak3D引擎非常简单，你只需要把Oak3D的JavaScript库文件引入到网页中即可。
&script type=&text/javascript& src=&Oak3D_v_0_5_4.js&&&/script&
然后让我们从代码最下面的&body&开始看起。首先，你可以看到我们为&body&的onload事件添加了一个函数调用，也就是说在载入&body&的时候，我们会调用这个名字叫做onLoad()的函数。你也许已经猜到了，我们就是要把所有的WebGL的绘制代码都放到这个onLoad()函数中。
接着，可以看到我们在页面中添加了一个id为RenderArea的&div&标签，然后整个HTML文件就结束了。
你肯定会感到奇怪——“&canvas&元素到哪里去了？不是说WebGL是在&canvas&元素里进行绘制的嘛？”别着急，这是因为Oak3D可以帮助你自动生成&canvas&，所以我们甚至连添加Canvas的代码都可以省掉了！
让我们接着往上，看一看onLoad函数，你就都明白了！
首先我们要做的就是判断用户当前的浏览器是否支持WebGL，这也是建议大家在编写任何WebGL应用时都要做的第一件事。
var ifWebglSupport = okIsSupportWebGL();
if (!ifWebglSupport){
alert(&Sorry, your browser doesn't support WebGL!&);
在Oak3D中，okIsSupportWebGL()函数是一个非常实用的工具，它可以从根本上判断当前浏览器是否支持WebGL。这样我们就不需要再手动编写额外的代码来进行浏览器判断。
var myCanvas = okGenCanvas(800, 600, document.getElementById(&RenderArea&));
做了必要的判断之后，我们马上就先满足你的愿望，这也是大家对WebGL的基本认知——我们使用okGenCanvas()函数生成了一个&canvas&元素，其中的参数的含义是：这个&canvas&宽800像素、高600像素，它的父级元素的id是RenderArea，这恰好就是我们在&body&中添加的那个&div&标签的id。这样当浏览器读取到这一行代码的时候，Oak3D就会自动在指定id的父级元素下，创建一个指定大小的&canvas&元素。
为什么我们要用这种方式生成&canvas&元素呢？理由如下：
通过参数化的生成，将来在实际产品的开发中，我们可以灵活控制&canvas&的尺寸大小和位置，为上层逻辑服务。
Oak3D的okGenCanvas()函数并不只是直接创建一个&canvas&元素那么简单，它会在创建时完成各种浏览器层的兼容工作。在目前，使用okGenCanvas()函数创建的&canvas&的最大好处就是可以很好的兼容IEWebGL这个著名的插件，而直接在HTML代码中添加的&canvas&却不能；在未来，如果浏览器厂商在桌面或者移动设备平台上对于&canvas&的创建产生了分歧，那么使用传统方法添加&canvas&的开发者不得不再次回到为各个浏览器做兼容的噩梦中去，而使用okGenCanvas()函数则可以避免这种情况，Oak3D的开发者会将这些兼容判断都封装到此函数中，从而掩盖不同浏览器造成的差异性。
接下来，我们创建了一个新的引擎配置对象（okEngineSetting），并把刚刚创建的&canvas&元素指定为该引擎配置文件中的canvas。
var myEngineSetting = new okEngineSetting();
myEngineSetting.canvas = myCanvas;
然后，我们正式创建了一个新的Oak3D引擎对象（okEngine），并且使用刚才创建的引擎配置文件来初始化这个引擎对象。
myEngine = new okEngine();
var ifEngineInitialize = myEngine.init(myEngineSetting);
if (!ifEngineInitialize){
alert(&Sorry, failed to initialize Oak3D engine!&);
在Oak3D中初始化引擎时，引擎的初始化方法，即okEngine.init()将会返回一个布尔值，如果这个布尔值为true，则表示初始化成功；如果为false，则表示初始化失败。
接下来，我们通过为mySceneManager变量赋值，获取到了我们引擎的场景管理器。然后，我们使用引擎管理器创建了一个名字叫做myScene的场景。
var mySceneManager = myEngine.getSceneManager();
myScene = mySceneManager.createScene(&myScene&);
有了场景，我们就可以在场景中摆放相机了。
myCamera = myScene.createCamera();
myCamera.setViewport(0, 0, 800, 600); //set the viewport of the camera
myCamera.setBackColor(0.0, 0.0, 0.0, 1.0); //set the back ground color of the camera viewport
myCamera.setProjMode(OAK.PROJMODE_PERSPECTIVE); //set the projection mode
myCamera.setFov(45) //set field of view
myCamera.setVisibleRange(1.0, 10000.0); //set visible distance
myCamera.setPos(0.0, 0.0, 20);
//set the camera position
现在，你暂时还不需要理解相机的各种设置的具体含义，你只需要想象一下，我们添加了一个场景，而你就是摄影师，你可以在场景中摆放相机了！相机决定了观众也就是用户能看到的图像。
设置好了相机，但是场景还是空的，下面我们就要在这个场景中添加实体了！所谓的实体，也就是我们场景中的演员和布景，你可以把它们想象成《泰坦尼克号》这部电影中的东西，在电影中矮穷不丑的Jack、白富美的Rose和高富帅的未婚夫这些活人演员都是场景中的实体，还有那条大船、那些盘子、甚至垃圾箱这些死物也都是场景中的实体。于是，我们使用createEntity()方法在场景中添加了一个类型为OAK.ETYPE_CUSTOM_MESH的实体。
var mySphere = myScene.createEntity(OAK.ETYPE_CUSTOM_MESH, &MySphere&);
通过指定OAK.ETYPE_CUSTOM_MESH参数，我们创建了一个名称为“MySphere”的okCustomMeshEntity实体对象。查看一下Oak3D API参考手册对它的描述——“允许开发者直接控制几何体数据”，意如其名，okCustomMeshEntity就是允许开发者自定义实体的模型几何体的数据。
然后，我们又通过为mySphereMesh变量赋值，获取到了刚刚创建的mySphere这个实体的内置Mesh。
var mySphereMesh = mySphere.getMesh();
如果你不知道Mesh是什么也不要紧，其实很简单。所谓的Mesh，就是模型、网格模型。同样，现在你暂时只需要这样理解就够了。
okGenSphereMesh(mySphereMesh, 5, 30, 30, true);
在Oak3D中，开发者封装了很多内置的几何体图形，例如矩形、立方体、球体、圆柱体、平截头体和圆锥体，如果场景内需要绘制这些图形，那么开发者不必自己编写具体的代码，也不需要导入任何模型，只要调用相应的接口，就可以自动生成这些图形。在这里，我们使用okGenSphereMesh()函数生成了一个半径为5，纵向和横向切分都是30的球体，并且开启了线框模式，最后将这个生成的球体网格储存在mySphereMesh，也就是我们刚刚创建的那个实体的内置Mesh——换句话说，我们把刚刚创建的实体的内置Mesh设置为球体网格。另外，你可以根据Oak3D API参考手册，把这条语句替换成别的什么图形，比如生成一个立方体或者圆锥体。
接下来的几条语句暂时不需要你做过多的理解，所以我们放到一起讲解。
mySphere.computeBoundingBox();
mySphere.setPos(0, 0, 0);
mySphere.getMaterial().enableWireframe(true);
mySphere.getMaterial().setEmissive(1, 1, 1);
在生成了球体网格之后，我们先在第34行计算了这个球体网格的包围盒；在第35行设置了球体网格的位置；在第36行对材质开启了线框模式；在第37行设置了自发光颜色为白色。
到这里为止，我们已经完成了全部的准备工作，从创建引擎配置文件、建立引擎开始，到最后添加场景、在场景里添加实体并设置它的位置和颜色等等，我们已经万事俱备了，只差最后的绘制了。让我们开始吧！
var myRenderer = myEngine.getRenderer();
myRenderer.beginView(myCamera);
myRenderer.renderScene(myScene);
myRenderer.endView();
//present the image to the canvas
myRenderer.present();
我们还是通过给myRenderer这个变量赋值的方法获取到了我们的引擎的渲染器，所有的最终绘制工作都将由渲染器完成。我们将我们的相机作为渲染开始的视图，然后开始渲染场景，最后渲染结束。最后，我们用okRenderer.present()方法将最终的渲染结果呈现到&canvas&上。
到此为止，我们实现了我们的第一个Hello, world程序。我们在Oak3D中完成了一个标准的WebGL绘制过程。让我们重新回顾一下这个过程。
好了，以上就是使用Oak3D Engine绘制图形的基本流程，是不是傻瓜啊？
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致