Home▸Rendering & Computer Graphics▸Film Cinematography: 2D Viewfinder and Floor Plan

🎬 Film Cinematography: 2D Viewfinder and Floor Plan

Interactive 2D film-set simulator: a live viewfinder with thin-lens depth of field, exposure triangle, colour temperature and motion blur, beside a draggable floor plan of the camera, three-point lighting, actor and set with the depth-of-field zone shaded in green.

Rendering & Computer Graphics2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

Details

CategoryRendering & Computer Graphics

RenderingCanvas 2D

DifficultyModerate

Target FPS60

ControlsSliders for focal length, aperture, focus distance, ISO, shutter angle, ND filter, white balance, camera height, frame pan/tilt and light power and colour temperature; aspect ratio, camera-move and look presets, rack focus; drag the camera, lamps, actor, columns and focus diamond on the plan; drag the viewfinder to re-frame and tap it to focus.

cinematographydepth of fieldexposure trianglecolour temperaturethree-point lightingfocal lengthfilm

Related simulations

Path TracingProgressive WebGL2 path tracer rendering a Cornell box scene. Each frame accumulates one…

Procedural TexturesGLSL fragment shader procedural textures: marble, wood rings, clouds, fire, Voronoi cells…

Ray Marching & SDFInteractive ray marching renderer using signed distance fields. Sphere-trace SDFs to render… ⊞ All 158 in Rendering & Computer Graphics →

⚙ Under the hood

cinematographydepth of fieldexposure trianglecolour temperaturethree-point lightingfocal lengthfilm

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install