前言元界发展如火如荼，大有引领未来趋势之势。对于我们专业（web前端）团队来说，元界是一个大（wan）秀（quan）身（bu）手（dong）场，所以团队在这方面投入了大量的人力进行预研和总结，请跟随本文走进神秘的元宇宙世界。Metaverse和3DMetaverse，或Metaverse、MetaphysicalUniverse、Metaverse、Metaverse、HypersensorySpace和VirtualSpace，是一个专注于社交链接的3D虚拟世界网络。关于元界的讨论主要是讨论一个持久化的、去中心化的在线3D虚拟环境。这种虚拟环境将可以通过虚拟现实眼镜、增强现实眼镜、手机、个人电脑和视频游戏机进入人工虚拟世界。上面维基百科对Metaverse的解释。相信大家还是和我一样一头雾水。可能此时我们还不明白Metaverse是什么，但是它引出了一个重要的概念——3D虚拟世界。3D虚拟世界这个词可以分为3个词来理解：3D、virtual、world。3D是三维的，指的是在平面二维体系上加上一个方向向量构成的空间体系；虚拟是使用模型和其他技术构造的模仿或伪真实对象；世界是由许多虚拟物质组成的事物的总和。即，或大或小的虚拟场景。在元界的发展过程中，模型的设计制作、所涉及场景的搭建都离不开3D技术。可以说，3D技术是元界发展的基石。因此，在探索元宇宙的道路上，第一步必然是3D技术研究。WebGL是一种3D图形协议和JavaScriptAPI，无需使用插件即可在任何兼容的Web浏览器中呈现高性能交互式3D和2D图形。也就是说，WebGL是在浏览器上运行3D效果的基础。但是WebGL的入门门槛足以让大部分开发者望而却步。从最基本的着色器开始，我们还需要学习图像处理、空间处理、矩阵运算，甚至几何逻辑。我们团队的一个朋友做过一个WebGL的分享，里面用了四十多行代码实现了一个WebGL版的HelloWorld，更不用说代码中需要涉及的概念了：constcanvas=document.querySelector('canvas');constgl=canvas.getContext('webgl');constvertex=`attributevec2position;voidmain(){gl_Position=vec4(position,1.0,1.0);}`;constfragment=`precisionmediopfloat;voidmain(){gl_FragColor=vec4(0.0,0.0,0.0,1.0);}`;constvertexShader=gl.createShader(gl.VERTEX_SHADER);gl.shaderSource(vertexShader,vertex);gl.compileShader(vertexShader);constfragmentShader=gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(fragmentShader,fragment);gl.compileShader(fragmentShader);constprogram=gl.createProgram();gl.attachShader(program,vertexShader);gl.attachShader(program,fragmentShader);gl.linkProgram(program);gl.useProgram(program);constpoints=newFloat32Array([-1,-1,0,1,1,-1,]);constbufferId=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,bufferId);gl.bufferData(gl。大批_BUFFER,points,gl.STATIC_DRAW);constvPosition=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引擎看作是一个封装了3DAPI、图形通用算法和底层算法的工具。通常3D引擎都配备了具有可视化操作界面的编辑器。即使我们从头开始，我们也可以通过创建3D类型节点或者甚至只是在编辑器上拖动3D模型来快速构建3D场景。与晦涩难懂的WebGL相比，3D引擎无疑对初学者更加友好。Unity3DUnity3D可以说是市面上使用最多的3D引擎。具有生态好、功能支持全面、项目优化好等优点。但！它能取得现在的市场规模和地位，背后隐藏着成功的商业模式。不幸的是，它收费且昂贵。在不产生经济效益的预研阶段，我们不想投入太多的经济成本，所以就放弃了。下面是使用Unity3D完成的demo效果：LayaBoxLayaBox是国产游戏引擎品牌。其LayaAir支持JS、TS等多种语言，兼容Unity3D导出的地形、组件、物理引擎、动画、相机、粒子等。元素，于是一个不成熟的想法油然而生，用Unity3D剪辑然后导出场景，再用LayaAir绑定交互事件再打包发布，这样就可以完美避免license费用？但遗憾的是，经过我们的尝试，发现Layabox的免费范围仅针对IDE的基本功能。以后可能用到的IDE企业会员专享功能，也是收费的，官方要求在首页标明“PoweredbyLayaAirEngine”，不符合我们的商业标准，所以我们也出价告别商业用途的可能性。EgretEgret也是一款国产游戏引擎。它从一开始就专注于h5开发，对h5的支持比较好。但是，它最初以2D为主，3D起步较晚。很多官方文档还不够完善。因此，上手难度更大。遇到问题只能摸着石头过河，通过。GodotGodot是一款完全免费的游戏引擎，支持跨平台编辑发布，但是打包发布到h5页面后，我们发现打包后的模型文件比较大，对于移动端加载体验问题是致命的；并且渲染效果比较粗糙，模型渲染有明显的锯齿现象；H5导出格式支持WebAssembly和WebGL，但WebGL尚不支持任何IOS浏览器。以上种种都不符合我们对元宇宙的期待，只好作罢。为了方便对比，我们做了下表汇总：引擎名称使用价格脚本语言支持模型格式Unity3d1800$每年（个人）C#.fbx,.dae,.3ds,.dxf,.objEgretFreeTypeScript.obj,.gltfGodot免费GDScript.obj,.dae,.gltf,.escn,.fbxLayabox免费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成为了我们视觉唯一认同的材质格式。开发痛点模型边界问题描述：没有对模型边界进行判断，导致模型能够放大缩小超出合理范围。解决方案：从设计规范着手，对接规范开发设计，严格按照统一比例输出模型。碰撞检测问题描述：碰撞检测没做好，导致角色模型穿透场景模型。解决方案：除了输出正常显示模型外，还需要输出不用于显示的低模型，利用低模型实现碰撞检测，减少碰撞的计算量；添加寻路系统，移动模型自动行走时，可以自动绕过障碍物模型。优化前：优化后：场景切换问题描述：场景切换时，相机会旋转。解决方法：切换场景时，需要关闭不显示场景的控件。需要注意的是，在初始化场景的时候，通常伴随着初始化控件。最好在构造函数的最后关闭控件，然后在当前场景中打开控件，以保证场景控件的唯一性。内存消耗严重问题描述：内存占用率大。游戏运行一段时间后，手机会发热、卡顿。解决方案：控制内存开销，切换场景时清空其他场景，避免无效内存占用。优化前：优化后：作品展示场景切换：商品素材切换：欢迎查看链接预览链接总结元界是一个非常庞大的概念，目前还处于起步阶段。就像我们的探索一样，必然会有很多不成熟的地方。但是我们相信这是未来的一个方向，我们也相信我们的产品形态会越来越丰富和成熟。让我们一起期待吧！欢迎关注傲兔实验室博客：aotu.io或关注傲兔实验室公众号（AOTULabs），不定期推送文章。
