-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
196 lines (177 loc) · 7.29 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE HTML>
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=IE9">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>Be The Camera - Open Source Realtime HTML5 Camera Simulator</title>
<meta name="description" content="Learn to use a camera inside the browser. Manipulate camera controls like ISO, Aperture and Shutter Speed and see the results in real time."/>
<meta name="keywords" content="Camera Simulator, HTML5, Canvas, Javascript, Bokeh, Lens, Aperture, ISO, Shutter Speed, F number"/>
<meta name="author" content="Steve Ridout"/>
<link rel="stylesheet" type="text/css" href="./external/jquery-ui/css/ui-darkness/jquery-ui-1.9.0.custom.min.css" />
<link rel="stylesheet" type="text/css" href="./css/site.css?bust=$GIT_COMMIT" />
<script src="./external/require-jquery.js"></script>
<script src="./external/jquery-ui/js/jquery-ui-1.9.0.custom.min.js"></script>
<script>
require.config({
baseUrl: ".",
urlArgs: "bust=$GIT_COMMIT",
});
require(['src/main'], function () {});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1F4SERP8WR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1F4SERP8WR');
</script>
<!-- Chrome frame install -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
</script>
</head>
<body id=simulator>
<header>
<div id=titleContainer>
<h1><a href="{{ site.base_url }}/">Be the camera</a></h1>
<h2>Realtime HTML5 Camera Simulator</h2>
</div>
<a href="https://github.com/SteveRidout/bethecamera"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a>
</header>
<div id=topContainer>
<h2>Camera: <select id="cameraSelector"></select> Scene: <select id="sceneSelector"></select></h2>
</div>
<div id=simulationContainer>
<div id=cameraContainer>
<div id=leftColumn>
<div class="controlPanel">
<table>
<tr>
<td><label>Focus</label></td>
<td>
<label data-focus="fore" title="Foreground">
<input name="focus" type="radio" value="fore" />Foreground
</label>
<label data-focus="back" title="Background">
<input name="focus" type="radio" value="back" />Background
</label>
</td>
</tr>
<tr>
<td><label>Mode</label></td>
<td>
<form>
<label data-mode="A" title="Automatic">
<input name="mode" type="radio" value="A" />A
</label>
<label data-mode="Av" title="Aperture Priority">
<input name="mode" type="radio" value="Av" />Av
</label>
<label data-mode="Tv" title="Shutter Priority">
<input name="mode" type="radio" value="Tv" />Tv
</label>
<label data-mode="M" title="Manual">
<input name="mode" type="radio" value="M" />M
</label>
</form>
</td>
</tr>
</table>
<table>
<tr>
<td width="50%">
<label for="ISOAmount">ISO</label>
<output type="text" id="ISOAmount"></output>
<div id="ISOSlider" class=slider></div>
</td>
</tr>
<tr>
<td>
<label for="apertureAmount">Aperture</label>
<output type="text" id="apertureAmount"></output>
<div id="apertureSlider" class=slider></div>
</td>
</tr>
<tr>
<td>
<label for="shutterAmount">Shutter Speed</label>
<output type="text" id="shutterAmount"></output>
<div id="shutterSlider" class=slider></div>
</td>
</tr>
<tr>
<td>
<label for="exposureAmount">EV</label>
<output type="text" id="exposureAmount"></output>
<div id="exposureSlider" class=slider></div>
</td>
</tr>
</table>
</div>
<div id=simulationError>
</div>
<div id=simulationStatus>
</div>
</div>
<div id=rightColumn>
<div id="display">
<div id="loading">
Loading...
</div>
<canvas id="largeCanvas" width="540" height="360">
Your browser does not support Canvas.
<br />
Please install google chrome to view this page.
<br />
<a href="https://www.google.com/chrome">Download Google Chrome</a>
</canvas>
</div>
</div>
<div id=scene>
<div id=sceneInfo>
</div>
</div>
</div>
</div>
<div id=bottomContent>
<h2>What is simulated?</h2>
The simulation demonstrates the relative <strong>noise levels</strong> and <strong>bokeh size</strong> of cameras based on their absolute aperture size.
<h3>Noise Levels</h3>
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 <a href=http://www.dxomark.com/index.php/Cameras/Camera-Sensor-Ratings/(type)/usecase_sports>DXO Mark</a>.
<h3>Noise Type</h3>
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.
<h3>Focus Planes</h3>
Each scene is composed of one or two planes which can be defocussed (blurred) independently.
<h3>Bokeh</h3>
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.
<h3>Max Aperture</h3>
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.
<h2>How is it simulated?</h2>
<h3>Preparation of each focus plane</h3>
<ul>
<li>Take 3 perfectly sharp, exposure bracketed photos of each focus plane.</li>
<li>Merge these into a High Dynamic Range image using image processing software, e.g. Photoshop.</li>
<li>Cut out the background of the foreground plane.</li>
</ul>
<h3>Defocussing each focus plane</h3>
<ul>
<li>Map image from sRGB values (log scale) to light intensity (linear scale).</li>
<li>Run box-blur algorithm.</li>
<li>Map image back to RGB (log scale) again for rendering to canvas.</li>
</ul>
<h3>Technologies used</h3>
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!
</div>
</div>
<footer id=footerContainer>
<div id=footer>
<ul>
<li>Created by <a href="https://steveridout.com">Steve Ridout</a></li>
<li><a href="https://github.com/SteveRidout/bethecamera">Source Code on GitHub</a></li>
</ul>
</div>
</footer>
</body>
</html>