Metaverse exploration path

foreword—

The Metaverse is developing in full swing and has the potential to lead the trend of the future. For our professional (web front-end) team, the Metaverse is a big (wan) field (quan) (bu) (dong), so the team has invested a lot of manpower in this area for pre-research and summary , please step into the mysterious world of the Metaverse with this article.

Metaverse and 3D—

The Metaverse, or Metaverse, Metaverse, Metaverse, Enchanted Realm, Hypersensory Space, and Virtual Space, is a network of 3D virtual worlds focused on social links. Discussions about the metaverse are mainly about a persistent and decentralized online three-dimensional virtual environment. This virtual environment will be accessible through virtual reality glasses, augmented reality glasses, cell phones, personal computers and video game consoles into the artificial virtual world. The above Wikipedia explanation of the metaverse.

I believe that everyone is still as confused as I am. Maybe we still don't understand what the metaverse is at this time, but this leads to an important concept - 3D virtual world.

The word 3D virtual world can be divided into 3 words to understand: 3D, virtual, world. 3D means three-dimensional, which refers to a space system formed by adding a direction vector to a plane two-dimensional system; virtual is an imitation or pseudo-real object constructed using technologies such as models; the world is the sum of things composed of many virtual substances. That is, a virtual scene, large or small.

In the process of Metaverse development, 3D technology is inseparable from model design and production and scene construction involved. It can be said that 3D technology is the cornerstone of Metaverse development. Therefore, on the road of exploration of the metaverse, the first step must be 3D technology research.

3D technology selection—

WebGL that is persuaded to quit before getting started

WebGL is a 3D drawing protocol and a JavaScript API that renders high-performance interactive 3D and 2D graphics in any compatible web browser without the need for plug-ins. In other words, WebGL is the basis for running 3D effects on the browser.

But WebGL's entry barrier is enough to dissuade most developers. Starting from the most basic shaders, we also need to learn image processing, spatial processing, matrix operations, and even geometric logic.

