如何构建一个面向对象的webgl渲染引擎
WebGL渲染引擎主流的有three.js和babylon.js,
如果我们要自己实现一个类似的引擎,该如何设计实现呢?
基本上我们可以分解为以下5个部分:
webgl渲染部分的封装
可渲染实例的抽象
光照和相机
场景和资源管理
常用的图形运算库
其中第1部分主要是整合绘制方面的一些对象,比如webgl渲染上下文(WebGL2RenderingContext),shader相关的一些对象(shader program、vertex shader、fragement shader、attributes、uniforms),以及和渲染有关的一些全局变量设置(global变量)和宏定义(macros)。我们可以把这部分视为面向画布的“画笔”对象。
第2部分一般又包含如下几个组成:
几何模型或者导入的三维模型数据,需要支持fbx、dae、gltf等主流数据格式;
材质、贴图、自定义的一些变换动画
附着在该对象上的一些控制或特效组件
第2部分的渲染,可以通过给具体的渲染实例(Render Instance)传递“画笔”对象(比如取名为shader),来调用实例具体的绘制实现(比如取名为render)方法,其基本过程就是通过shader里面设定的变量和程序来绘制模型的顶点数据(顶点数据包含顶点坐标、颜色color和法向量normal),在GPU上执行shader program,本质上还是使用webgl的drawArray或drawElements API来实际完成。
第3部分是设置3D场景可见性的核心对象,有光照我们才能看见物体,有了相机才可以确定以何种方式(距离、角度、范围)来观看场景。
对于光照和相机都会出现物体遮挡的情况,光照的遮挡产生阴影,我们预先生成阴影贴图(shadowmap)来处理,相机的遮挡出现基于深度的裁剪,我们预先生成深度贴图(depthmap)来处理。
第4部分是3D场景的管理,通常以场景树(Scene Tree)的方式来管理3D场景中所有的对象,每个节点(Scene Node)上可以加载可渲染的实体组件或者一些用于控制的组件(Component),通过组件的方式我们可以解耦和实体的表现和实体的控制,并使得功能在场景节点之间得到很好的复用。场景节点之间的位置关系是相对关系。场景中加载的所有资源,需要进行统一管理(注册、查询、销毁以及序列化和反序列化)。整个场景的渲染以及编辑修改动作,我们可以触发一些关键的事件,以让组件能对这些事件做出响应,比如一个afterRender事件,我们的组件可以侦听场景的这个事件,并在发生这个事件的时候,做一个后置处理,实现一些特效(Post Effects)。
第5部分是和计算机图形学相关的一些工具库,比如2维向量(vec2)、3维向量(vec3)、4维向量(vec4)的运算,矩阵(matrix)的运算,常用变换(平移、旋转、缩放)等、四元数(quaternion)和欧拉角及相互转换等等。
可参考的整体架构图如下:
最新评论
- 相关文章
增强现实引擎ARToolKit工作原理简介
ARToolkit是一个基于CV(计算机视觉)和Marker(标识)的开源增强现实引擎。其具备如下功能特性:A. 鲁棒跟踪,包括基于标记的跟踪与基于特征的跟踪;
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
ES6小知识:动态对象键(Dynamic Object Keys)语法简介
在ES5,对象的键(key)总是被解释为字符串。ES6允许我们使用计算的值作为对象的键,使用方括号:[myKey]const
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...计算WebGL中的uniforms变量使用数
在使用Three.js为人体模型加载皮肤材料时,启用了skinning:true的参数。有时候会导致GL编译错误,提示“too many uniforms”。下面的文章有助于理解错误原因和检...
粒子运动模拟 - Verlet积分算法简介
Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
Three.js入门教程1 - 基础知识和创建一个红色球体
[ TECHBROOD注:Three.js是一个主流的开源WebGL库,WebGL允许使用JavaScript直接操作GPU,在网页上实现3D效果。
Google的工程师Paul在网站aerotwist.com上...WebGL入门教程1 - 3D绘图基础知识
现代浏览器努力使得Web用户体验更为丰富,而WebGL正处于这样的技术生态系统的中心位置。其应用范围覆盖在线游戏、大数据可视化、计算机辅助设计、虚拟现实以及数...
如何基于Canvas来模拟真实雨景Part1:预备知识和创建基本对象
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
SVG过滤器feColorMatrix矩阵变换效果用法详解
在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...
更多...