Skip to main content

3D Projection & Perspective

Transform flat layers into 3D-looking elements with HyperTheme's advanced projection system. Create perspective effects, simulate depth, and add that extra dimension to your themes - all without actual 3D modeling.

What is 3D Projection?​

3D Projection lets you:

  • Distort layers to simulate 3D perspective
  • Create vanishing point effects
  • Make flat images look like they're in 3D space
  • Add depth and dimension to your themes

What it's NOT:

  • Not true 3D modeling
  • Can't rotate objects in full 3D space
  • No lighting or shadows
  • It's a 2D transformation that LOOKS 3D

Think of it as: Stretching a photo across a 3D surface - it bends and distorts but remains 2D.

When to Use 3D Projection​

Perfect For​

✅ Perspective text

  • Titles that recede into distance
  • Star Wars-style opening crawls
  • Text on angled surfaces

✅ Simulated 3D panels

  • Rotating cards or boxes
  • Tilted screens or monitors
  • Angled UI elements

✅ Depth effects

  • Floor reflections
  • Objects on angled planes
  • Background elements with perspective

✅ Stylized effects

  • Artistic distortions
  • Dramatic compositions
  • Comic book style angles

Not Ideal For​

❌ Realistic 3D objects - Use actual 3D software ❌ Complex 3D scenes - Too limited ❌ Subtle effects - Can look weird if not obvious ❌ Small text - Becomes hard to read when distorted

Understanding the System​

The Four Corner Points​

Every layer has four corners. 3D projection lets you move each corner independently to create perspective distortion.

LT ─────────── RT    LT = Left Top
│              │     RT = Right Top
│              │     LB = Left Bottom
│              │     RB = Right Bottom
LB ─────────── RB

Move these corners and magic happens!

Enabling 3D Projection​

Step-by-Step​

  1. Select a layer on your canvas
  2. Look at Properties (right panel)
  3. Find "Projection Points" or "3D Transform" section
  4. Enable it (checkbox or toggle)

You'll see:

  • Four red handles appear at corners
  • Each handle can be dragged
  • Layer distorts in real-time
  • Preview updates instantly

Using Corner Handles​

Interactive Dragging​

On the canvas:

  • Four red circular handles appear at corners
  • Drag any handle to move that corner
  • Layer distorts as you drag
  • Release to set position

Tips:

  • Start with ONE corner
  • Drag slowly to see effect
  • Undo (Ctrl+Z) if it looks wrong
  • Small movements = subtle effects
  • Big movements = dramatic effects

Precise Control via Properties​

In the Properties panel:

Each corner has X and Y values (range: -1000 to 1000):

Left Top:     X: [-1000 to 1000]  Y: [-1000 to 1000]
Right Top:    X: [-1000 to 1000]  Y: [-1000 to 1000]
Left Bottom:  X: [-1000 to 1000]  Y: [-1000 to 1000]
Right Bottom: X: [-1000 to 1000]  Y: [-1000 to 1000]

Default (no distortion):

Left Top:     X: 0,    Y: 0
Right Top:    X: 0,    Y: 0
Left Bottom:  X: 0,    Y: 0
Right Bottom: X: 0,    Y: 0

Type exact values for:

  • Symmetrical distortions
  • Matching perspectives across layers
  • Saving/reusing settings

Common 3D Effects​

Tilted Back (Receding into Distance)​

Like text crawling into space (Star Wars style):

Setup:

Left Top:     X: -100,  Y: 0
Right Top:    X: 100,   Y: 0
Left Bottom:  X: 0,     Y: 0
Right Bottom: X: 0,     Y: 0

Effect: Top edge narrower than bottom - appears to tilt away from you.

Tilted Forward (Coming Toward You)​

Opposite effect:

Setup:

Left Top:     X: 0,     Y: 0
Right Top:    X: 0,     Y: 0
Left Bottom:  X: -100,  Y: 0
Right Bottom: X: 100,   Y: 0

Effect: Bottom edge wider - appears to lean toward you.

Rotated Card (Left-Side View)​

Like viewing a card from the left:

Setup:

