Galacean Logo
English
English

Galacean Engine v0.4 Release

Bo Kou
June 17, 20216 min read

In terms of the engine, the focus is on upgrading the glTF parser, adding masking capabilities and support for Lottie animations in 2D; in terms of the editor, 2D editing and scene editing have been added. Additionally, the official website has added 20+ examples and documents, including the much-needed art workflow and mini-program documentation for developers.

Features

glTF Upgrade

Considering the stability and functionality of glTF, version 0.4 has undergone a comprehensive refactor, greatly enhancing functionality and extensibility, while also fixing several known bugs and covering the official glTF test cases.

In terms of plugin extensions, the upgraded glTF parser uses a pipeline mode. If the default parser does not meet your needs, you can refer to the engine's default pipeline parser to customize the configuration pipeline. You can also extend plugins through decorators. Currently, the following plugins are supported:

PluginFunction
KHR_draco_mesh_compressionSupports Draco compressed models, saving video memory
KHR_lights_punctualSupports various light source combinations
KHR_materials_pbrSpecularGlossinessSupports PBR specular glossiness mode
KHR_materials_unlitSupports Unlit materials
KHR_materials_variantsSupports multi-material switching
KHR_mesh_quantizationSupports vertex data compression, saving video memory
KHR_texture_transformSupports texture TilingOffset scaling and displacement transformation

In terms of tools, we thoughtfully provide a glTF Viewer, allowing developers to drag and drop glTF folders for online preview/debugging.

50270383-B023-42E0-ADD0-1BBA5ECA970F.png

glTF (GL Transmission Format) is a specification released by Khronos that enables efficient transmission and loading of 3D scenes. Like traditional model formats such as FBX and OBJ, it basically supports all features in 3D scenes and is currently the recommended 3D model format for the Galacean Engine. The plugin mechanism of glTF allows developers to customize and implement desired functionalities.

2D Upgrade

Sprite Mask

Sprite masking is a common feature in 2D, allowing control over the display and hiding of certain areas of a sprite. After restructuring 2D sprites in version 0.3, version 0.4 introduces the SpriteMask component, providing capabilities for both inner and outer masking of sprites.

if0hr-g1gi7.gif

The editor has also been updated to include the SpriteMask component and the mask property settings for SpriteRenderer.

image.png

Spine

Spine is an important part of the Galacean Engine animation ecosystem. Therefore, the degree of adaptation to Spine directly affects the development of the Galacean Engine ecosystem. In version 0.4, we have enhanced the resource loading for Spine. Previous versions only supported single-path loading, but version 0.4 adds dual-path loading. Single-path loading requires the json (or bin) and atlas to have the same name. With dual-path loading, the json (or bin) and atlas files can have different names, offering more flexibility:

Single file:

const spineEntity = await engine.resourceManager.load({
	url: "https://gw.alipayobjects.com/os/OasisHub/spine0.json",
  type: "spine"
});

Dual file:

const spineEntity = await engine.resourceManager.load({
	urls: [
    "https://gw.alipayobjects.com/os/OasisHub/spineX.json",
    "https://gw.alipayobjects.com/os/OasisHub/spineY.atlas"
  ],
  type: "spine"
});

Additionally, we have fixed a bug where the SpineAnimation component shared spine skeleton and animation data when the entity it was mounted on was cloned.

Lottie

Lottie has become a popular animation format among front-end developers in recent years and is a key focus for the Galacean Engine to embrace the ecosystem. In version 0.4, we have initially implemented the rendering of sprite elements in the Lottie node tree. We will gradually support advanced elements such as masks and shapes in the future. Unlike lottie-web's SVG or Canvas rendering solutions, the Lottie component in Galacean leverages the BufferMesh functionality of the Galacean Engine to achieve high-performance batch rendering.

New 2D Editing Mode in the Editor

The navigation bar in the operation area now includes a "2D Mode" toggle button, allowing users to quickly switch between 3D and 2D editing modes, facilitating scene editing for 2D projects.

flappybird.gif

Scene Upgrade

Background

In version 0.3, setting the background color in the camera component was unreasonable. In version 0.4, we consolidated background-related settings into the scene properties, allowing the background to be set to a solid color or sky, and opened up the settings for the sky mode's mesh and material.

// 纯色模式背景
background.mode = BackgroundMode.SolidColor;
background.solidColor.setValue(1, 1, 1, 1);
 
// 天空模式背景
background.mode = BackgroundMode.Sky;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2); // 设置天空网格
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.textureCubeMap = textureCube;
background.sky.material = skyMaterial;  // 设置天空材质

At the same time, we added the "Scene Settings" feature in the editor, where you can now adjust the "Background" and "Ambient Light" settings in the scene settings.

2021-06-16 22.42.16.gif

Ambient Light

In version 0.3, ambient light-related settings were included in the EnvironmentMapLight component and the AmbientLight component, making the structure somewhat scattered. In version 0.4, we merged and consolidated ambient light-related settings into the ambientLight property of the Scene. The diffuse reflection of ambient light is divided into solid color mode and texture mode.

const ambientLight = scene.ambientLight;
 
// 漫反射可以选择纯色模式
ambientLight.diffuseMode = DiffuseMode.SolidColor;
scene.ambientLight.diffuseSolidColor.setValue(1, 1, 1, 1);
 
// 漫反射也可以选择纹理模式
ambientLight.diffuseMode = DiffuseMode.Texture;
ambientLight.diffuseTexture = cubeTexture;
 
// 镜面反射
ambientLight.specularTexture = cubeTexture;

Other Feature Updates

Engine

  • Feature: Enabled WebGLRenderer's stencil buffer by default #312
  • Feature: Added linear interpolation API to matrix #268
  • Bug Fix: Setting baseColor in ShaderData was ineffective #306
  • Bug Fix: Setting geometry parameters in the editor was ineffective #293
  • Bug Fix: Supported full VertexElementFormat and normalization operations #287
  • Bug Fix: Blinn Phong shader error with multiple direct light sources #323
  • Bug Fix: FrameBuffer Picker destruction error #316
  • Bug Fix: Point light and spotlight bugs #279
  • Bug Fix: Inaccurate ray detection #265
  • Bug Fix: Spine Clone Bug #23

Editor

  • Feature: Added right-click menu to the node tree
  • Bug Fix: Screenshot button not working bug
  • Bug Fix: Gizmo, guide lines, and camera operation bugs in the operation area
  • Bug Fix: Geometry parameter setting bug
  • Bug Fix: Optimized form input experience in the inspector

Other Information

Unit Tests

Overall unit test coverage increased from 43% in version 0.3 to 45%. We integrated codecov, where you can view detailed coverage statistics. In pull requests, you can see comments on unit test coverage:

image.png

And added a badge in README.md:

image.png

More

0.5 Milestone Preview

Galacean Engine will revolutionize the animation system, specifically Morph animation and Animator animation. Morph animation remains a very commonly used form of animation, especially in animations with rich details. Animator is the core animation system of Galacean Engine, and after redesigning, it has significant improvements in animation blending and animation layering functions. Performance is expected to improve by 30%, so stay tuned!

Finally

We welcome everyone to star our GitHub repository. You can also keep an eye on our future v0.5 plans, and you can raise your requirements and issues in issues. Developers can join our DingTalk group to discuss and explore some issues with us:

Galacean Logo
Make fantastic web apps with the prospective
technologies and tools.
Copyright © 2025 Galacean
All rights reserved.