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

The Douyin Spring Festival 2024 series introduced two interactive scenes, "Lucky‑God Dragon" and "Dragon Treasure Hunt," both powered by SAR Creator, a high‑performance TypeScript‑based interactive solution supporting browsers and cross‑platform frameworks.

2D & 3D Mixed Rendering : The "Lucky‑God Dragon" activity combines 3D models for the dragon and girl with 2D sprites for houses and fireworks, using camera near/far plane and FOV adjustments to create depth ordering.

Material Library : SAR Creator provides Unlit, PBR, Uber, and NPR materials. Designers selected appropriate shaders (e.g., Unlit for performance‑critical parts, PBR for realistic lighting) and leveraged the built‑in material library and ShaderGraph to create custom effects.

Lighting and Shadows : Two directional lights were used to achieve realistic illumination. ShadowMaterial allowed fine‑grained control of shadow casting and receiving, enabling performance‑friendly shadow handling on mobile devices.

ShaderGraph Exploration : Custom shaders were built with ShaderGraph, mirroring Unity's node system, allowing rapid iteration and visual debugging. Examples include cartoon water, fault‑tolerant glow, and custom dissolve effects.

Post‑Processing – Bloom :

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 luminosity = luminance(texel.xyz);
  float contribute = step(lumaThreshold, luminosity);
  gl_FragColor = texel * contribute;
}

The bloom pipeline uses a brightness threshold, a dual‑blur down‑sampling/up‑sampling pass, and multiple blur kernels (Kawase, Box4Tap, Tent9Tap) to achieve high‑quality glow with reasonable cost.

Particle Trail Implementation (GPU Instancing):

// Create render textures for down‑sampling
for (let i = 0; i < downSampleNum; i++) {
  this.fboArr[i] = new RenderTexture(0, 0, fboOptions);
  if (i !== downSampleNum - 1) {
    this.fboArr[(downSampleNum - 1) * 2 - i] = new RenderTexture(0, 0, fboOptions);
  }
}
// Down‑sample loop
for (let i = 0; i < downSampleNum - 1; i++) {
  uniforms.tDiffuse.value = fboArr[i].texture;
  uniforms.halfPixel.value.set(1 / fboArr[i].width, 1 / fboArr[i].height);
  fsQuad.render(renderer, fboArr[i + 1]);
}
// Up‑sample loop
const n = downSampleNum;
for (let i = downSampleNum - 1; i < (downSampleNum - 1) * 2; i++) {
  uniforms.tDiffuse.value = fboArr[i].texture;
  uniforms.downTexture.value = fboArr[2 * n - i - 3].texture;
  uniforms.halfPixel.value.set(1 / fboArr[i].width, 1 / fboArr[i].height);
  fsQuad.render(renderer, fboArr[i + 1]);
}

Particle trails are packaged into a 7.66 KB asset using ShaderGraph’s EmitOverDistance node, while geometry trails update vertex positions directly, as illustrated in the accompanying diagrams.

Displacement & Bump Mapping :

#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

Similarly, bump mapping perturbs normals in the fragment shader to add fine surface detail.

The article concludes with a future outlook: expanding post‑processing effects beyond bloom and FXAA, improving artist workflows, and upcoming topics on Wasm and WebGL innovations for interactive front‑end experiences.