Left Top:     X: 50,    Y: 0
Right Top:    X: 0,     Y: 0
Left Bottom:  X: 50,    Y: 0
Right Bottom: X: 0,     Y: 0

Effect: Right edge normal, left edge compressed - simulates rotation.

Rotated Card (Right-Side View)​

Opposite rotation:

Setup:

Left Top:     X: 0,     Y: 0
Right Top:    X: -50,   Y: 0
Left Bottom:  X: 0,     Y: 0
Right Bottom: X: -50,   Y: 0

Effect: Left edge normal, right edge compressed.

Floor Reflection​

Simulate object reflected on floor:

Setup:

Left Top:     X: 0,     Y: 0
Right Top:    X: 0,     Y: 0
Left Bottom:  X: 100,   Y: 50
Right Bottom: X: -100,  Y: 50

Effect: Bottom spreads wider and downward - perspective of ground reflection.

Vanishing Point (Two-Point Perspective)​

Both edges converge to center:

Setup:

Left Top:     X: -150,  Y: -50
Right Top:    X: 150,   Y: -50
Left Bottom:  X: -50,   Y: 50
Right Bottom: X: 50,    Y: 50

Effect: Top wider, bottom narrower - strong perspective effect.

Building Complex Scenes​

Multiple Layers with Matching Perspective​

For consistent 3D scene:

  1. Establish vanishing point

    • Pick center point on canvas
    • All layers converge toward this point

  2. Apply similar distortions

    • Closer objects: Less distortion
    • Farther objects: More distortion
    • All point to same vanishing point

  3. Layer order matters

    • Front objects on top layers
    • Back objects on bottom layers
    • Creates depth illusion

Example: Hallway scene

Background wall (back):   Heavy distortion, converges strongly
Middle wall (mid):        Medium distortion
Foreground elements (front): Light distortion

All converge to same center point = convincing depth

Text on Angled Surface​

Create text that looks like it's on a tilted screen:

  1. Add text layer
  2. Enable projection
  3. Match perspective to surface
    • If surface tilts back, tilt text back same amount
    • Use same X values for consistency
  4. Position over surface
    • Now text appears "painted" on surface

Animated 3D Effects​

Combine projection with animations:

Rotating card:

  1. Set initial projection (card facing left)
  2. Add animation to projection points
  3. Animate to opposite projection (card facing right)
  4. Result: Card appears to flip!

Approaching object:

  1. Start: Heavy perspective distortion (far away)
  2. Animate: Reduce distortion over time
  3. End: No distortion (right in front of you)
  4. Add scale animation for extra effect

Technical Details​

How It Works​

Uses pixi-projection library:

  • Creates quad mesh from your layer
  • Applies 2D projection transformation
  • Simulates 3D using 2D math
  • Real-time rendering

Limitations:

  • Texture might look stretched at extreme angles
  • No automatic anti-aliasing on edges
  • Performance impact with many projected layers
  • Can't truly rotate in Z-axis (depth)

Performance Considerations​

Impact:

  • Moderate performance cost per layer
  • GPU handles the transformation
  • More complex than flat layers
  • Usually fine for 1-5 projected layers

Optimization tips:

  • Don't project every layer unnecessarily
  • Use smaller images when possible
  • Disable projection when not needed
  • Test on target hardware

Image Quality​

Best practices for quality:

✅ Use high-resolution source images

  • Distortion stretches pixels
  • Higher res = better quality when stretched

✅ Avoid extreme distortions

  • Subtle effects look better
  • Extreme angles = visible pixelation

✅ Test at actual display size

  • What looks good zoomed in might not at normal scale

✅ Clean edges important

  • Anti-aliased edges help
  • Sharp corners might alias

Troubleshooting​

"Layer looks weird/distorted"​

Possible causes:

  1. Accidental projection

    • Check if projection is enabled
    • Reset all corners to 0,0

  2. Extreme values

    • Values beyond ±200 often too much
    • Try smaller adjustments

  3. Wrong aspect ratio

    • Source image stretched
    • Check layer's base scale first

Fix:

  • Reset projection to defaults
  • Start over with smaller movements
  • Check base layer properties

"Can't see the red handles"​

