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, Metaverse, 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.

During the development of the Metaverse, 3D technology is inseparable from the model design and production and scene construction involved. It can be said that 3D technology is the cornerstone of the development of the Metaverse. 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);

So if you start from scratch with WebGL, it is undoubtedly a very difficult challenge. So we turned our attention to the 3D engine.

Fantasy 3D engine

We can regard the 3D engine as a tool that encapsulates the 3D API, general graphics algorithms, and low-level algorithms. Usually 3D engines are equipped with editors with visual operation interface. Even if we start from scratch, we can quickly build a 3D scene by creating 3D type nodes or even just dragging the 3D model on the editor. Compared to the obscure WebGL, the 3D engine is undoubtedly more friendly to beginners.

Unity 3D

Unity 3D can be said to be the most widely used 3D engine on the market. It has the advantages of good ecology, comprehensive function support, and good project optimization. but! It can achieve the current market size and status, and the successful business model behind it is indispensable. Unfortunately, it is charged and expensive. In the pre-research stage that did not produce economic benefits, we did not want to invest too much economic cost, so we gave up.

The following is the demo effect completed using Unity 3D:

LayaBox

LayaBox is a domestic game engine brand. Its LayaAir supports JS, TS and other languages, and is compatible with elements such as terrain, components, physics engines, animations, cameras, and particles exported by Unity 3D, so an immature idea arises. Students, use Unity 3D to edit and export the scene, and then use LayaAir to bind interaction events and package them for release, so that the license fee can be avoided perfectly? But unfortunately, after trying it out, we found that the free scope of Layabox is only for the basic functions of the IDE. For the exclusive functions of IDE enterprise members that may be used later, there is also a fee, and the official requirements are marked on the home page "Powered by LayaAir Engine" ”, which is inconsistent with our commercial standards, so we also bid farewell to the possibility of commercial use.

Egret

Egret is also a domestic game engine. It focused on h5 development from the beginning, and has good support in h5, but it was originally focused on the 2D field, and started late in the 3D direction, and many official documents are still incomplete. Therefore, it is more difficult to get started. If you encounter problems, you can only cross the river by feeling the stones and pass.

Godot

Godot is a completely free game engine that supports cross-platform editing and publishing, but after packaging and publishing to the h5 page, we found that the packaged model files are large, which is fatal for the mobile loading experience problem; and the rendering effect is relatively rough, and the model rendering has obvious aliasing phenomenon; the H5 export format supports WebAssembly and WebGL, but WebGL does not yet support any IOS browsers. None of the above is in line with our expectations for the Metaverse, so we have no choice but to give up.

For the convenience of comparison, we have made the following table to summarize:

engine name	use price	scripting language	Model formats supported
Unity 3d	1800$ per year (individual)	C#	.fbx, .dae, .3ds, .dxf, .obj
Egret	free	TypeScript	.obj, .gltf
Godot	free	GDScript	.obj, .dae, .gltf, .escn, .fbx
Layabox	free	TS\JS\AS3	.fbx, .dae, .3ds, .dxf, .obj

At this point, the fantasy of 3D engine has disappeared.

Looking back at BabylonJS hugging

In fact, in addition to the above 3D engines, we also thought of two mainstream 3D frameworks, BabylonJs and ThreeJs. As the more popular 3D frameworks on the market, they have no problem with the completeness of documentation and the richness of learning resources. In the comparison of the two, we feel that ThreeJS is not so much a framework as a library. It encapsulates WebGL, simplifies complex interfaces, and digitizes object structures. It is indeed a good choice; and In comparison, BabylonJS is clearer at the modular level and more like a framework, and it has no less rich learning resources than ThreeJS, and finally became the technology selection finalized by our team.

commence to work

Brainstorming

As a big promotion development team, we hope that the 3D pre-research results can finally be implemented in our activities. Therefore, in the discussion of the orientation of the works, we finally settled on the realization of a virtual mall. The 3D character model can walk in a 3D mall full of various products, it can move to the favorite product for preview, and even realize the switching of different 3D venues.

Material format

After clarifying the direction of the work, we need visual students to provide relevant model materials.

Among the many 3D model formats, we finally chose the .gltf format. Compared to other model formats, .gltf reduces redundant data that is not relevant to rendering in 3D formats, thus ensuring smaller file sizes. At present, 3D materials are relatively large, which is undoubtedly fatal for the mobile loading experience. Therefore, the format with a smaller volume also has a higher priority.

In addition, .gltf is a summary of various 3D formats in the past two decades. It uses the optimal data structure to ensure maximum compatibility and scalability, and supports more expansion while having large capacity. , such as support for multiple textures, multiple animations, etc.

So .gltf became the only material format we had a visual agreement with.

Development pain points

1. model boundary

   • Problem description: The model boundary is not judged, so that the model can be enlarged and reduced beyond a reasonable range.
   • Solution: Start from the design specifications, develop and design alignment specifications, and output the model in strict accordance with the unified scale.

2. Impact checking

   • Description of the problem: Collision detection is not done well, so that the character model can penetrate the scene model.
   • Solution: In addition to outputting the normal display model, it is also necessary to output the low-poly model that is not used for display, and use the low-poly model to realize collision detection and reduce the calculation amount of collision; add a pathfinding system, when the motion model walks automatically, it can be automatically bypassed Obstacle model.
   • Before optimization:
     
   • Optimized:
     

3. scene switch

   • Problem description: When the scene is switched, the camera will rotate.
   • Solution: When switching scenes, you need to turn off the control for the scenes that are not displayed. It should be noted that when initializing the scene, it is usually accompanied by initialization control. It is best to close the control at the end of the construction function, and then open the control in the current scene to ensure the uniqueness of the scene control.

4. Serious memory expenses

   • Description of the problem: The memory usage rate is high, and after the game runs for a period of time, the phone will experience heat and freeze.
   • Solution: Control the memory overhead. When switching scenes, clear other scenes to avoid invalid memory usage.
   • Before optimization:
     
   • Optimized:
     

gallery

Scene switching:

Commodity material switching:

Welcome to view the link preview link

summary

The metaverse is a huge concept, and it is only in its infancy at this time. Just like our exploration, there must be many immature places. But we believe that this is a direction in the future, and we also believe that our product forms will become increasingly rich and mature.

Let us look forward to it together!

---

Welcome to the blog of Aotu Labs: aotu.io

Or pay attention to the AOTULabs official account (AOTULabs), and push articles from time to time.