Static Ray Tracer (Wireframe Editor + Progressive Render)

Plain JavaScript

Place shapes with the mouse in a simple top-down wireframe editor, then ray-trace in progressive stages up to HD. No ads. No libraries. Download as PNG.

Editor & Scene

Static scenes  •  progressive render
How it works
• Editor is top-down: X left↔right, Z up↔down.
• For height (Y): use the selected-shape controls below (spheres included).
• Sphere: drag to set radius. Box: drag footprint; height via slider.

Shapes

Selected shape

—
—
1.00

Render

Advanced: stage settings
Advanced: export/import scene JSON

Output

Idle.
—

FAQ

What is this tool for?
This tool is for creating static ray-traced scenes: you place a handful of simple shapes, adjust materials and lighting, then render a single image. It’s intentionally not a real-time 3D engine or an animation tool.
What is ray tracing?
Ray tracing simulates light by tracing “rays” from the camera into the scene. When a ray hits a surface, the renderer calculates lighting (and optionally reflections / transparency) to decide that pixel’s colour.
Raster vs ray tracing — what’s the difference?
Raster rendering draws shapes directly to the screen. Ray tracing simulates light interactions, so shadows, reflections and highlights fall out naturally — but it usually needs far more computation per pixel.
A very brief history of ray tracing
Ray tracing began as academic research and became popular for offline “final render” images in the 1980s–1990s. Early home-computer ray tracers could take minutes or hours per frame at low resolutions. Modern CPUs make interactive previews feasible, even in a web browser, especially with progressive rendering.
Glossary of terms
  • Albedo: the base surface colour.
  • Specular: strength of shiny highlights.
  • Shininess: how tight/sharp those highlights are.
  • Reflectivity: how much the surface reflects its surroundings.
  • Opacity: 1 is solid; lower values allow the ray to continue through (simple transparency, not refraction).
  • Shadow ray: a ray shot toward a light to see if it’s blocked.
  • Bounce: an extra ray created by reflection (limited by max bounces).

Tip: For HD, use Progressive Render. If Stage 3 is slow, reduce samples, bounces, or transparency depth.