Possible causes:

  1. Projection not enabled

    • Enable in Properties panel first

  2. Layer not selected

    • Click layer to select it

  3. Handles off-screen

    • Zoom out to see full layer
    • Handles might be far from layer edges

Fix:

  • Ensure layer is selected
  • Check projection is enabled
  • Zoom canvas to fit layer

"Effect isn't strong enough"​

Solutions:

  • Increase corner offset values
  • Move corners farther from defaults
  • Try values in ±100 to ±300 range
  • Combine with scale for more impact

"Effect is TOO strong"​

Solutions:

  • Reduce corner offset values
  • Move corners closer to defaults
  • Try values in ±20 to ±50 range
  • Remember: Subtlety often better

"Animation looks jerky"​

Causes:

  • Too many projected layers
  • Projection + heavy filters
  • Slow hardware

Optimizations:

  • Reduce projected layer count
  • Lower animation framerate
  • Simplify other effects
  • Test on target device

Creative Ideas​

Retro CRT Screen Effect​

Simulate curved CRT monitor:

  • Bulge corners outward slightly
  • Add scanline filter
  • Slight blue tint
  • = Authentic retro look

Comic Book Panel​

Dynamic comic-style angle:

  • Rotate corners to dramatic angle
  • Add outline filter
  • Bold colors
  • = Dynamic comic effect

Hologram Display​

Futuristic holographic effect:

  • Tilt perspective upward
  • Blue/cyan tint
  • Add transparency
  • Slight scan lines
  • = Sci-fi hologram

Opening Crawl​

Star Wars-style text scroll:

  • Dramatic back-tilt (top narrower)
  • Scroll animation from bottom
  • Yellow text
  • Black background
  • = Iconic effect

Reflection Effect​

Create mirror/water reflection:

  • Flip layer vertically
  • Apply bottom-spread distortion
  • Reduce opacity (50%)
  • Add blur filter
  • Position below original
  • = Convincing reflection

Best Practices​

Do's​

✅ Start subtle

  • Small adjustments first
  • Build up effect gradually
  • Easy to overdo it

✅ Match perspectives

  • Multiple layers = consistent distortion
  • All point to same vanishing point
  • Creates cohesive scene

✅ Use high-res images

  • Distortion reveals quality issues
  • Better source = better result

✅ Preview at actual size

  • Don't judge while zoomed way in
  • View at final display resolution

✅ Combine with other effects

  • Projection + blur = depth of field
  • Projection + tint = mood
  • Projection + animation = dynamics

Don'ts​

❌ Don't use for every layer

  • Reserve for special elements
  • Overuse looks gimmicky
  • Performance cost adds up

❌ Don't extreme distortions on text

  • Text becomes unreadable
  • Use moderate angles only
  • Test legibility

❌ Don't forget to test

  • Looks different at various zoom levels
  • Test on actual display hardware
  • Different resolutions matter

❌ Don't assume it's 3D

  • It's perspective distortion, not 3D
  • Can't light it dynamically
  • Rotations are limited
  • Know the limitations

Learning Path​

Beginner Exercise​

Simple tilt:

  1. Add a text layer saying "TILT ME"
  2. Enable projection
  3. Drag top-right handle outward 50px
  4. Drag top-left handle outward 50px
  5. See how text tilts back

Goal: Understand how corners affect distortion

Intermediate Exercise​

Rotating card:

  1. Add an image layer (logo or icon)
  2. Enable projection
  3. Create "left view" (compress left edge)
  4. Note the X/Y values
  5. Reset to center
  6. Create "right view" (compress right edge)
  7. Animate between these states

Goal: Create animated 3D effect

Advanced Exercise​

Perspective scene:

  1. Create three rectangles (back, mid, front)
  2. Size them progressively larger
  3. Apply projection to all three:
    • Back: Heavy distortion (converges to center)
    • Mid: Medium distortion
    • Front: Light distortion
  4. All converge to same point
  5. Add background behind
  6. Color each differently

Goal: Build cohesive 3D-looking scene

Next Steps​

Pro Tip: Screenshot your successful projection settings! Reuse them across layers for consistent perspective. Build a personal library of "projection presets" for quick application! 📦