The first summer is still clear and the grass is still. As summer approaches, Oasis 0.4 milestone has come to an end.

In terms of engine, glTF parser is mainly upgraded. In terms of 2D, mask capability and Lottie animation support are added. In the editor, 2D editing and scene editing are added. In addition, 20+ examples and documentation will be added to the official website, including much-needed art flow and applet documentation.

function

glTFupgrade

In order to improve the stability and functionality of glTF, version 0.4 has carried out a comprehensive reconstruction of glTF, greatly enhancing the functionality and scalability, fixing some known bugs, and covering the official glTF test case.

In terms of plug-in extension, the upgraded glTF parser uses Pipeline mode. If the default parser cannot meet your needs, you can customize the Pipeline by referring to the writing method of the engine default Pipeline parser, or you can use the writing method of the decorator extension plug-in. Currently, the following plug-ins are supported:

In terms of tools, we have kindly provided themglTF ViewerTo facilitate developers to drag and drop glTF folder for online preview/debugging.

GlTF (GL Transmission Format) is a specification released by Khronos that can efficiently transmit and load 3D scenes. Like traditional model formats such as FBX and OBJ, glTF basically supports all features in 3D scenes. It is also the current RECOMMENDED 3D model format by Oasis. GlTF’s plug-in mechanism allows developers to customize the desired functionality.

​

Upgrade 2 d

The elves mask

Sprite masks are a common feature in 2D, allowing you to control how certain areas of the Sprite are shown and hidden. 2D sprites have been added since version 0.3SpriteMaskComponent that provides Sprite inner mask and outer mask capabilities. As shown in theThe document.The editor also adds the mask attribute Settings for the SpriteMask component and SpriteRenderer simultaneously.

Spine

Spine is an important part of Oasis animation ecology, so the adaptation of Spine directly affects the development of Oasis ecology. In version 0.4, we have strengthened the resource loading of Spine. In the previous version, only single-path loading was supported, while in version 0.4, double-path loading was added. The json(or bin) and Atlas must have the same name. Json (or bin) and Atlas files can be named differently after dual-path loading, which is more flexible:

A single file:

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

Double 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"
});
Copy the code

In addition, a bug was fixed that SpineAnimation’s spine bone shared with animation data when the SpineAnimation component cloned its mounted entity. See documentation for details.

Lottie

LottieAs a popular animation format among front-end developers in recent years, Oasis has also taken it as a key object to embrace ecology. In version 0.4, we initially implemented the drawing of Sprite Elements in Lottie node tree, and will gradually support advanced Elements such as masks and shapes. Different from thelottie-webOasis Lottie uses Oasis Engine for SVG or Canvas rendering schemesBufferMeshFunction to achieve high – performance batch drawing ability. As shown in theThe document.

New 2D editing mode in editor

A switch button of “2D mode” is added in the navigation bar of the operation area, which enables users to quickly switch between 3D/2D editing modes and facilitates scene editing of 2D projects.

We use the engine’s 2D ability, quickly reproduce the classic game FlappyBird, and as the ant 527 technology day Oasis booth interactive game, welcome to useAlipayScan code experience.

Scene upgrade

background

In version 0.3, the setting of the background color in the camera components does not make sense. In version 0.4 we converged the background Settings to the scene properties, allowing the background to be a solid color or sky, and opened up the sky mode grid and material Settings. See documentation for details.

// Solid color mode background
background.mode = BackgroundMode.SolidColor;
background.solidColor.setValue(1.1.1.1);

// Sky mode background
background.mode = BackgroundMode.Sky;
background.sky.mesh = PrimitiveMesh.createCuboid(engine, 2.2.2); // Set the sky grid
const skyMaterial = new SkyBoxMaterial(engine);
skyMaterial.textureCubeMap = textureCube;
background.sky.material = skyMaterial;  // Set the sky material
Copy the code

Also added the “Scene Settings” function in the editor. You can now adjust the Settings of “background” and “ambient light” in the scene Settings.

The ambient light

In version 0.3, the environment light Settings are contained in the EnvironmentMapLight component and AmbientLight component, which are relatively fragmented. In version 0.4 we merged the ambientLight Settings and converged them to the Scene ambientLight property. The diffuse reflection of ambient light is divided into solid color mode and texture mode. See documentation for details.

const ambientLight = scene.ambientLight;

// Diffuse reflection can be selected in solid color mode
ambientLight.diffuseMode = DiffuseMode.SolidColor;
scene.ambientLight.diffuseSolidColor.setValue(1.1.1.1);

Diffuse reflection can also be selected in texture mode
ambientLight.diffuseMode = DiffuseMode.Texture;
ambientLight.diffuseTexture = cubeTexture;

// Mirror reflection
ambientLight.specularTexture = cubeTexture;
Copy the code

Other feature updates

engine

• Feature: The WebGLRenderer template buffer #312 is enabled by default
• Feature: Add linear interpolation API #268 to the matrix
• Bug Fix: Setting baseColor in ShaderData is invalid #306
• Bug Fix: Invalid #293 in editor setting geometry parameters
• Bug Fix: Support for full VertexElementFormat and support for normalizing operation #287
• Bug Fix: Blinn Phong Shader reports an error #323 when using multiple direct lights
• Bug Fix: FrameBuffer Picker destruction error #316
• Bug Fix: Point lights and spotlights Bug #279
• Bug Fix: X-ray detection is inaccurate
• Bug Fix: Spine Clone Bug #23

The editor

• Feature: Added right-click menu to node tree
• Bug Fix: A Bug where the screenshot button doesn’t work
• Bug Fix: Gizmo, guides, and camera operation bugs in the operation area
• Bug Fix: Geometry parameter setting Bug
• Bug Fix: Inspector form input experience optimization

Other information

The sample

This issue adds 22 examples:

A single measurement

Overall single-test coverage was improved from 43% in version 0.345%. We plugged incodecovTo view detailed coverage statistics. In the pull Request, you can see comments on single-test coverage:And in theREADME.mdAdded badge in:

More and more

• Milestone 0.4: github.com/oasis-engin…
• Change Log:github.com/oasis-engin…

0.5 Milestone Notice

Oasis will make innovations in animation system, namely Morph animation and Animator animation. Morph animation is still the most commonly used animation form, especially in the aspect of detailed animation performance. Animator is the core animation system of Oasis. After the redesign, it has improved the functions of animation fusion and animation overlay, and the performance is expected to increase by 30%. Stay tuned!

The last

Welcome everyone to star our Github warehouse. You can also pay attention to our subsequent V0.5 planning at any time, and give us your needs and questions in issues. Developers can join our Group to make fun of us and discuss some of the issues, search 31360432

Whether you’re in rendering, TA, Web front-end or gaming, if you’re looking for an oasis like us, please send your resume to [email protected]. Job description: www.yuque.com/oasis-engin… .