Skip to content
vgai Learn

Explore the all-systems showcase

quick start Beginner ⏱ 8 min vgai 0.1.0

Prerequisites: Installed vgai and run the editor (Get Started)

What you'll learn

  • Run the all-systems showcase scene
  • See PBR materials, lights, meshes, particles, and bloom together
  • Toggle the physics debug view to see colliders

What you'll build: A guided look at the editor-tutorial showcase with every core render + physics system live.

Walkthrough — Explore the all-systems showcase · generated by site/media/lessons/qs-showcase.lesson.ts (5 steps)

The editor-tutorial example is a single scene that exercises most of the engine at once — the fastest way to see what vgai renders. Its setup adds particles, a bloom post pass, and debug draw on top of a scene full of PBR materials, lights, and physics bodies.

Steps

Section titled “Steps”

  1. Open the editor-tutorial showcase scene. Load examples/scenes/editor-tutorial.vscn.json.

    The editor-tutorial scene loaded
    The showcase scene.

  2. Enter play mode — meshes, materials and lights render. Press Play. The scene’s PBR materials and lights render through the engine renderer.

    Play mode rendering materials and lights
    PBR materials + lighting.

  3. Particles and bloom post-processing animate the scene. The example’s setup adds a three.quarks particle system and a bloom effect pass — they animate live.

    Particles and bloom in play mode
    Particles + bloom (added in the example's setup).

  4. Toggle the physics debug view with P to see colliders. Collider wireframes overlay the scene, drawn from rapierWorld.debugRender().

    The physics debug overlay
    Physics debug overlay (P).

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

Recap

New functionality

  • Ran the all-systems showcase
  • Saw materials, lights, particles, and bloom together
  • Toggled the physics debug view

New concepts & skills

  • Materials/lights/physics come from the scene; particles/bloom/debug-draw are added in the example's setup()
  • Play mode runs the real engine renderer + post-processing
  • P toggles the Rapier debug overlay

Next lesson → Manual: Post-processing

On Your Own!

Extend what you built:

  • Open the inspector and change a material's color or roughness
  • Tweak the bloom intensity (see the Post-processing manual)
  • Add a light and watch shadows update

See also

Section titled “See also”