Be the camera

Realtime HTML5 Camera Simulator

Fork me on GitHub

Camera:   Scene:

Loading...
Your browser does not support Canvas.
Please install google chrome to view this page.
Download Google Chrome

What is simulated?

The simulation demonstrates the relative noise levels and bokeh size of cameras based on their absolute aperture size.

Noise Levels

The noise level is exaggerated to be more visible in the small window above. The noise is a function of ISO and sensor size, and doesn't account for differences in sensor sensitivity. For some actual camera data taking into account sensor sensitivities see DXO Mark.

Noise Type

The noise here has no processing applied. Real digital cameras will apply noise reduction, which creates a smoother image but with some loss of detail.

Focus Planes

Each scene is composed of one or two planes which can be defocussed (blurred) independently.

Bokeh

Bokeh is the shape of a point of light which is out of focus. In this simulation they are square which makes it fast for a computer to calculate. In a real camera they can be a variety of shapes from circular to polygonal.

Max Aperture

The maximum aperture at a given focal length is linearly interpolated based on the values given at each extreme of the zoom range. In a real camera the relationship isn't linear so the maximum aperture values within the middle of the zoom range may be slightly off.

How is it simulated?

Preparation of each focus plane

Defocussing each focus plane

Technologies used

Everything is calculated using Javascript and rendered onto the HTML5 <canvas> element. I'm sure it would be more efficient to use WebGL, if anyone is interested in trying this I'd love to see it!