Sprite3D

Sprite3D is a 2D plane object placed within 3D space. Unlike general meshes, it has a built-in Billboard feature, making it optimized for implementing elements that must always face the front regardless of the camera's rotation (icons, name tags, special effects, etc.).

1. Key Features

• Billboard: Supports the function to always face the camera by default.
• Automatic Aspect Ratio: Automatically calculates the aspect ratio of the assigned texture to adjust the size of the plane.
• UI Friendly: Combines position in 3D space (World Position) with 2D expression methods to provide UI elements with a sense of space.

2. Basic Usage

Sprite3D internally uses Plane geometry and is used with BitmapMaterial to output images.

import * as RedGPU from "https://redcamel.github.io/RedGPU/dist/index.js";

// 1. Create Texture and Material
const texture = new RedGPU.Resource.BitmapTexture(redGPUContext, 'https://redcamel.github.io/RedGPU/examples/assets/texture/crate.png');
const material = new RedGPU.Material.BitmapMaterial(redGPUContext, texture);

// 2. Create and Add Sprite
const sprite = new RedGPU.Display.Sprite3D(redGPUContext, material);
scene.addChild(sprite);

3. Key Property Control

Key properties controlling the sprite's billboard behavior and visual representation.

Property Name	Description	Default Value
useBillboard	Whether to always face the camera	true
useBillboardPerspective	Whether to apply perspective (size change) based on distance from the camera	true

// Set icon style where size remains constant regardless of distance
sprite.useBillboard = true;
sprite.useBillboardPerspective = false;

4. Practical Example: Comparison by Billboard Type

Let's place sprites with three different settings in 3D space to check the visual differences according to billboard options.

---

Key Summary

• Sprite3D provides a Billboard feature that faces the camera head-on while having a 3D coordinate system.
• You can implement UI-style elements that appear at a constant size regardless of distance via the useBillboardPerspective property.
• Geometry size is automatically adjusted according to the resolution and ratio of the texture, making it convenient to use.

---

Next Steps

Learn about animation effects using sprites.

• SpriteSheet3D