The index

  • primers
  • function
  • architecture
  • style
  • application
  • In the future

primers

Active open source projects

  • Babylon.js

Github.com/BabylonJS/B…

A == complete == JavaScript framework for building 3D games and experiences in HTML5, WebGL, WebVR and Web Audio.

  • PlayCanvas

Github.com/playcanvas/…

PlayCanvas is an open source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in all modern browsers without the need for plug-ins.

  • ClayGL

Github.com/pissang/cla…

ClayGL is a WebGL graphics library for building == extensible ==Web3D applications.

It is easy to use and can be configured with high-quality graphics. Thanks to == modularity == and Tree Shaking, it can be shrunk down to 22K (gZIP) for basic 3D applications.

Currently it is mainly used in Echarts.

  • Three.js

Github.com/mrdoob/thre…

The goal of this project is to create a 3D library that is == easy to use ==, == lightweight == =. The library provides Canvas 2D, SVG, CSS3D and WebGL renderers.

Zen3D initially mimicked Threejs’s WebGL rendering library

Initial motivation: Learn WebGL, learn 3D rendering.

Start by learning the camera’s == matrix transformation principle == and == simple lighting model ==.

Book recommendation: WebGL Programming Guide

Project address: github.com/shawn0326/z…

The most fire Three. Js

  • The oldest? The most stable? The most active?
  • Just do rendering, nothing else

function

The tongs and hammers theory proposed by Big City

In 2016, the domestic Html5 game engine competition is fierce:

  • Cocos-html5 (renamed cocos-js)
  • Egret Engine
  • LayaBox

The parties aim to launch a perfect tool stream.

“If you want to use my pliers, you must also buy my hammer” is a bullying approach.

To promote his theory, he released a project called The Best JavaScript Game Framework on Github.

His core ideas are:

Do More with Less.

Limitations:

  • For architecture programmers only. For script programmers or non-programmers, comprehensive supporting services are required. But this is an upper level requirement, something “tools” should do, not an underlying library.
  • Of course, it is not simply the less the better, to meet the general needs is the core value.

Bottom line: Threejs can be used in more areas because it only implements core features and doesn’t do a lot of work. Plus, it makes it easier to understand and use.

Question: What are the core X values of Threejs?

The core values of Three

It takes so much code to draw a triangle

Review three.js

Only two things:

  • Graph Tree Scene Tree management
  • Render to Render

What they are actually doing:

Graph TB 3D Scene Tree --> Camera camera --> 2D Image One-dimensional Render list --> 2D imageCopy the code

Scenario tree management module

Irrelevant rendering API

  • Problem solved
  1. How to describe a 3D scene (easy to understand)
  2. How to describe render lists (machine readable)

Description specification of 3D scene:

Graph TB Scene --> Object 1 Scene --> Object 2 Object 1--> Object 3 Object 1--> Object 4Copy the code

Specification of object description:

Graph TB Object --> Shape Object --> MaterialCopy the code

Render list:

[{draw object 1}, {draw object 3}, {draw object 2}...]Copy the code

Renderer module

Render using the WebGL rendering API.

Graph TB reads vertex data --> Execute vertex shader execute vertex shader --> Assemble primier assemble primier --> Raster primier Raster --> Execute fragment shader Execute fragment shader --> write frame bufferCopy the code

The One Pass process is strongly related to the WebGL interface and is relatively fixed.

architecture

reflection

What architectural improvements does Threejs have?

Threejs had too many things in its Renderer.

Perhaps this is due to compatibility with multiple rendering modes.

Renderer wrapped in three.js

When you call render:

renderer.render(scene, camera, target);
Copy the code

Actually did these things:

  1. Update the matrix of all objects in the scene
  2. Generate render lists (sort, collect, clip, sort…)
  3. Perform rendering

Obviously threejs updates and renders the scene tree in a function.

Scenes often encountered in post and late rendering

Graph LR Scene --> Object Object --> Shape Object --> Material 1Copy the code

In late or delayed rendering, it may be necessary to replace the shader for each object and perform a rendering

Graph LR Scene --> Object Object --> Shape Object --> Material 2Copy the code

Depending on the properties of the object, the material may be replaced differently

Threejs Renderer does too many things

scene.traverse(object= > {
    // change material1
});

renderer.render(scene, camera, target);

scene.traverse(object= > {
    // change material2
});

renderer.render(scene, camera, target);

// ...
Copy the code

In fact:

  1. Traverse the scene to replace material 1 (traverse waste)
  2. Update the matrix of all objects in the scene
  3. Generate render lists (sort, collect, clip, sort…)
  4. Perform rendering
  5. Traversal scene replace material 2 (traversal waste)
  6. Update the matrix of all objects in the scene (waste)
  7. Generate render lists (sort, collect, clip, sort…) (waste)
  8. Perform rendering
  9. .

If I split up the Renderer

scene.updateMatrix();

const renderList = getRenderList(scene, camera);

// pass 1
renderer.render(renderList, camera, {
    ifRender: item= > { 
        return true;
    },
    getMaterial: item= > {
        // We can use item.object to dynamically determine which material to use
        returnmaterial1; }});// pass 2
renderer.render(renderList, camera, {
    ifRender: item= > { 
        return true;
    },
    getMaterial: item= > {
        // We can use item.object to dynamically determine which material to use
        returnmaterial2; }});Copy the code

In fact:

  1. Update the matrix of all objects in the scene
  2. Generate render lists (sort, collect, clip, sort…)
  3. Render using Material 1
  4. Render using Material 2

Easy to implement post-processing, forward renderer/delay renderer.

Project style

The language choice of the project and whether it is radical.

style

  • ES6 but not TypeScript CoffeeScript and other compiled languages.

Babylon’s adoption of TS helps to narrow the audience for developers.

  • Preferred new features (Extensions & WebGL2) but compatible as appropriate.

Babylon has relatively good WebGL2 support, so it has a more powerful particle system, better rendering, and higher performance.

Most current browsers already support WebGL2, but few renderers take advantage of the new features and are properly compatible.

Babylon WebGL2 Particle Babylon WebGL2 color Grading

application

  • 3D development engine Babylon
  • ECS architecture of the heavy 3D development engine PlayCanvas, Unity
  • Script drawing tool p5.js for non-professional programmers
  • Model demonstrator, which can implement a convenient post-processing module ClayGL Sketchfab
  • Explore new WebGL features
Graph BT Renderer -->3D Game Engine Renderer -->3D Application Engine renderer --> Model Renderer --> Drawing Palette renderer --> etcCopy the code

In the future

  • Interworking with upstream tools
Graph TB User --> Particle Editing Tool User --> Material Editing Tool User --> Scene Builder User --> Logical Organization Tool Particle Editing Tool --> 3D Scene Tree Material Editing Tool --> 3D Scene Builder Tool --> 3D Scene Tree Logical organization tools --> 3D Scene Tree 3D scene Tree --> 1D Render list 3D scene tree --> Camera Camera --> 2D image 1D render list --> 2D imageCopy the code
  • amway

Blender

Blender film

Blend4Web

The Blend4Web dairy example