This article is collated from Lao Feng’s 2022 technology sharing in Concave-Convex, and leads you to understand the current situation of 3D in the Web end from the perspective of cases, applications and technological ecology.

At the beginning of the 3 d experience

Hey 3D what’s up, how are you doing on the Web


In the context of the increasingly popular concept of “metasomes”, we have prepared a series of 3D metasomes open classes and teaching articles, teaching you how to quickly build a 3D project from 0 to 1, from which you can learn the basic principles of WebGL, graphics, the use of popular engines and so on. Before entering, we first from the case, application, technology ecology, let you understand the status of 3D in the Web end.


1. Case presentation

1.1 Components

Starting with a basic DEMO, a basic 3D will generally consist of the following modules:

(1) Rendering

When you open a 3D page, you download the model file and render it to the page

(2) Animation

Render animation frame by frame

(3) Event binding

Through the js event binding, the corresponding render is triggered. Like clicking on the ground to move people

(4) Scene switching

As we all know, there are many scenes in a game, such as the game loads, the game starts, and the game ends, which are three different scenes. This is from the main gameplay to the edit scene


1.2 Complete Case

(1) PC

Let’s look at some interesting examples, starting on the PC sideThis is a developer blog who switches from the start scene to the main scene, then renders some 3D models of trees and cars, uses the keyboard to control the orientation of the model, rotates the model after collision, and plays the corresponding audio at the same time, etc.Check it out at 👉bruno-simon.com/

This is a BMW demo on PlayCanvas, it has rendered animations, click on the image below to change the texture of this model.Check it out at 👉playcanv.as/p/RqJJ9oU9

(2) H5 end

Look at the mobile caseThe above racing game also cuts from the beginning scene to the main gameplay. After that, the touch bar at the bottom moves the car/map and colliders other objects to detect events such as triggering acceleration.Scan the code or click 👉 to experience itMercedes-EQ Formula E Team – Speedboard Game

Then there is the familiar example of temple escape, which also shows obvious scene switching, collision detection, etc.Scan the code or click 👉 to experience itPlay Temple Run 2 on Poki


2. Application scenarios

Let’s take a look at some formal application scenarios of 3D in China.

2.1 the App end

For example, VR house viewing, VR online house viewing can not be interfered by the purchase guide, saving the cost of taking a look, user operation also left a lot of data retention for the property;

Also, if you look at shoes on some shopping apps, there will be 3D model preview of shoes and AR fitting, so you can see the details of the shoes and the appearance of the individual after trying them on.

2.2 the H5 end

Some interactive mini-games also have 3D parts

There are also 3D mini games in wechat mini games


Technology ecology

3.1 Definition of game Engine

First of all, to implement a 3D game “quickly” requires a 3D game engine, so what exactly is a game engine?

(1) written editable computer game systems (2) core components of interactive real-time graphics applications (3) easy and fast programming


3.2 Composition of a game engine

Most game engines contain the following systems: (1) A rendering engine is a “renderer”, a system that draws images and presents them to the outside world, including a two-dimensional image engine and a three-dimensional image engine

(2) The physics engine calculates motion, rotation, and collision responses by giving rigid objects real physical properties

(3) Script engine provides script interface for developers to design games through scripts, making game development more flexible

(4) Network engine data exchange module, used in the development of multiplayer online games

(5) AI replaces the generation of some labor-intensive content in game development, such as road detection


3.3 How to Choose the right game Engine

How to choose the right game engine, we generally consider the following three aspects:

(1) Getting started

  • Development of language
  • Learning resources and technical support ability
  • Workflow support

If you are just getting started, you should first consider whether you are familiar with the development language. Check the engine’s official resource documentation, the team’s ability to fix problems, the community activity, and the engine’s workflow support, such as whether there is playground.

(2) Reference

  • Commercial maturity cases
  • Application scope

Consider from reference examples whether the engine is being used by real famous projects and the extent of use;

(3) Design

  • Design concept
  • performance

