Performance Optimization Guide

Performance Optimization Guide

BeadMod includes advanced performance optimization features that ensure smooth 3D rendering, even with complex designs. This guide explains how to use these features for the best experience.

🎯 What is Performance Optimization?

When working with 3D graphics, performance is measured by how smoothly your bracelet rotates and updates. Better performance means:

  • Smoother rotation and interaction
  • Faster response to changes
  • Better experience on all devices
  • No lag when adding beads

Target: 60 FPS (Frames Per Second) for silky smooth rendering

📊 Performance Features

BeadMod includes several advanced optimization techniques that work behind the scenes to keep your designs running smoothly.

Accessing Performance Settings

  1. Open the design editor
  2. Look for the right sidebar (Properties panel)
  3. Click the "Performance" tab (third tab with gauge icon)
  4. View real-time performance metrics and controls

🎮 Performance Presets

Quick presets automatically configure all settings for different scenarios:

Ultra ⚡

Best For: High-end computers, showcasing designs
Settings:

  • Instancing: ON
  • Level of Detail: ON
  • Texture Atlas: ON
  • Shadows: ON
  • Anti-aliasing: ON

Performance: Excellent visual quality, may impact lower-end devices
Use When: Creating final renders, screenshots, or videos

High 📊

Best For: Most modern computers, balanced experience
Settings:

  • Instancing: ON
  • Level of Detail: ON
  • Texture Atlas: ON
  • Shadows: ON
  • Anti-aliasing: OFF

Performance: Great quality with better performance
Use When: Regular design work on capable hardware

Best For: Older computers, larger designs, mobile devices
Settings:

  • Instancing: ON
  • Level of Detail: ON
  • Texture Atlas: ON
  • Shadows: OFF
  • Anti-aliasing: OFF

Performance: Good quality with excellent performance
Use When: Working with many beads (50+) or on moderate hardware

Low 🔋

Best For: Maximum performance, very complex designs
Settings:

  • Instancing: ON
  • Level of Detail: ON
  • Texture Atlas: OFF
  • Shadows: OFF
  • Anti-aliasing: OFF

Performance: Fastest, prioritizes smoothness over visuals
Use When: Designs with 100+ beads or experiencing lag


🔧 Advanced Settings

For users who want fine-grained control, each optimization can be toggled individually:

Instancing

What it does: Groups similar beads together to reduce GPU workload

Technical: Instead of drawing each bead separately, identical beads (same model, material, and color) are drawn in a single "batch."

Impact:

  • ✅ Dramatically reduces draw calls (up to 95%)
  • ✅ Significant performance boost with repeated beads
  • ⚠️ Minimal impact on visual quality

When to Enable:

  • Always recommended
  • Especially helpful with spacer beads (many identical)
  • Critical for designs with 50+ beads

When to Disable:

  • Troubleshooting rendering issues (rare)
  • Never needed to disable in normal use

Level of Detail (LOD)

What it does: Uses simpler 3D models for distant beads

Technical: Beads far from camera are rendered with fewer triangles (polygons). As you zoom in, quality increases automatically.

LOD Levels:

  • High Detail (close): 32×32 segments = 2,048 triangles
  • Medium Detail (mid-range): 16×16 segments = 512 triangles
  • Low Detail (far): 8×8 segments = 128 triangles

Impact:

  • ✅ Reduces total triangles by up to 90%
  • ✅ Huge boost when viewing full bracelet
  • ✅ No visual difference - happens automatically

When to Enable:

  • Always recommended
  • Essential for bracelets with many beads
  • Automatic and intelligent

When to Disable:

  • You need maximum quality at all distances (rare)
  • Troubleshooting visual issues

Texture Atlas

What it does: Combines multiple textures into one large texture

Technical: Instead of loading 50 separate texture images, they're combined into a single 2048×2048 "atlas." The GPU switches textures less frequently.

Specifications:

  • Atlas size: 2048×2048 pixels
  • Cell size: 256×256 pixels
  • Capacity: Up to 64 textures per atlas

Impact:

  • ✅ Reduces texture switches
  • ✅ Lower memory usage
  • ✅ Better performance with varied designs

