How Ant’s ‘Five Blessings’ 3D Spring Promotion Was Built with Oasis Engine

Business Breakdown

Five Blessings is Ant’s yearly Spring promotion, and this year introduced many innovations in interaction and gameplay. The main venue uses a scrolling display for four sub‑scenes, implemented with the Oasis engine for the 3D part and DOM for the rest.

DOM UI 1: Content displayed below or not intersecting the 3D content

Canvas: 3D content display area

DOM UI 2: Content overlaying the 3D scene

3D Implementation

The requirement is to place multiple scenes together and scroll them as a whole. All scenes are placed under a parent node, and rotating the parent controls the overall scroll.

To achieve the scrolling effect, the vertical swipe distance is mapped to the rotation angle of a virtual circle, moving the parent node accordingly.

Scene Construction

The Oasis engine’s Low‑Code mode allows scene editing directly in the editor (see the editor documentation). The main venue page was built using the Oasis 3D editor.

Logic Development

A script component is used to handle touch events. The core script TabController.js provides three APIs for touch begin, move, and end.

import * as o3 from 'oasis-engine';

// Y direction swipe distance to X‑axis rotation ratio
const D2R_RATIO = 1 / 35;

export class Script6340825 extends o3.Script {
  private _startTouchPos = new o3.Vector2();
  private _curTouchPos = new o3.Vector2();
  public touchBegin(pos) { this._startTouchPos.setValue(pos.x, pos.y); }
  public touchMove(pos) {
    this._curTouchPos.setValue(pos.x, pos.y);
    const offsetY = this._curTouchPos.y - this._startTouchPos.y;
    const { x, y, z } = this._curRotation;
    const newX = Math.max(OFFSET_MIN, Math.min(OFFSET_MAX, x + offsetY * D2R_RATIO));
    this.entity.transform.setRotation(newX, y, z);
  }
  public touchEnd(pos) { /* calculate speed and apply inertia */ }
}

The script also includes target angle calculation with speed boost and inertia handling.

private _calculateTargetX(curX) {
  if (Math.abs(this._speed) > SPEED_LIMIT) {
    curX += this._speed > 0 ? 5.5 : -5.5;
  }
  let curTab = this._getTab(curX);
  curTab = Math.max(TAB_START, curTab);
  if (this._curIndex !== curTab) {
    this._curIndex = curTab;
    this.engine.dispatch('moveToTab', { tabIndex: this._curIndex - TAB_START });
  }
  return TAB_FLAG[curTab];
}

Effects

Each scene includes particle effects (random floating dots) and skeletal animation for models, using Oasis’s built‑in particle system.

Business Linkage

After the 3D scroll is completed, events are dispatched to synchronize UI and 3D layers via a GameController that listens to UI events and calls the relevant TabController APIs.

import * as o3 from 'oasis-engine';
import { Script6340825 } from './tabController';

export class Script5460766 extends o3.Script {
  onAwake() {
    const tabEntity = this.entity.findByName('tab');
    const tabController = tabEntity.getComponent(Script6340825);
    this.engine.on('initTab', e => tabController.initTab(e));
    this.engine.on('selectTab', e => tabController.selectTab(e));
    this.engine.on('touchstart', e => tabController.touchBegin(e));
    this.engine.on('touchmove', e => tabController.touchMove(e));
    this.engine.on('touchend', e => tabController.touchEnd(e));
  }
}

Optimization

Memory Optimization

Memory consumption is a major bottleneck. Optimizations focus on reducing vertex data, textures, and buffers.

Vertex Data

Model simplification (reducing triangles) and CPU‑side clipping are applied. Only visible sub‑scenes are uploaded to the GPU based on parent rotation.

private _updateChildsActive(_curRotationX) {
  for (let i = 0; i < this._childs.length; ++i) {
    const child = this._childs[i];
    const min = (_curRotationX - 33) + i * 11;
    const max = min + 11;
    child.isActive = !(max <= 0 || min >= 16.5);
  }
}

Texture Compression

Each sub‑scene uses a 1024×1024 texture (~4 MB). Texture compression is enabled in the Oasis editor, generating multiple compressed formats.

Buffer Optimization

GPU buffers (color, depth, etc.) are reduced by limiting canvas size and culling invisible sub‑scenes, dropping GPU memory from 101 MB to 30.7 MB.

Loading Optimization

Initially all assets were bundled in the schema, causing long initialization. The solution is to load model .bin files and images dynamically based on user interaction.

public initTab(e) {
  // dynamic resource download
  this._download(e);
}

After the change, page load time on mobile is under 1 second.

Effect Display Strategy Optimization

Devices are categorized into high, medium, and low tiers. For low‑end devices, the experience is degraded gracefully, while high‑end devices retain full effects.

Conclusion

Since the launch on February 1, the Five Blessings main venue has received billions of visits, with 3D accounting for 90 % of the page and a crash rate of 0.0023 %. The success is attributed to careful performance engineering and close collaboration among the team.

For those interested in graphics rendering, join the Oasis Engine open‑source community (DingTalk group 31360432) or contact the author at [email protected].

See the original Oasis Engine documentation for more details.