Rendering Practices and Technical Exploration of SAR Creator in Douyin's 2024 Spring Festival Activities

The Douyin "Happy Chinese New Year" series launched during the 2024 Spring Festival, with SAR Creator—a high‑performance, TypeScript‑based interactive solution—providing the core rendering support for the "Wealth‑Attracting Dragon" and "Dragon Treasure Hunt" activities.

2D & 3D Hybrid Rendering : Dragon and girl characters use 3D models for realism, while houses and firecrackers are rendered as 2D sprites. Camera near/far planes and FOV are tuned to create visual depth ordering.

Material Library : SAR Creator offers Unlit, PBR, Uber, and NPR materials. Different objects use appropriate shaders (e.g., Unlit for performance‑critical parts, PBR for realistic lighting). Artists adjust metallic and roughness values per mesh to achieve desired visual quality.

Lighting & Shadows : Two directional lights are employed to approximate real‑world illumination. ShadowMaterial enables selective shadow casting and receiving, allowing fine‑grained control over performance‑heavy shadow features on mobile.

ShaderGraph Custom Effects : Custom shaders are built with the ShaderGraph plugin, enabling rapid iteration of effects such as cartoon water, bloom, and edge‑dissolve without writing low‑level code.

Post‑Processing – Bloom : A luminance threshold isolates bright regions, which are then blurred using a dual‑blur kernel (down‑sample → up‑sample) before being composited back onto the original scene. Sample shader code:

uniform float lumaThreshold;
float luminance(vec3 color) { return dot(color, vec3(0.299, 0.587, 0.114)); }
void main() {
    vec4 texel = texture2D(tDiffuse, vUv);
    float lum = luminance(texel.xyz);
    float contribute = step(lumaThreshold, lum);
    gl_FragColor = texel * contribute;
}

Effect Implementations in "Dragon Treasure Hunt" :

Entrance Dissolve : Uses a low‑resolution dissolve map sampled in a ShaderGraph node; animation driven by a step function.

Map Freeze (Partitioned Unfreeze) : Stores region IDs in the alpha channel of a texture (IDMap) and toggles freeze state per region, reducing draw calls from eight to a single pass.

Particle Trail + Geometry Trail : A lightweight particle system (7.66 KB) combined with GPU Instancing creates trailing effects; geometry trails update vertex positions directly.

Both trail implementations rely on GPU parallelism to offload animation work from the CPU.

Displacement & Bump Mapping : Height maps (DisplacementMap) modify vertex positions in the vertex shader, while normal perturbation using a BumpMap refines surface detail. Sample shader snippets:

#ifdef USE_DISPLACEMENTMAP
    vec2 displacementUV;
    uniform mat3 displacementUVMatrix;
    uniform sampler2D displacementMap;
    uniform float displacementScale;
    uniform float displacementBias;
#endif
#ifdef USE_DISPLACEMENTMAP
    positionV4.xyz += normalize(positionV4.xyz) * (texture2D(displacementMap, displacementUV).x * displacementScale + displacementBias);
#endif

#ifdef USE_BUMPMAP
    varying vec2 bumpUV;
    uniform sampler2D bumpMap;
    uniform float bumpScale;
#endif
#ifdef USE_BUMPMAP
    vec2 dHdxy_fwd() {
        vec2 dSTdx = dFdx(bumpUV);
        vec2 dSTdy = dFdy(bumpUV);
        float Hll = bumpScale * texture2D(bumpMap, bumpUV).x;
        float dBx = bumpScale * texture2D(bumpMap, bumpUV + dSTdx).x - Hll;
        float dBy = bumpScale * texture2D(bumpMap, bumpUV + dSTdy).x - Hll;
        return vec2(dBx, dBy);
    }
    // ...normal perturbation code omitted for brevity
#endif

Future Outlook : The team plans to expand post‑processing options beyond bloom and FXAA, improve asset pipelines for artists, and add more out‑of‑the‑box material and ShaderGraph features.

Team Introduction : The article is authored by the Douyin Front‑End Architecture – Interactive Experience Technology team, responsible for SAR Creator, Simple Engine, and AnnieX interactive container, collaborating with multiple internal product groups.