When to Enable:

  • Recommended for most designs
  • Very helpful with many different textures
  • Automatic texture packing

When to Disable:

  • Simpler designs (under 10 beads)
  • Memory-constrained devices
  • Very high-resolution textures

Shadows

What it does: Real-time shadow casting from beads

Technical: Creates dynamic shadows that update as you rotate the bracelet. Computationally expensive as it requires additional rendering passes.

Impact:

  • ⚠️ High performance cost (20-40% FPS reduction)
  • ✅ Significantly improves visual quality
  • ✅ Adds depth and realism
  • 🎨 Better for screenshots/videos

When to Enable:

  • Taking final screenshots
  • Recording videos
  • Presenting to clients
  • You have performance headroom

When to Disable:

  • Experiencing lag or low FPS
  • Working on design (not needed for editing)
  • Mobile devices
  • Large, complex designs

Anti-aliasing

What it does: Smooths jagged edges on bead outlines

Technical: Renders at higher resolution and downsamples, or uses multi-sampling to eliminate "jaggies" on curved edges.

Impact:

  • ⚠️ Moderate performance cost (10-20% FPS reduction)
  • ✅ Smoother, more polished appearance
  • ✅ Professional look for final renders
  • 📝 Cannot be changed after starting (requires refresh)

When to Enable:

  • Final presentation
  • Screenshots and videos
  • High-end hardware

When to Disable:

  • Moderate to low-end devices
  • Large designs (50+ beads)
  • Performance is more important than visuals

📈 Performance Statistics

Click "Show Stats" to display real-time performance metrics:

What the Stats Mean

FPS (Frames Per Second)

Current framerate: Higher is better

  • 60+ FPSExcellent - Silky smooth
  • 45-59 FPS 🔵 Good - Smooth and responsive
  • 30-44 FPS ⚠️ Fair - Acceptable, some stutter
  • Below 30 FPSPoor - Consider optimizing

Frame Time

Time to render one frame: Lower is better

  • Under 16ms = 60+ FPS
  • 16-20ms = 50-60 FPS
  • 20-33ms = 30-50 FPS
  • Over 33ms = Below 30 FPS

Draw Calls

Number of GPU drawing operations per frame

  • Low (1-50): Excellent - instancing working well
  • Medium (50-200): Good - room for optimization
  • High (200+): Could be better - enable instancing

Impact of Instancing:

  • Without: 100 beads = 100 draw calls
  • With: 100 beads (50 unique) = 50 draw calls
  • 50% reduction!

Triangles

Total polygons being rendered

  • Low (under 10K): Very efficient
  • Medium (10K-50K): Normal for detailed designs
  • High (50K-200K): Consider enabling LOD
  • Very High (200K+): LOD system highly recommended

Impact of LOD:

  • Without: All beads at high detail
  • With: Only close beads at high detail
  • Can reduce triangles by 70-90%

Memory Usage

GPU memory used by textures and geometry

  • Geometries: 3D model data
  • Textures: Image/texture data
  • Higher with more unique beads

Normal Range:

  • Small designs: 10-50 MB
  • Medium designs: 50-200 MB
  • Large designs: 200-500 MB

🎓 Optimization Strategies

For Different Design Sizes

Small Designs (Under 20 Beads)

Recommended Preset: Ultra or High

  • All features can be enabled
  • Focus on visual quality
  • Performance won't be an issue

Medium Designs (20-50 Beads)

Recommended Preset: High or Medium

  • Enable instancing and LOD
  • Shadows optional (try it!)
  • Should run smoothly

Large Designs (50-100 Beads)

Recommended Preset: Medium or Low

  • Instancing and LOD essential
  • Disable shadows for editing
  • Enable shadows for final renders

Very Large Designs (100+ Beads)

Recommended Preset: Low

  • All optimizations enabled
  • Disable shadows and anti-aliasing
  • Consider simplifying design

For Different Hardware

High-End Desktop (Gaming PC, Modern MacBook Pro)

  • Use Ultra or High preset
  • Enable all features
  • Enjoy maximum quality

Mid-Range Laptop/Desktop (3-5 years old)

  • Use High or Medium preset
  • May need to disable shadows
  • Still get great quality

