如何构建一个面向对象的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)和欧拉角及相互转换等等。
可参考的整体架构图如下:
最新评论
- 相关文章
Monaco Editor 编辑器拷贝粘贴功能调用和获取选中文本
有时候需要在monaco editor外部调用编辑器的内置功能比如希望在页面主工具栏实现一些快捷操作。button
前端开发框架技术选型:Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...
Three.js入门教程2 - 着色器(下)
这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程。
WebGL入门教程4 - 使用纹理贴图(Texture Map)
3D建模和纹理贴图的关系就好比人体和皮肤(或着装)的关系,3D建模用来处理空间属性,而贴图适合用来处理细腻的表面属性。如果不使用贴图,而想在表面达到足够的...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
如何基于Canvas来模拟真实雨景Part2:重力掉落和雨滴融合
jQuery Ribbles - 基于WebGL的水面涟漪动效插件
使用jQuery
D3.js读取外部json数据
D3.js是一个很好的数据可视化工具,支持从web服务读取json数据,或者从外部文件如.json, .csv文件中直接读取。由于部分服务比如flickrs上的图文数据服务需要VPN...
inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移
在表单修改界面中常会使用一个标签、一个内容加一个修改按钮来组成单行界面,如图1所示。那么在表单总长度受限的情况下,当中间的邮箱名称过长时,会遮盖到旁边...
Processing.js和P5.js的功能简介和区别
什么是ProcessingProcessing是关于数字艺术的编程语言,支持跨平台,语言本身是一个类Java语言,程序文件的后缀为.pde。
什么是Processing.js为了能让Proce...如何使用CSS3实现一个3D商品标签
使用3D缎带形状的标签是常见的一个设计模式,用在商品折扣、文章标题或网站推荐信息上,来突出显示重点内容,吸引用户视觉焦点。实现的方法有2种,一种是使用背...
div 、section 、article的区别和使用场景
div 、section 、article的区别和使用场景
主要区别,以及适用场合如下:
1、div在html早期版本就支持了,section和article是html5提出的两个雨衣话标... 更多...