3D Scene Setup

Learn professional techniques for designing compelling 3D scenes in G3Engine. This guide covers scene composition, advanced lighting, material design, and camera management.

Scene Architecture Best Practices

Planning Your Scene

Before adding objects, plan your scene structure:

Define the game area boundaries - Know your playable space

Sketch the layout - Where will players move? What’s the focal point?

List required assets - Objects, lights, cameras, interactive elements

Plan the visual hierarchy - What should draw the player’s eye?

Organize with the Scene Graph

The Scene Graph (Left Panel) is your project hierarchy. Keep it organized:

Name objects descriptively:

❌ Bad: Cube 1, Sphere 3, Box 7
✅ Good: Player, Platform_Main, Collectible_Coin

Group related objects by using naming conventions:

Environment_Ground
Environment_Wall_North
Environment_Wall_South
Collectibles_Coin_01
Collectibles_Coin_02
Lights_Main
Lights_Fill

Rename objects immediately after adding them - right-click in the Scene Graph and select “Rename”

Set Up the Ground Plane

Every 3D game needs a ground:

Add a Plane from the Asset Library

The plane spawns at Y=0 with default rotation (-90°, 0, 0) to lay flat

Scale it larger for your game area:

{
  "name": "Ground",
  "type": "plane",
  "position": { "x": 0, "y": 0, "z": 0 },
  "rotation": { "x": -1.5708, "y": 0, "z": 0 },
  "scale": { "x": 10, "y": 10, "z": 1 },
  "material": {
    "color": "#2a2a3e",
    "roughness": 0.8,
    "metalness": 0.0
  }
}

Rotation values are in radians. -90° = -1.5708 radians. The default plane rotation ensures it faces upward.

Build the Environment

Construct your world using primitive shapes:

Platforms and Walls:

Use Cubes scaled flat (e.g., scale: {x: 5, y: 0.2, z: 2}) for platforms

Use Cubes scaled tall (e.g., scale: {x: 0.2, y: 3, z: 5}) for walls

Use Cylinders for pillars and vertical structures

Use Spheres for organic shapes or collectibles

Positioning Tips:

Ground plane is at Y=0

Standing objects should be at Y = (object height / 2)

A cube with scale.y = 1 should be positioned at y = 0.5

Advanced Lighting

Lighting defines the mood and visibility of your game.

Three-Point Lighting Setup

Professional 3D lighting uses three lights:

1. Key Light (Main Directional Light)

{
  "type": "directionalLight",
  "name": "KeyLight",
  "position": { "x": 5, "y": 8, "z": 5 },
  "lightIntensity": 1.2,
  "lightColor": "#ffffff"
}

The key light is your primary light source - typically simulating the sun.

2. Fill Light (Secondary Point Light)

{
  "type": "pointLight",
  "name": "FillLight",
  "position": { "x": -3, "y": 4, "z": 2 },
  "lightIntensity": 0.6,
  "lightColor": "#b4d4ff"
}

The fill light softens harsh shadows from the key light. Use a cooler, less intense color.

3. Ambient Light (Global Illumination)

{
  "type": "ambientLight",
  "name": "Ambient",
  "lightIntensity": 0.4,
  "lightColor": "#ffffff"
}

Ambient light ensures no surface is completely black.

Dramatic Lighting Techniques

Dark/Horror Game:

Low ambient light (intensity: 0.1-0.2)

Few point lights with limited range

Use emissive materials on objects to create glowing effects

Bright/Cartoon Game:

High ambient light (intensity: 0.6-0.8)

Bright, saturated light colors

Multiple fill lights

Neon/Cyberpunk:

Very low ambient (0.1)

Many colored point lights with high intensity

