如何构建一个面向对象的webgl渲染引擎

techbrood 发表于 2019-07-19 18:25:30

标签: webgl, engine, architecture

- +

WebGL渲染引擎主流的有three.js和babylon.js,

如果我们要自己实现一个类似的引擎,该如何设计实现呢?

基本上我们可以分解为以下5个部分:

  1. webgl渲染部分的封装

  2. 可渲染实例的抽象

  3. 光照和相机

  4. 场景和资源管理

  5. 常用的图形运算库

其中第1部分主要是整合绘制方面的一些对象,比如webgl渲染上下文(WebGL2RenderingContext),shader相关的一些对象(shader program、vertex shader、fragement shader、attributes、uniforms),以及和渲染有关的一些全局变量设置(global变量)和宏定义(macros)。我们可以把这部分视为面向画布的“画笔”对象。


第2部分一般又包含如下几个组成:

  1. 几何模型或者导入的三维模型数据,需要支持fbx、dae、gltf等主流数据格式;

  2. 材质、贴图、自定义的一些变换动画

  3. 附着在该对象上的一些控制或特效组件

第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)和欧拉角及相互转换等等。


可参考的整体架构图如下:

image.png

possitive(3) negative(0) views1269 comments0

发送私信

最新评论

请先 登录 再评论.
相关文章
  • Blender2.7给平面模型添加纹理贴图

    在blender中给模型添加纹理,需要有2个步骤:首先在对象属性栏中给该对象添加材料和纹理建立纹理映射添加材料和纹理这是常见操作,略过步骤。但是仅仅这样操作,...

  • WebAssembly工作原理和JavaScript语言性能对比分析

    本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...

  • CSS3属性选择器特性使用详解

    CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...

  • 使用CSS3 box-decoration-break特性实现多行文本样式

    当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
    按照规范...

  • 前端开发框架技术选型:Angular2 VS React VS jQuery

    Angular和React是主流的2个前端开发框架,但是严格来说两者并非对等的概念。Angular是一个基于MVC(或者MVVM)的框架,包含model(模型)/view(视图)/controll...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 使用HTML5 Canvas实现的界面元素截屏功能

    如果网站出现问题,常常需要截图来提交反馈,这个功能很实用。使用HTML5的Canvas可以实现这个目标。我们首先引入

  • 如何使用Three.js加载obj和mtl文件

    OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...

  • 浏览器控制台报JS脚本执行错误:Module is not defined

    现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
    有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使...

  • 使用Canvas绘制完美的不完美圆形

    真实世界是不完美的,当我们需要模拟真实世界时,经常需要引入不完美/不规则的形状。比如陨石、雨滴、行星、树叶、绵延的海岸线、云朵等。本文介绍如何基于Canva...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...