preface

The meta-universe is in full swing and is poised to set the trend of the future. For our professional (Web front-end) team, the meta-universe is a big (WAN) show (quan) body (BU) hand (dong) domain, so the team invested a lot of manpower in this aspect for pre-research and summary, please step into the mysterious world of the meta-universe with this article.

Metaverse and 3D

Metaverse, also known as metaverse, metaphysical universe, metaboundary, charmer domain, extrasensory space, virtual space, is a network of 3D virtual worlds focusing on social links. The discussion of the metadverse focuses on a persistent and decentralized online 3D virtual environment. The virtual environment will be accessible through virtual reality glasses, augmented reality glasses, mobile phones, personal computers and video game consoles.

Wikipedia’s explanation of the meta-universe.

I’m sure you’re as confused as I am. We may not yet know what a meta-universe is, but it leads to an important concept — 3D virtual worlds.

The word 3D virtual world can be divided into three words: 3D, virtual and world. 3D refers to the space system formed by adding a direction vector to the two plane ties. Virtual is the use of models and other technologies to build the imitation of real objects or pseudo-real objects; The world is the sum of things made up of a lot of virtual matter, that is, a large or small virtual scene.

In the development process of the meta-universe, 3D technology is inseparable from the model design and production, scene construction, so to speak, 3D technology is the cornerstone of the development of the meta-universe. Therefore, the first step on the road to the exploration of the meta-universe is bound to be 3D technology research.

3D technology selection

WebGL that was discouraged before getting started

WebGL is a 3D drawing protocol and 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 foundation for running 3D effects in the browser.

But WebGL’s barriers to entry are enough to dissuade most developers. Starting with the basic shaders, we also need to learn image processing, spatial processing, matrix operations, and even geometric logic.

One of our team members did a WebGL share, in which it took more than 40 lines of code to realize a WebGL version of Hello World, not to mention the concepts 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);
Copy the code

So starting from scratch with WebGL is a very difficult challenge. So we looked at 3D engines.

3D engine with fantasy

We can think of a 3D engine as a tool that encapsulates 3D APIS, general graphics algorithms, and underlying algorithms. 3D engines are often paired with an editor with a visual interface. Even from scratch, we can quickly build a 3D scene by creating 3D type nodes or even dragging the 3D model on the editor. Compared to the arcana of WebGL, 3D engines are definitely friendlier for beginners.

Unity 3D

Unity 3D is arguably the most used 3D engine on the market, with its ecology, comprehensive feature support, and project optimization. But! It achieved its market size and position thanks to the successful business model behind it, but unfortunately, it was paid for and expensive. In the pre-research stage without economic benefits, we do not want to invest too much economic cost, so give up.

Here’s how the Demo looks using Unity 3D:

LayaBox

LayaBox is a homegrown game engine brand. LayaAir supports JS, TS and other languages, and is compatible with terrain, components, physics engines, animations, cameras and particles derived from Unity 3D. Edit and export scenes with Unity 3D, then bundle interactive events with LayaAir and package them up for distribution, so you can avoid licensing fees perfectly? Unfortunately, after trying, we found that Layabox’s free range only applies to the basic IDE functions, and it also charges for the exclusive IDE enterprise membership functions that may be used in the future, and the official requirement is “Powered by LayaAir Engine” on the front page. This is not in line with our commercial standards, so it also said goodbye to commercial possibilities.

Egret

Egret is also a domestic game engine. It focused on THE development of H5 from the very beginning and provided good support in THE ASPECT of H5. However, it originally focused on 2D and started late in 3D.

Godot

Godot is a completely free game engine that supports cross-platform editing and publishing. However, when it was packaged and released to the H5 page, we found that the packaged model file was too large, which was a fatal problem for the mobile loading experience. Moreover, the rendering effect is also rough, and the model rendering has obvious sawtooth phenomenon. The H5 export format supports WebAssembly and WebGL, but WebGL does not yet support any IOS browser. None of this fits our expectations of the metasomes, so we have to give up.

To facilitate comparison, we made the following table for summary:

The name of the engine Using price Scripting language Support model format
Unity 3d $1800 per year (individual) C# .fbx、.dae、.3ds、.dxf、.obj
Egret free TypeScript Obj, GLTF
Godot free GDScript Dae,.gltf,.esCN,.fbx
Layabox free TS\JS\AS3 .fbx、.dae、.3ds、.dxf、.obj

At this point, the 3D engine fantasy bubble.

Looking back at BabylonJS embrace

In addition to the above 3D engines, BabylonJs and ThreeJs are two mainstream 3D frameworks that we thought of at the beginning. As a popular 3D framework on the market, they are well-documented and rich in learning resources. In contrast, ThreeJS is more of a library than a framework. It encapsulates WebGL, simplifies complex interfaces, and digitalizes object structures. In contrast, BabylonJS is clearer and more like a framework in terms of modularity, and it has no less abundant learning resources than ThreeJS, which finally became our team’s choice of technology.

To begin the work

brainstorming

As the development team, we hope that the results of 3D pre-research can finally be implemented into our activities. Therefore, in the discussion of work orientation, we finally decided to realize a virtual shopping mall. The 3D character model can walk in a 3D mall full of various goods, it can move in front of the desired goods to preview, and even realize the switch between different 3D venues.

Material format

After defining 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 can reduce redundant data unrelated to rendering in 3D format, thus ensuring smaller file sizes. Currently, 3D materials are relatively large, which is fatal to the mobile loading experience. So you have a smaller format, and you have a higher priority.

In addition,.GLTF is a summary of the various 3D formats over the last two decades, using the best data structure to ensure maximum compatibility and scalability, while having large capacity, supporting more expansion, such as multi-map, multi-animation, etc.

So.gltf became the only material format we agreed on with visual.

The development of pain points

  1. Model boundary

    • Problem description: The model can be enlarged and reduced beyond the reasonable range due to the failure to judge the model boundary.
    • Solution: From the design specification, develop and design alignment specification, strictly in accordance with the unified scale output model.

  2. Collision detection

    • Problem description: The character model can penetrate the scene model due to insufficient collision detection.
    • Solution: In addition to output the conventional display model, also need to output the low mode is not used for display, using the low mode to achieve collision detection, reduce the calculation of collision; Add path finding system, when the moving model walks automatically, can automatically bypass the obstacle model.
    • Before optimization:
    • After the optimization:

  3. Scene: the switch

    • Description: The camera will rotate when the scene changes.
    • Solution: Disable the control for scenarios that are not displayed when switching scenarios. It should be noted that the initialization control is usually accompanied by the initialization of the scene. It is best to turn off the control at the end of the construction function and turn it on again in the current scene to ensure the uniqueness of the scene control.

  4. Heavy memory overhead

    • Problem description: The memory usage is large. After the game runs for a period of time, the mobile phone will get hot and get stuck.
    • Solution: Control the memory overhead. When switching scenes, clear other scenes to avoid invalid memory usage.
    • Before optimization:
    • After the optimization:

On display

Scene switch:

Commodity material switching:

You are welcome to check out the link to preview the link

summary

The metadverse is a very large concept, but it is still in its infancy, and just like our exploration, there are bound to be many immature areas. But we believe that this is a direction of the future, also believe that our product form will be increasingly rich and mature.

Let’s look forward to it together!