Our team's small partners have done a WebGL sharing, in which just implementing a WebGL version of Hello World exceeds more than 40 lines of code, not to mention the concepts that need to be involved in the code:

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const vertex = `
  attribute vec2 position;
  void main() {
    gl_Position = vec4(position, 1.0, 1.0);
  }
`;
const fragment = `
  precision mediump float;
  void main()
  {
    gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
  }    
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertex);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
const points = new Float32Array([
  -1, -1,
  0, 1,
  1, -1,
]);
const bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);
const vPosition = gl.getAttribLocation(program, 'position');
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, points.length / 2);

所以如果使用 WebGL 从零开始，无疑是非常艰难的挑战。于是我们把目光投向了 3D 引擎。

抱有幻想的 3D 引擎

我们可以把 3D 引擎看成是一个封装了 3D API、图形通用算法、底层算法的工具。通常 3D 引擎都搭配有具备可视化操作界面的编辑器，即便是从零开始，通过创建 3D 类型的节点，甚至只需要拖动编辑器上的 3D 模型，我们就可以快速的搭建一个 3D 场景。相比于晦涩难懂的 WebGL，3D 引擎对于初学者无疑更友好。

Unity 3D

Unity 3D 可以说是市面上使用率最高的 3D 引擎，它具有生态好、功能支持全面、项目优化好等等优点。但是！它可以做到现在的市场规模与地位，隐藏在它背后成功的商业模式功不可没，遗憾的是，它是收费的，而且价格不菲。在没有产生经济效益的预研阶段，我们不希望投入太大的经济成本，因而放弃。

以下是使用 Unity 3D 完成的 Demo 效果：

LayaBox

LayaBox 是一个国产的游戏引擎品牌，旗下的 LayaAir 支持 JS、TS 等语言，且可以兼容使用 Unity 3D 导出的地形、组件、物理引擎、动画、摄影机和粒子等元素，因此一个不成熟的想法油然而生，使用 Unity 3D 编辑然后导出场景，然后使用 LayaAir 绑定交互事件后打包发布，这样就可以完美的避开授权费用了？但是很可惜，我们经过尝试后发现，Layabox 的免费范围也仅针对 IDE 基础功能，对于后边可能用到的 IDE 企业会员专属功能，也是收费的，且官方要求的在首页注明「Powered by LayaAir Engine」，这与我们的商业标准不符，所以也告别了商用的可能性。

Egret

Egret 也是一款国产的游戏引擎，它一开始就专注 h5 开发，在 h5 方面支持较好，但是它原本是专注于 2D 领域的，在 3D 方向起步较晚，很多官方的文档都还不健全，因此上手难度较大，遇到问题只能摸着石头过河，遂 pass。

Godot

Godot 是一款完全免费的游戏引擎，它支持跨平台编辑与发布，但是在打包发布到 h5 页面后，我们发现它打包出来的模型文件较大，这对于移动端加载体验来说是比较致命的问题；而且渲染效果也较为粗糙，模型渲染出现了比较明显的锯齿现象；H5 导出格式支持 WebAssembly 和 WebGL，但是 WebGL 尚不支持任何 IOS 的浏览器。以上种种都不符合我们对元宇宙的预期，因此也只能无奈放弃。

为方便对比，我们做了以下表格进行总结：

引擎名称	使用价格	脚本语言	支持模型格式
Unity 3d	每年1800$（个人）	C#	.fbx、.dae、.3ds、.dxf、.obj
Egret	免费	TypeScript	.obj、.gltf
Godot	免费	GDScript	.obj、.dae、.gltf、.escn、.fbx
Layabox	免费	TS\JS\AS3	.fbx、.dae、.3ds、.dxf、.obj

至此，3D 引擎幻想泡灭。

回首拥抱的 BabylonJS

其实除了上述 3D 引擎，我们一开始就想到的还包括 BabylonJs 和 ThreeJs 这两个主流的 3D 框架。作为市面上比较流行的 3D 框架，它们的文档完善度和学习资源丰富度都没有问题。而在这两者的对比上，我们觉得 ThreeJS 与其说是框架，不如说是一个库，它对 WebGL 进行了封装，将复杂的接口简单化，将对象结构数据化，的确是个不错的选择；而相较而言，BabylonJS 在模块化层面则更清晰，也更像是一个框架，并且它拥有不亚于 ThreeJS 丰富度的学习资源，最终成为了我们团队敲定的技术选型。

开展工作—

头脑风暴

作为大促开发团队，我们希望 3D 预研成果能够最终落地到我们的活动。因此在作品定向的讨论上，我们最终敲定了要实现一个虚拟商场。3D 人物模型可以在一个布满各种商品的 3D 商场中行走，它可以运动到心仪的商品前进行预览，甚至可以实现不同 3D 场馆的切换。

素材格式

在明确了作品方向后，我们需要视觉同学提供相关的模型素材。

在众多的 3D 模型格式中，我们最后选择了 .gltf 格式。相对于其他模型格式，.gltf 可以减少 3D 格式中与渲染无关的的冗余数据，从而确保文件体积更小。目前 3D 素材相对来说都比较大，这对于移动端加载体验来说，无疑是致命的。因此拥有更小体积的格式，也拥有了更高的优先选择权。

除此之外，.gltf 是对近二十年来各种 3D 格式的总结，使用最优的数据结构，从而保证最大的兼容性以及可伸缩性，在拥有大容量的同时，支持更多的拓展，比如支持多贴图、多动画等。

所以 .gltf 成为了我们与视觉约定好的唯一素材格式。

开发痛点

模型边界

问题描述：没有判断模型边界，导致模型可以超过合理范围去放大与缩小。
解决方式：从设计规范出发，开发与设计对齐规范，严格按照统一尺度输出模型。

碰撞检测

问题描述：没有做好碰撞检测，导致人物模型可以穿透场景模型。
解决方式：除了输出常规显示的模型，还需要输出不用于显示的低模，利用低模来实现碰撞检测，降低碰撞的计算量；添加寻路系统，当运动模型自动行走时，可以自动绕开障碍物模型。
优化前：
优化后：

场景切换

问题描述：场景切换时，镜头会旋转。
解决方式：切换场景时，需要对不展示的场景关闭控制。需要注意的是，在初始化场景时，通常会伴随着初始化控制，最好在构建函数的最后关闭控制，在当前场景下再开启控制，保证场景控制的唯一性。

内存开支严重

问题描述：内存占用率大，游戏运行一段时间后，手机会有发热和卡顿等现象。
解决方式：控制内存开销，切换场景时，清空其他场景，避免无效的内存占用。
优化前：
优化后：

作品展示—

场景切换：

商品材质切换：

欢迎大家查看链接预览链接^[1]

小结—

元宇宙是一个很庞大的概念，此时只是萌芽阶段，正如我们的探索，必然也存在许多不成熟的地方。但我们相信这是未来的一个方向，也相信我们的产品形态会日益丰富与成熟。

让我们共同期待！