In terms of design, the design concept of the engine is easy to understand and convenient for third-party access. In addition, an engine for performance optimization, memory management, and resource management must be selected based on the scale and functional requirements of the project.


3.4 technology stack

We have selected the game engines with the most stars on Github and analyzed their advantages and disadvantages:

(1) Three. Js

Three.js is one of the most popular JavaScript libraries for creating and animating 3D computer graphics in Web browsers using WebGL.

A. advantages:

  • Easy to learn: Very easy to get started and suitable for beginners
  • Large community: many examples, many users, rich community
  • Good documentation: Strong documentation is usually a good indicator of a strong library, and three.js has excellent documentation
  • Performance Advantage: Excellent performance, capable of performing complex rendering functions
  • PBR rendering: Has built-in PBR rendering, which makes rendering graphics more accurate

B. less than:

  • Not really a game engine: very few features outside of rendering
  • For beginners: Because the API is for beginners, it hides many advanced features

(2) the Babylon. Js

Babylon. Js is a powerful, simple, open game and rendering engine.

A. advantages:

  • Great testing tool: Playground is a great tool for testing things out before full development, and has great startup documentation
  • Strong community support: the community is active and rich
  • Frequent update iterations: The framework has a code base that is frequently updated, and third-party tools are actively under development
  • PBR rendering: Support for PBR rendering is excellent
  • Big-name support: Babylon is used and supported by large brands like Adobe, Microsoft, and others
  • Problem fixes: BUG fixes are quick and problems can be solved quickly

B. less than:

  • Maturity: The first version, from 2013, is young compared to many of its competitors;
  • Documentation: Description of some parameter fields in API documentation is not clear enough.
  • Scale: Not suitable for smaller projects

(3) the Aframe

  • Use simple, declarative HTML: A-frame just insert<a-scene>
  • Entity Component Architecture: A-Frame is A powerful framework on top of Three.js, providing A declarative, composable, and reusable entity component architecture for Three.js
  • Performance: A framework is a thin framework on top of three.js
  • Cross-platform, visual checker, feature rich
  • Design philosophy: Because the design concept is different from other engines, it is not convenient to adapt to third-party physics engines

(4) Playcanvas

It focuses on a game engine rather than a rendering engine, and is a great full-featured game engine. But private projects charge, there is no collision offset, and examples are missing.

(5) the Whs

  • Easy to use, integrated with Three. Js rendering engine, rendering automation, accelerate 3D scene prototyping, based on component-based scene drawing
  • Any high-performance physics can be easily integrated, even with Worker (multithreading)
  • Based on ES2015+, Pack Webpack friendly

(6) Others

A. Egret, LayaAir and some domestic engines. When we search “game engine” in Chinese, Egret and LayaAir are generally recommended. Their advantages are that they are developed and maintained by specialized enterprises, and they can also be customized by spending money and support multi-side development. Egrets prefer 2D, and 3D has been iterated on the basis of 2D in recent years. Laya is used by many people to make micro channel games. On the other hand, their community is not active enough, documentation is not up to date, and the development experience is not very friendly for developers.

B. Oasis opened its source on Taobao last year, which is used for Alipay’s Ant Manor and other interactive games. Now there are 3500 STAR. According to its official documents, star is similar to Three in the way of use, with simple API and basic physics-related examples. It is more practical for small projects with small functions.

7. Small programs

If you want a compatible WeChat applet, WeChat official have Adapter example: Adapter | WeChat open document

There are the following open source repositories for your reference:

  • Weapp – adapter warehouse
  • Three – platformize warehouse
  • Threejs – miniprogram warehouse


The resources

  1. Game Engines – Wikipedia, the free encyclopedia
  2. XR Real Estate: VR, AR viewing scene
  3. Choosing the right game engine
  4. How to choose an H5 game engine
  5. JavaScript Game Engines
  6. HTML5 Game Engines
  7. H5 Game development: Game engine introduction recommendation
  8. Top 6 JavaScript and HTML5 game engines
  9. Top JS Gaming Engines and Libraries for 2020