Skip to content
vgai Learn

Render thousands with instancing

quick start Beginner ⏱ 6 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor

What you'll learn

  • Run a scene that uses an instancer mesh field
  • See thousands of instances drawn as one InstancedMesh
  • Understand the deterministic (seeded) grid layout

What you'll build: A look at the instanced-grid scene — many instances in a single draw call.

Walkthrough — Render thousands with instancing · generated by site/media/lessons/scenes-batch.lesson.ts (4 steps)

A mesh with an instancer field renders as a single THREE.InstancedMesh — one draw call for many copies. The instanced-grid scene uses the built-in Grid instancer.

Steps

Section titled “Steps”

  1. Open the instanced-grid scene. Load examples/scenes/instanced-grid.vscn.json.

    The instanced-grid scene loaded
    The instanced-grid scene.

  2. Enter play mode — the instancer renders the grid. The Grid instancer lays out a countX × countZ grid (default 100 × 100 = 10,000 instances) on the XZ plane.

    The instanced grid rendered in play mode
    A grid of instances.

  3. Thousands of instances draw in a single InstancedMesh. One draw call covers the whole grid; optional jitter uses a seeded LCG so the layout is deterministic across loads.

    The full instanced grid
    One InstancedMesh, many instances.

  4. Stop play mode. Press Stop (or Escape).

Recap

New functionality

  • Ran a scene using the Grid instancer
  • Saw a large grid drawn in one call

New concepts & skills

  • A mesh's instancer field -> one InstancedMesh
  • The Grid instancer uses countX/countZ/spacing/jitter
  • Jitter is a seeded LCG (deterministic, no Math.random)

Next lesson → Manual: Instancing, terrain & splines

On Your Own!

Extend what you built:

  • Change countX/countZ in the scene's instancerParams
  • Add jitter and reload — the layout is identical each time
  • Register your own instancer that produces a circular layout

See also

Section titled “See also”