Description

This is an interactive tool for understanding how the camera works. You can change some conditions and see how camera effects change by viewing rays path and image on virtual 1D image sensor.

Usage

You can change following conditions.

• On canvas (by mouse)
• Light source position
• Aperture
• Lens position (x-axis)
• Lens thickness
• Lens size (diameter)
• Sensor size
• Out of canvas
• See "Options"

And you can enable/disable some options.

List of common questions about cameras that this tool may help you to understand

• Q. What is the bokeh (blur effect)?
• A. A not focused circle-shape image. See how focus works by changing lens position.
• Q. How the aperture effects to the bokeh?
• A. Puts multiple light sources with difference distances and see how the size of image changes on virtual image sensor by changing aperture value.
• Q. Why the angle of view changes between different size of image sensors?
• A. See how the image on virtual sensor by changing the sensor size.

Notice

• Theoretical correctness is not guaranteed.
• Assume that the camera lens is singe symmetric spherical convex lens. (The real camera lens is composed from multiple types of lenses.)
• The rays inside the lens are not visualized correctly. The rays are refracted at the center plane of the lens.
• The visual may differ depending on the browser.
• Enabling GPU acceleration is highly recommended.

Features

• Mouse interactive
• Real-time rendering
• Single HTML app (Internet access is needed)

Used technologies

• HTML / Javascript
• Vue.js 3
• Canvas API

Source codes (GitHub) Any suggestions and issues are welcome.

Future works

• Support shutter
• More detail emulation for lens refraction
• Support composite lenses

References

• Lens - Wikipedia

Contacts

• GitHub (This project)
• GitHub (Profile page)
• Twitter