Older Laptop (5+ years old)

  • Use Medium or Low preset
  • Disable shadows and anti-aliasing
  • Focus on smooth interaction

Tablet/Mobile (If supported)

  • Use Low preset
  • All optimizations enabled
  • Minimal visual features

Workflow Optimization

During Design Phase

  1. Use Medium or Low preset
  2. Disable shadows
  3. Focus on smooth editing
  4. Quick iterations

Before Capturing

  1. Switch to High or Ultra preset
  2. Enable shadows
  3. Perfect the lighting
  4. Take screenshot/video

For Presentations

  1. Ultra preset
  2. All features enabled
  3. Best possible quality
  4. Performance less critical

🔍 Troubleshooting Performance

"FPS is below 30"

Solutions:

  1. Switch to a lower preset (High → Medium → Low)
  2. Disable shadows first (biggest impact)
  3. Ensure instancing and LOD are enabled
  4. Close other programs using GPU
  5. Reduce design complexity if possible

"Bracelet is laggy when rotating"

Solutions:

  1. Check FPS - should be 45+
  2. Reduce triangle count (enable LOD)
  3. Disable anti-aliasing (requires refresh)
  4. Use Medium or Low preset

"Beads look blocky when zoomed out"

This is normal! LOD system is working - beads far away use fewer polygons. Zoom in and they'll become detailed again.

If it bothers you:

  • You can disable LOD
  • Expect lower FPS
  • Only recommended on high-end hardware

"Too many draw calls"

Solution: Enable instancing! This is the #1 performance improvement.

"Memory usage is high"

Solutions:

  1. Enable texture atlas
  2. Reduce number of unique textures
  3. Use simpler materials
  4. Restart browser if memory persists

🎨 Quality vs Performance Trade-offs

Understanding what you're giving up:

Disabling Shadows

  • Lose: Depth, 3D feeling, realism
  • Gain: 20-40% better FPS
  • Worth It?: Yes, during editing; No for final renders

Disabling Anti-aliasing

  • Lose: Smooth edges, polish
  • Gain: 10-20% better FPS
  • Worth It?: Depends on hardware

Disabling LOD

  • Lose: Performance with many beads
  • Gain: Maximum detail at all distances
  • Worth It?: Rarely - LOD is very smart

Disabling Instancing

  • Lose: Huge performance
  • Gain: Nothing really
  • Worth It?: Never - always keep this on

💡 Pro Tips

1. Use Presets Intelligently

Don't manually configure unless you know what you're doing. Presets are well-balanced.

2. Toggle for Different Tasks

  • Editing: Medium preset
  • Final screenshot: Ultra preset
  • Video recording: High or Ultra

3. Monitor Stats

Keep stats visible when optimizing. See immediate impact of changes.

4. Update in Real-Time

All changes apply instantly - no need to refresh or reload.

5. Start High, Go Lower

Begin with High preset. Only reduce if you experience issues.

6. Shadows Last

When optimizing, disable shadows first - biggest single improvement.

7. Hardware Matters

Know your device capabilities. Don't fight hardware limitations.


🚀 Coming Soon

Future performance features:

  • Automatic preset selection based on hardware
  • Per-bead LOD configuration
  • Custom shadow quality settings
  • Rendering performance profiles
  • Mobile-specific optimizations
  • WebGPU support for better performance

📚 Technical Background (For Nerds 🤓)

How Instancing Works

Uses THREE.InstancedMesh to draw multiple copies of the same geometry with a single draw call. Each instance has its own transformation matrix (position, rotation, scale).

LOD Implementation

Three distance thresholds (0, 15, 30 units from camera). Generates sphere geometries with varying segment counts (32, 16, 8). Updates based on camera distance each frame.

Texture Atlas Packing

Uses 2D bin packing algorithm to arrange textures in atlas. Remaps UV coordinates to reference correct atlas region. Reduces texture state changes in WebGL.

Performance Monitoring

Hooks into Three.js render loop. Reads renderer.info for draw calls, triangles, memory. Calculates FPS from frame deltas. Updates every 100ms.


Need More Help?

Check out our other guides:


Optimize for smoothness! ⚡🎨