Emissive materials with bright colors (#ff00ff, #00ffff)

Emissive Materials

Make objects glow:

{
  "material": {
    "color": "#6366f1",
    "emissive": "#8b5cf6",
    "emissiveIntensity": 1.5,
    "roughness": 0.4,
    "metalness": 0.1
  }
}

Emissive objects glow without emitting actual light. Combine with a Point Light at the same position for realistic glowing light sources.

Material Design

Understanding Material Properties

G3Engine uses Physically-Based Rendering (PBR) materials:

Color - Base color of the object

"color": "#6366f1"

Roughness (0.0 - 1.0)

0.0 = Perfect mirror reflection

0.5 = Balanced (plastic-like)

1.0 = Completely matte (no reflections)

Metalness (0.0 - 1.0)

0.0 = Non-metallic (wood, plastic, stone)

1.0 = Fully metallic (gold, steel, chrome)

Opacity (0.0 - 1.0)

1.0 = Fully opaque

0.5 = Semi-transparent

0.0 = Fully transparent

Set transparent: true to enable transparency

Material Presets

Plastic:

{
  "color": "#ff6b6b",
  "roughness": 0.3,
  "metalness": 0.0
}

Metal (Chrome):

{
  "color": "#e0e0e0",
  "roughness": 0.1,
  "metalness": 1.0
}

Metal (Gold):

{
  "color": "#ffd700",
  "roughness": 0.2,
  "metalness": 1.0
}

Glass:

{
  "color": "#ffffff",
  "roughness": 0.05,
  "metalness": 0.0,
  "opacity": 0.3,
  "transparent": true
}

Matte Stone:

{
  "color": "#808080",
  "roughness": 0.9,
  "metalness": 0.0
}

Neon Glow:

{
  "color": "#8b5cf6",
  "roughness": 0.2,
  "metalness": 0.0,
  "emissive": "#8b5cf6",
  "emissiveIntensity": 2.0
}

Applying Materials

Select an object in the Scene Graph or viewport

Open the Right Panel Inspector

Scroll to the Material section

Adjust properties using sliders or input fields

Changes apply instantly to the viewport

Camera Setup

Default Camera

G3Engine provides a default camera at:

{
  "position": { "x": 0, "y": 5, "z": 10 },
  "rotation": { "x": -0.4, "y": 0, "z": 0 }
}

This camera looks down at the origin (0, 0, 0) from an angle.

Positioning Your Camera

The camera determines what players see. Position it based on your game type:

Third-Person View:

Behind and above the player character

Example: position: {x: 0, y: 3, z: 8}

First-Person View:

At the player character’s eye level

Example: position: {x: 0, y: 1.6, z: 0}

Top-Down View:

Directly above the play area, looking down

Example: position: {x: 0, y: 15, z: 0}, rotation: {x: -1.57, y: 0, z: 0}

Isometric View:

At a 45° angle from above

Example: position: {x: 10, y: 10, z: 10}, pointing at origin

Multiple Cameras

You can add multiple cameras and switch between them:

Add a Camera from the Asset Library

Position each camera for different views

Use visual scripting to switch the active camera during gameplay

Name your cameras clearly: Camera_MainView, Camera_Closeup, Camera_Cinematic

Scene Composition Tips

Rule of Thirds

Place important objects at the intersection points of a 3x3 grid for balanced composition.

Leading Lines

Use walls, paths, or platforms to guide the player’s eye toward objectives.

Depth and Layers

Create depth by placing objects at varying distances from the camera. Use foreground, midground, and background elements.

Color Contrast

Use contrasting colors to make important objects (like collectibles) stand out from the environment.

Performance Optimization

Object Count

Keep total object count under 200 for smooth performance. Use fewer, larger objects rather than many small ones.

Light Count

Limit active lights to 3-5. Too many lights drastically reduce frame rate. Use Ambient Light + 1-2 Directional/Point Lights.

Transparent Materials

Use transparency sparingly (max 2-3 objects). Transparent materials are expensive to render.

Scale Appropriately

Use appropriate scale values. Extremely large or small scales can cause rendering issues.

Example Scene Setup

Here’s a complete platformer scene configuration:

{
  "version": 1,
  "objects": [
    {
      "name": "Ground",
      "type": "plane",
      "position": { "x": 0, "y": 0, "z": 0 },
      "scale": { "x": 20, "y": 20, "z": 1 },
      "material": { "color": "#2a2a3e", "roughness": 0.8 }
    },
    {
      "name": "Platform_Main",
      "type": "box",
      "position": { "x": 0, "y": 0.2, "z": 0 },
      "scale": { "x": 8, "y": 0.4, "z": 4 },
      "material": { "color": "#4a4a5e", "roughness": 0.5 }
    },
    {
      "name": "Platform_Jump",
      "type": "box",
      "position": { "x": 5, "y": 2, "z": 0 },
      "scale": { "x": 3, "y": 0.4, "z": 3 },
      "material": { "color": "#6366f1", "roughness": 0.3 }
    },
    {
      "name": "KeyLight",
      "type": "directionalLight",
      "position": { "x": 5, "y": 8, "z": 5 },
      "lightIntensity": 1.2
    },
    {
      "name": "Ambient",
      "type": "ambientLight",
      "lightIntensity": 0.5
    }
  ]
}

Next Steps

Adding Interactivity - Make your scene interactive
2D Game Creation - Try the 2D editor
Publishing Games - Share your 3D world

Get Started

Core Features

Guides

Web3

3D Scene Setup

3D Scene Setup

Scene Architecture Best Practices

Advanced Lighting

Material Design

Camera Setup

Scene Composition Tips

Rule of Thirds

Leading Lines

Depth and Layers

Color Contrast

Performance Optimization

Example Scene Setup

Next Steps

Build docs developers (and LLMs) love

Get Started

Core Features

Guides

Web3

​3D Scene Setup

​Scene Architecture Best Practices

​Advanced Lighting

​Material Design

​Camera Setup

​Scene Composition Tips

Rule of Thirds

Leading Lines

Depth and Layers

Color Contrast

​Performance Optimization

​Example Scene Setup

​Next Steps

Build docs developers (and LLMs) love

3D Scene Setup

Scene Architecture Best Practices

Advanced Lighting

Material Design

Camera Setup

Scene Composition Tips

Performance Optimization

Example Scene Setup

Next Steps