3D Rendering for Digital Collectibles in the Taobao App Using Blender and Unity

This article describes a complete workflow for adding 3D rendering capabilities to the Taobao mobile app to showcase digital collectibles. It starts with the business background: the need to render merchant‑provided 3D models and dynamically texture a generic picture‑frame model with NFT images or videos.

Solution Design – The core requirements are dynamic material and texture updates on GameObjects. An API setGameObjectInfo(midOrSkuName, data) is defined to modify textures, colors, and shininess at runtime.

interface GameObjectInfo {
  img?: string;
  videoSrc?: string;
  color?: string;
  isShine?: boolean;
}

interface setGameObjectInfo {
  (midOrSkuName: string, data: Record<string, GameObjectInfo>): Promise<void>;
}

Technical Challenges include mesh splitting/merging, UV mapping, GLTF‑to‑FBX conversion, and ensuring visual consistency between web and the app.

Model Pre‑processing – Using Blender, the frame model is split into three objects (logo, frame, textured face). UVs are adjusted, and the model is exported as FBX with embedded textures.

Unity Integration – The FBX is imported, materials are switched to either LitMaterial (affected by lighting) or UnlitMaterial (lighting‑independent) depending on performance needs. Dynamic texture updates are performed via the API, and anisotropic filtering is enabled to improve texture quality at glancing angles.

private async udpateNodeMaterial(imgGo: Node, option: {img?: string; color?: string; isShine?: boolean}) {
  const { img, color, isShine = true } = option;
  const imgRender = imgGo.getComponent(MeshRenderer);
  const material = isShine ? new LitMaterial() : new UnlitMaterial();
  imgRender.materials.clear();
  imgRender.materials.add(material);
  if (color) material.color.set(color);
  if (img) {
    material.offset.set(0, 1);
    material.scale.set(1, -1);
    const tex = await this._assetManager.loadAsync(Texture2D, '', img);
    tex.samplerFlags |= SamplerFlags.MinAnisotropic | SamplerFlags.MagAnisotropic;
    material.texAlbedo = tex;
  }
}

Core Issues discovered after implementation: rotation distortion caused by a large FOV (solved by reducing FOV from 60° to 30°), lighting affecting texture colors, and texture quality loss at steep angles (mitigated by enabling anisotropic filtering).

The article concludes with a summary of the end‑to‑end pipeline—from Blender preprocessing, FBX export, Unity material setup, to runtime dynamic texture replacement—providing practical guidance for developers new to Blender and Unity.