OBB 3D Visualizer

OBB 3D Visualizer

Visualize OBB (Oriented Bounding Box) shapes in real-time 3D to understand how they work before using them in attacks.

Interactive Visualizer

Open OBB Visualizer (Full Screen) →

The OBB Visualizer provides a 3D WebGL preview of Oriented Bounding Box shapes and positioning for designing attack hitboxes.

How to Use

Shape Selection

Choose from 6 OBB shapes:

1. SPHERE - Ball-shaped, perfect for explosions
2. CONE - Cone pointing forward, for breath attacks
3. CYLINDER - Cylinder along forward axis, for lightning/beams
4. ARC - 180° arc in front, for claw swipes
5. BOX - Rectangular box, for ground pounds
6. CAPSULE - Cylinder with rounded ends, for dash attacks

Positioning Modes

• IN_FRONT - Places OBB in front of titan at specified distance
  • Adjustable distance slider appears
  • OBB follows titan rotation
• AT_TARGET - Centers OBB on the target (cyan sphere)
  • Good for targeted explosions
• AT_USER - Centers OBB on the titan itself
  • Perfect for self-centered AOE

Half-Extents

Control OBB size with three sliders:

• X-axis - Width/radius depending on shape
• Y-axis - Height/length depending on shape
• Z-axis - Depth (BOX only)

Shape-Specific Usage:

• SPHERE: Only X matters (radius)
• CONE: X = base radius, Y = length forward
• CYLINDER: X = radius, Y = half-length forward
• ARC: X = radius, Y = half-height up/down
• BOX: X = width, Y = height, Z = depth
• CAPSULE: X = radius, Y = half-length + hemisphere

Rotation Controls

Adjust titan rotation to see how OBB follows:

• Yaw (Y-axis): -180° to 180° (horizontal rotation)
• Pitch (X-axis): -90° to 90° (vertical look)

Include Pitch Checkbox:

• ✅ Checked: OBB rotates with both yaw and pitch
• ❌ Unchecked: OBB only rotates horizontally

Camera Controls

• Left-click drag: Rotate camera around scene
• Right-click drag: Pan camera
• Scroll wheel: Zoom in/out

Export Config

Click “Copy JSON Config” to get the complete define_obb keyframe:

{
  "type": "define_obb",
  "name": "custom_obb",
  "shape": "SPHERE",
  "positioning": "IN_FRONT",
  "distance": "3.0",
  "halfExtents": {
    "x": "5.0",
    "y": "5.0",
    "z": "5.0"
  },
  "includePitch": true
}

Paste directly into your ActionEffect timeline!

Common Patterns

Flamethrower (CONE)

1. Shape: CONE
2. Positioning: IN_FRONT
3. Distance: 2.0-3.0
4. Half-Extents:
   • X: 1.5-2.5 (base width)
   • Y: 6.0-8.0 (length)
5. Include Pitch: ✅ Yes

Lightning Bolt (CYLINDER)

1. Shape: CYLINDER
2. Positioning: IN_FRONT or AT_TARGET
3. Distance: 5.0-8.0
4. Half-Extents:
   • X: 1.0-1.5 (thickness)
   • Y: 10.0-15.0 (length)
5. Include Pitch: ✅ Yes

Explosion (SPHERE)

1. Shape: SPHERE
2. Positioning: AT_USER or AT_TARGET
3. Half-Extents:
   • X: 8.0-12.0 (radius)
4. Include Pitch: ❌ No (doesn’t matter for spheres)

Claw Swipe (ARC)

1. Shape: ARC
2. Positioning: IN_FRONT
3. Distance: 1.0-2.0
4. Half-Extents:
   • X: 4.0-6.0 (reach)
   • Y: 2.0-3.0 (vertical range)
5. Include Pitch: ❌ No (keep horizontal)

Ground Pound (BOX)

1. Shape: BOX
2. Positioning: AT_USER or IN_FRONT
3. Distance: 1.0-3.0
4. Half-Extents:
   • X: 5.0-8.0 (width)
   • Y: 2.0-3.0 (height)
   • Z: 5.0-8.0 (depth)
5. Include Pitch: ❌ No

Charge Attack (CAPSULE)

1. Shape: CAPSULE
2. Positioning: IN_FRONT
3. Distance: 3.0-5.0
4. Half-Extents:
   • X: 1.5-2.0 (thickness)
   • Y: 6.0-10.0 (length)
5. Include Pitch: ✅ Yes

Tips & Tricks

Size Guidelines

Close-Range Attacks (3-5 blocks):

• Radius/width: 2-4
• Length: 3-6

Medium-Range Attacks (5-8 blocks):

• Radius/width: 3-6
• Length: 6-10

Long-Range Attacks (8-12 blocks):

• Radius/width: 4-8
• Length: 10-15

Ultimate Attacks (12+ blocks):

• Radius/width: 8-15
• Length: 12-20

Testing Strategy

1. Start small: Begin with conservative sizes
2. Test in-game: Spawn titan and test attack
3. Adjust: Use visualizer to tweak sizes
4. Iterate: Repeat until perfect

Performance Considerations

Larger OBBs = more entities checked:

• Keep ultimates rare (high cooldown, low weight)
• Use appropriate sizes (don’t make everything huge)
• Consider telegraph duration (larger = longer warning)

Visual Feedback

Match OBB size to telegraph markers:

• Players see telegraph before damage
• OBB should match what players expect
• Larger OBB = longer telegraph duration

Understanding the Visualizer

Scene Elements

• Red Cube: The titan (2×3×2 blocks)
• Cyan Sphere: The target
• Yellow Shape: The OBB hitbox
• Orange Wireframe: OBB outline
• Grid: Ground plane (1 square = 1 block)
• Axes: XYZ coordinate system

Color Meanings

• Yellow (OBB): Damage will apply here
• Orange (Wireframe): OBB boundaries
• Red (Titan): Attack origin
• Cyan (Target): Target position

Rotation Behavior

• Yaw (Y-axis): Horizontal rotation

  • 0° = facing +Z (north)
  • 90° = facing +X (east)
  • -90° = facing -X (west)
  • 180° = facing -Z (south)

• Pitch (X-axis): Vertical look

  • 0° = looking straight ahead
  • +45° = looking up
  • -45° = looking down

Troubleshooting

OBB Not Visible

• Check if OBB is very small (increase half-extents)
• Ensure positioning mode is correct
• Try rotating camera to different angle
• Check if OBB is behind titan

OBB Wrong Position

• IN_FRONT: Check distance value
• AT_TARGET: OBB should be on cyan sphere
• AT_USER: OBB should be on red cube

Shape Looks Wrong

• Different shapes use half-extents differently
• Check “Shape Guide” in controls panel
• SPHERE only uses X value
• CONE/CYLINDER point along Z-axis

Can’t Rotate View

• Left-click and drag (not right-click)
• Try scrolling to zoom first
• Refresh page if controls stuck

Next Steps

• OBB System Docs → - Complete OBB documentation
• ActionEffect Builder → - Build full attack timeline
• Creating Custom Moves → - Complete workflow

---

Perfect your hitboxes visually! 📦✨