Testing & Performance

Performance is critical for creating smooth, responsive generative artwork. This guide covers target performance metrics, testing strategies, and optimization techniques.

Performance Targets

Minimum FPS

50 FPS on Snapdragon 8 Gen 2 devices

Target Resolution

2160×2160 pixels (4K square) at 60 FPS

Downscaling Options

If your artwork cannot achieve 60 FPS at full resolution, consider these downscaling options:

1440×1440

44% reduction in pixel count

1080×1080

75% reduction in pixel count

Downscaling allows you to optimize for performance while maintaining visual quality. The final artwork will be upscaled back to the target resolution.

FPS Overlay

Enable the FPS overlay during development to monitor real-time performance:

window.LAYER = {
  features: {
    showFPS: true
  }
};

The overlay displays current FPS, average FPS, and memory usage to help you identify performance bottlenecks.

Board Server

Use the mainboard server for testing and previewing your artwork in a production-like environment: https://mainboard-live.layer.art/

Upload and test your artwork

Monitor performance metrics

Preview with different parameter values

Validate artwork compatibility

Local Development with Cloudflare Tunnel

To test locally-hosted artwork on remote devices or in production-like environments, use Cloudflare Tunnel:

# Install Cloudflare Tunnel
npm install -g @cloudflare/wrangler

# Start tunnel to your local server
cloudflare tunnel --url http://localhost:3000

This generates a public URL that exposes your local server, allowing you to access and test your artwork from any device.

Optimization Tips

Profile your code

Use browser DevTools to identify performance bottlenecks

Minimize DOM manipulation

Use canvas or WebGL for rendering instead of DOM

Optimize shaders

Keep shader code lean and avoid expensive operations

Batch rendering

Combine multiple draw calls into single operations

Use texture atlases

Reduce texture binding overhead

Implement LOD

Use Level of Detail techniques for complex geometry

Monitor memory

Avoid memory leaks and excessive allocations

Deployment Checklist

Before deploying your artwork, ensure:

Achieves minimum 50 FPS on target hardware

Maintains idempotent rendering with consistent parameters

All parameters produce meaningful visual variations

Artwork loops smoothly (if applicable)

No console errors or warnings

Verified on production server