After several months, the Ant Interactive Graphics Engine Galacean Engine v0.7 is eager to meet everyone!

Version 0.7 introduces a text renderer in terms of graphics, improves the basic capabilities of 2D, and enhances the PBR material rendering effect, taking realistic rendering effects to the next level. In terms of physics, it deeply integrates PhysX capabilities by introducing dynamic collider components, helping developers easily achieve physics-based interactions with just a few lines of code. In terms of animation, it upgrades BlendShape animation and animation reverse playback capabilities. In terms of interaction, it adds keyboard interaction capabilities for PC interactions.

In addition to the above feature updates, the documentation structure and content organization have been significantly improved based on community feedback. Next, let's take a look at the detailed content of these updates!

Graphics Updates

Text

A text renderer has been added to solve the problem of text rendering, further improving the basic capabilities of 2D. Previously, developers could only use HTML+CSS technology to achieve text rendering in projects, making the entire interactive project development process somewhat fragmented. This version's text system supports basic system font rendering, including size, color, bold, italic, and other style settings (left image below). Additionally, it supports multi-line display and various alignment methods (right image below).

The text system also supports custom Shaders, allowing for some interesting effects, such as the simple KTV subtitle effect implemented in the official example:

Material

Added ClearCoat

The old version of the PBR material design was a single-layer model, making it difficult to reflect the complex material performance in natural reality. Therefore, we added a clear coat layer on top of the base layer of the material to simulate the rendering performance of a transparent coat on surfaces like cars:

Enabling this feature is very convenient; you only need to set the clearCoat property of the PBR material to a value between 0 and 1:

material.clearCoat = 1.0 ;

In addition to setting clearCoat as the intensity of the transparent coat, the engine also provides clear coat texture, clear coat roughness, clear coat roughness texture, and clear coat normal texture to control the overall performance of the coat. For specific effects, you can refer to the official example.

Added Specular Anti-Aliasing

In the old version, materials with low roughness had strong specular reflections, and the highlight areas were very sharp, appearing brighter at some model edges. The new version of the material has built-in specular anti-aliasing in the Shader, improving this situation.

Added AO Map UV Channel Switching

The old version of the engine did not support multi-UV channel management. Most AO maps (occlusion textures) used the second UV channel when exported from modeling, causing rendering anomalies. The new version of the engine adds the function of AO map UV channel switching. The UV channel will automatically switch during glTF parsing, but it can also be switched manually. Note that the engine restricts the AO channel to use only UV0 or UV1:

 material.occlusionTextureCoord = TextureCoordinate.UV1;

HDR File Loader

In the old version of the engine, to implement a skybox, you had to use a cube texture loader to load 6 textures, and the endings had to be px, py, pz, nx, ny, nz. To increase performance and ease of use, the new version of the engine adds an HDR loader to the resource loader, allowing users to directly load HDR textures of various resolutions as skybox backgrounds:

engine.resourceManager
  .load<TextureCube>({
    type: AssetType.HDR,
    url: "***.hdr"
  })
  .then((texture) => {
    skyMaterial.textureCubeMap = texture;
    // HDR output is RGBM format.
    skyMaterial.textureDecodeRGBM = true;
  });

Texture

Added Texture2DArray

A new Texture2DArray texture class has been added. Texture2DArray is an array form of Texture2D, often used as a data texture, and does not occupy multiple GPU texture units. Developers can use this texture for various purposes.

Optimized RenderTarget

To better extend any texture type from the design, the texture structure has been streamlined. The colorTexture and depthTexture properties of RenderTarget now use Texture instead of the old RenderColorTexture and RenderDepthTexture.

Physics Update

Added Dynamic Physics Collider

The new engine officially includes a dynamic physics collider component supported by the PhysX.js backend. With this component, users can easily add physical feedback effects to applications and trigger collision response events.

Since the collider component drives component movement according to physical laws, the time step of single-step simulation becomes very important. The new engine changes the update interval of the physical scene to a fixed time. In each main loop, there will be one or more updates, and the physical scene and Entity transformations will also be synchronized multiple times. For physics-related script logic, an onPhysicsUpdate script function has been added. This function is called before each physical scene update, ensuring that the user's set physical update logic can be executed. Therefore, in the script lifecycle, corresponding physical events may be triggered multiple times in a single loop:

Decoupled Initialization Interface

In addition to new features, the new engine optimizes the initialization method of the physics engine, decoupling the initialization of the physics engine from the Engine:

import {WebGLEngine} from "@galacean/engine";
import {PhysXPhysics} from "@galacean/engine-physics-physx";
 
const engine = new WebGLEngine("canvas");
 
PhysXPhysics.initialize().then(() => {
  engine.physicsManager.initialize(PhysXPhysics);
  engine.run();
});

Interaction Update

Keyboard Interaction

Added keyboard interaction. Developers can get real-time keyboard interaction status through a few simple interfaces.

class KeyScript extends Script {
  onUpdate() {
    const { inputManager } = this.engine;
    if (inputManager.isKeyHeldDown(Keys.Space)) {
      // 现在还按着空格键
    }
    if (inputManager.isKeyDown(Keys.Space)) {
      // 这帧按下过空格键
    }
    if (inputManager.isKeyUp(Keys.Space)) {
      // 这帧抬起过空格键
    }
  }
}

Animation Update

Increased BlendShape Animation Count

In the old version, the maximum number of BlendShape animations stored in Mesh was 4. The new engine improves the internal implementation, increasing the BlendShape animation limit. The mode implemented through floating-point textures removes the quantity limit, supporting almost any number of BlendShape animation blends. The following case is a blend animation of 8 BlendShapes, while the old version only supported animations for 4 columns.

Animation Reverse Playback

Added the ability for Animator to play in reverse. When animator.speed is negative, the animation can play in reverse. Developers can write personalized playback logic:

animator.speed = -1;

Basic Updates

Transform

Optimized the usage of the Transform API to enhance the experience of using high-frequency APIs. For example, previously, to modify the individual axis component values of properties like position, rotation, and scale, we had to follow these relatively cumbersome steps:

const transform = lightEntity.transform;
const position = transform.position;
position.y += 0.1;
transform.position = position;

After optimization, developers can directly modify the individual axis components without needing to reset the entire property, making the usage more natural:

const transform = lightEntity.transform;
transform.position.y += 0.1;

Documentation Updates

The documentation directory structure has been significantly updated, with content divided by functional modules, allowing developers to locate the required features more quickly:

0.7 Milestone Information

• Complete log: https://github.com/galacean/engine/releases/tag/v0.7.0-beta.2
• Iteration plan: https://github.com/galacean/engine/issues/666

0.8 Milestone Preview

• In the next milestone, the physics components will introduce character controllers and physical constraints. These physics technologies can be easily integrated with the animation system, enhancing developers' control over characters.
• The text renderer will continue to optimize its internal implementation by adopting per-character caching to reduce text memory usage.
• Development and planning of features related to special effects.

How to Contact Us

Galacean Engine Open Source Community Group (DingTalk):

Galacean Engine Open Source Community Group (WeChat):

If the WeChat QR code is invalid, you can add the group admin on WeChat: zengxinxin2010