关于javascript:元宇宙探索之路

前言

元宇宙正在热火朝天地倒退，大有引领将来潮流之势。对于咱们这么业余的（web 前端）团队来说，元宇宙是一个大 (wan) 显 (quan) 身 (bu) 手 (dong) 的畛域，因而团队在这方面投入了很多人力进行预研和总结，请随本文一起踏入元宇宙的神秘世界。

元宇宙与 3D

元宇宙，或称为后设宇宙、形上宇宙、元界、魅他域、超感空间、虚空间，是一个聚焦于社交链接的 3D 虚拟世界之网络。对于元宇宙的探讨，次要是探讨一个长久化和去中心化的在线三维虚拟环境。此虚拟环境将能够通过虚拟现实眼镜、加强事实眼镜、手机、个人电脑和电子游戏机进入人造的虚拟世界。
以上维基百科对于元宇宙的解释。

置信大家和我一样仍然看得一头雾水。或者咱们此时还是不明确何为元宇宙，然而由此引出了一个重要的概念—— 3D 虚拟世界。

3D 虚拟世界 这个词，能够拆分成 3 个单词来了解：3D、虚构、世界。3D 即三维，是指在立体二维系中又退出了一个方向向量形成的空间系；虚构即应用模型等技术构建的仿实物或伪实物；世界则是由很多虚构物质形成的事物的总和，即一个个或大或小的虚构场景。

在元宇宙倒退的过程中，波及到的模型设计制作、场景搭建，都离不开 3D 技术，能够说 3D 技术是元宇宙倒退的基石。因而在元宇宙的摸索之路上，迈出去的第一步也必然是 3D 技术钻研。

3D 技术选型

未入门即劝退的 WebGL

WebGL 是一种 3D 绘图协定，也是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需应用插件。换句话说，WebGL 是在浏览器上运行 3D 成果的根底。

然而 WebGL 的入门门槛足够劝退大部分开发者。从最根本的着色器开始，还须要咱们去学习图像处理、空间解决、矩阵运算、甚至是几何逻辑等。

咱们团队的小伙伴做过一个 WebGL 分享，其中光是实现一个 WebGL 版本的 Hello World，就超过了四十余行代码，更别说代码里须要波及的概念：

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 的浏览器。以上种种都不合乎咱们对元宇宙的预期，因而也只能无奈放弃。

为不便比照，咱们做了以下表格进行总结：

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

回首拥抱的 BabylonJS

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

发展工作

头脑风暴

作为大促开发团队，咱们心愿 3D 预研成绩可能最终落地到咱们的流动。因而在作品定向的探讨上，咱们最终敲定了要实现一个虚构商场。3D 人物模型能够在一个布满各种商品的 3D 商场中行走，它能够静止到心仪的商品前进行预览，甚至可是实现不同 3D 场馆的切换。

素材格局

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

在泛滥的 3D 模型格局中，咱们最初抉择了 .gltf 格局。绝对于其余模型格局，.gltf 能够缩小 3D 格局中与渲染无关的的冗余数据，从而确保文件体积更小。目前 3D 素材相对来说都比拟大，这对于挪动端加载体验来说，无疑是致命的。因而领有更小体积的格局，也领有了更高的优先选择权。

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

所以 .gltf 成为了咱们与视觉约定好的惟一素材格局。

开发痛点

1. 模型边界

   • 问题形容：没有判断模型边界，导致模型能够超过正当范畴去放大与放大。
   • 解决形式：从设计规范登程，开发与设计对齐标准，严格依照对立尺度输入模型。

2. 碰撞检测

   • 问题形容：没有做好碰撞检测，导致人物模型能够穿透场景模型。
   • 解决形式：除了输入惯例显示的模型，还须要输入不用于显示的低模，利用低模来实现碰撞检测，升高碰撞的计算量；增加寻路零碎，当静止模型主动行走时，能够主动绕开障碍物模型。
   • 优化前：
     
   • 优化后：
     

3. 场景切换

   • 问题形容：场景切换时，镜头会旋转。
   • 解决形式：切换场景时，须要对不展现的场景敞开管制。须要留神的是，在初始化场景时，通常会随同着初始化管制，最好在构建函数的最初敞开管制，在以后场景下再开启管制，保障场景管制的唯一性。

4. 内存开销重大

   • 问题形容：内存占用率大，游戏运行一段时间后，手机会有发热和卡顿等景象。
   • 解决形式：管制内存开销，切换场景时，清空其余场景，防止有效的内存占用。
   • 优化前：
     
   • 优化后：
     

作品展现

场景切换：

商品材质切换：

欢送大家查看链接 预览链接

小结

元宇宙是一个很宏大的概念，此时只是萌芽阶段，正如咱们的摸索，必然也存在许多不成熟的中央。但咱们置信这是将来的一个方向，也置信咱们的产品状态会日益丰盛与成熟。

让咱们独特期待！

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。