从零开始手撸WebGL3D引擎6:里程碑2,目前状态和展望

401 阅读4分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

最近做了很多零碎的工作,归拢了一下作为里程碑2。先上截图: mini3d.js 示例网页

这是一个脚本生成的example页面,以后所有的例子可以从这个页面进入,这样就可以查看之前的示例,也方便重构代码之后回溯。

目前,mini3d.js仍然是一个很简单的框架,千里之行,目前走了一两米。。想起来,我曾经在10年前做了一个基于固定管线OpenGL ES 1.1的跨平台2d引擎的轮子。。是我曾今花时间最多的一个轮子,并且基于这个做了一个2d物理游戏的demo,和一个简单的scene编辑器(基于wxWidgets),但是个人做引擎这种事情真的是太难(当时还和一个好哥们一起做了一段时间),而且那还不是我的第一个轮子。时过境迁,在做了很多年游戏之后,包括做了几年H5游戏,心里的那点冲动仍然在,但是也要面对现实,所以现在做的这个目标定位就是技术实践,希望在WebGL这个平台上面实现一些Unity之类游戏引擎提供的特性(当然这个目标仍然很大),至于能做到什么程度就随缘吧,毕竟疫情过去之后还是要找个工作,不能再宅了,以后这个只能是业余爱好。最近在看Unity的一些新的东西,SRP, LWRP, HDRP,Dots这些。说实话,国产开源引擎,cocos, Laya这些和Unity的差距仍然很大,虽然他们在努力的追赶,目前在H5这个赛道上,还有coocs,Laya,Egret这些引擎的市场,但是等Wasm普及之后,Unity可能是要有很大的优势的。Unity我之前也用过几年,但是中间搞了几年TCP和H5之后,现在看Unity几乎不认识了,好多新的东西,所以最近也要花时间再看一看Unity。特别是Compute Shader,SRP,HDRP这些,都是新东西,看着就挺香。看来真是人越老话越多,虽然也没人看,下面继续正题。

目前状态

里程杯2的更新包括以下一些东西:

  • 定义了app接口,现在每个例子都是一个app,然后传入mini3d.init()方法中,这样通过mini3d.js控制app的生命周期
  • 基于app接口重写了示例网页,build目录中的index.html是示例的入口
  • 增加了一个简单的资源管理系统,目前支持文本资源和图片资源的加载,支持资源的引用计数,支持资源队列下载。这个系统很简单,只是为了方便载入一些资源,如贴图和shader文件,之前的里程碑1中shader是写死在代码里面的,现在可以从文件载入了。
  • 增加了一个简单的事件系统,做一个简单的集中式的事件订阅/发布。所有事件没有优先级一律即时发送。只是为了方便解耦。
  • 增加了一个InputManger,负责PC/Mobile平台的鼠标/触摸处理,这个和事件系统配合方便在demo里面拖动物体。写这个是不想每个demo都重复一遍处理输入的代码。
  • 支持基本的Texture2D封装,包括一个引用计数管理texture的TextureManager。
  • 支持载入.obj格式的模型文件,但不支持mtl材质文件。.obj的支持也是有限的,目前只读取顶点坐标,法线和UV。如果.obj中没有顶点法线,则自动计算(基于面积和夹角权重)
  • 数学库补充中,目前vector3, matrix4, quaternion都有了。不过quaternion有部分操作还不支持。
  • scene结构,目前开了个头,打算放到下一个里程碑。

目前有两个demo:

  • Textured cube:混合了顶点色的贴图立方体。立方体手工生成。以后可能做一个基于3d shape的生成系统,方便看渲染效果。
  • Load .obj mesh: 从.obj模型文件中载入mesh。目前这个效果是一个简单的逐顶点的兰伯特diffuse+ambient效果,且光的方向和ambient色是写死在shader里面的。

下一步计划

  • 首先需要实现一个简单的scene系统,为了能在世界里面放置物体,特别是灯光和camera。可能会有frustum culling(看时间)。
  • 逐camera的forward rendering。支持mask。为了以后render to texture和post effect做准备。
  • 框架预置unifrom传入shader中,例如camera世界坐标,主光源坐标,各种矩阵等。这样就可以在shader里面写各种效果了。(还是参考了Unity)
  • 材质和材质文件。编辑器是肯定没有的,写一个材质文件吧,然后载入生成材质对象。
  • 以上这些好了之后,就差不多可以集中精力搞渲染实践了。比如将标准着色,PBR这些都实践一遍。大概按照《Unity Shader入门精要》的顺序吧。