Optimizing Game Interaction with AnnieX: Engine Preheat, Asset Offline Library, and Resource Compression for the 2024 Douyin Spring Festival

Business Background

AnnieX is ByteDance's unified game container serving internal e‑commerce, live‑streaming, and user‑generated content scenarios. For the 2024 Douyin Spring Festival, the team aimed to deepen optimization for interactive game scenes, improving container performance, traffic handling, and overall game experience.

Interactive Suite Introduction

The team introduced an interactive suite to provide game‑specific optimizations. In 2024 they completed engine pre‑warming and a public offline asset library, achieving notable load‑time improvements. Future work includes extending compression and physics engine support for 2025.

Asset Offline Public Library manages engine resources needed by interactive games, reducing package size and download bandwidth by sharing engine versions across games.

Engine Pre‑heat preloads the engine during page routing and uses idle JS thread time to warm the engine, mounting the instance on a global object for instant access when the game starts.

Resource Compression & Decompression dramatically improves utilization by compressing assets during build and decompressing them in the container at runtime.

Physics Engine exploration aims to replace JS/WASM‑based physics with a more efficient solution for better performance.

Glossary

Engine Pre‑heat & Asset Offline Library

Business Pain Points

Engine Dependency: Game interaction scenes require engine loading and initialization, costing ~200‑300 ms.

Load Time vs. User Drop‑off: Each additional 0.5 s after 1.5 s of load time causes ~4% user loss.

To address these, the team implemented engine pre‑heat, achieving noticeable load‑time reductions in the 2024 Spring Festival.

Overall Approach

Engine pre‑loading occurs during route navigation, and pre‑heat runs in idle JS time, mounting the warmed instance globally for immediate use.

Technical Details

Toolchain Modifications

The build pipeline integrates speedy-split-chunks to extract the engine bundle into a shared offline library, and a split-engine-adapter component injects pre‑heat code and fallback logic. The adapter hooks requireModule to load the engine if the global instance is missing.

Engine Pre‑heat

Clients preload the engine based on meta files, verify signatures to prevent JS injection, and pre‑heat the engine on the JS thread, exposing the instance globally.

Business Benefits

Engine pre‑heat and shared offline library reduced the main package size by 28.05% and saved tens of thousands of yuan in bandwidth costs. Load‑time improvements ranged from 200 ms to 500 ms, with PCT90 reductions of 32.12% (Android) and 47.24% (iOS).

Resource Compression

Business Pain Points

Large 3D assets increase network load; compressing them improves load speed and reduces traffic.

Overall Approach

The container uses Quantization, Sparse Accessor, and meshopt techniques for geometry and animation data.

Geometry Compression

Quantization converts 32‑bit floats to 8‑16‑bit integers, achieving 25‑50% compression. Sparse Accessor stores only non‑zero values, providing lossless compression with O(n) complexity. meshopt (EXT_meshopt_compression) further optimizes and compresses geometry using WASM (fallback to asm.js).

Animation Compression

Animation data is resampled (lossless) and then compressed using meshopt with appropriate filters, yielding ~40% compression.

Future Plans

Improve engine pre‑heat hit rate (currently ~81.33%) and refine offline library version management to control bandwidth. Enhance compatibility and performance of meshopt decompression, potentially moving to native C++ implementations. Expand compression to other asset types such as images, videos, fonts, and scripts.

Team Introduction

The Douyin Front‑End Architecture – Interactive Experience Technology Team provides solutions like SAR Creator, Simple Engine, and the AnnieX interactive container, collaborating with various internal teams to drive innovation.

Next Episode Preview

The upcoming series will focus on "Editor Techniques and Practices" for the interactive solution.

Past Review

2024 Douyin Happy Chinese New Year (Part 1): Treasure‑Seeking Dragon Interactive Technology Reveal