-
Notifications
You must be signed in to change notification settings - Fork 0
/
editor.html
198 lines (183 loc) · 8.33 KB
/
editor.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
197
198
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="resources/ray-sphere-icon.png" type="image/png" sizes="16x16">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="theme.css">
<title>RT Editor</title>
</head>
<style>
#nav {
z-index: 2;
background: var(--theme-dark2);
}
#editor {
margin: 10px auto;
width: fit-content;
height: fit-content;
max-width: 100vw;
}
#frame {
float: left;
resize: both;
overflow: hidden;
width: fit-content;
height: fit-content;
border: 2px solid var(--theme-darkest);
}
#overlay {
display: block;
padding: 5px;
position: absolute;
z-index: 1;
font-weight: bold;
color: #FFF;
text-shadow:
#000 0 0 2px, #000 0 0 2px,
#000 0 0 2px, #000 0 0 2px,
#000 0 0 2px, #000 0 0 2px,
#000 0 0 2px, #000 0 0 2px;
}
#render {
touch-action: none;
}
#render, #render-options, #scene-options {
float: left;
}
#render-options, #scene-options {
margin: 10px;
/* background: rgba(47, 47, 47, 0.25);*/
}
#render-options span, #scene-options span {
display: inline-block;
font-weight: bold;
}
#render-options span {
margin-top: 16px;
margin-bottom: 2px;
}
#render-options span span {
margin: 0;
}
#controls, #notes {
clear: left;
padding: 10px;
}
summary {
font-weight: bold;
}
</style>
<body>
<div id="content">
<div id="nav">
<a href="about.html"><img class="link-svg" src="resources/circle-info-solid.svg"></a>
<a href="editor.html"><img class="link-svg" src="resources/pen-to-square-regular.svg"></a>
<a href="index.html"><img class="link-svg" src="resources/house-solid.svg"></a>
</div>
<!-- The editor; this should be centered and occupy the main part of the page -->
<div id="editor">
<!-- The frame and canvas -->
<div id="frame">
<canvas id="render" style="image-rendering: pixelated" width="640" height="480"></canvas>
<div id="overlay">
<span id="fps-display">0</span><br>
<span id="total-samples-display">0</span>
</div>
</div>
<!-- Render options: maybe put on the right? -->
<div id="render-options">
<form>
<span style="margin-top:0">Render Size: (<span id="fsize-display">640x480</span>)</span><br>
<select id="fixed-fsize-select">
<option value="640_480">640x480 (480p)</option>
<option value="960_540">960x540 (1/2x1080p)</option>
<option value="1280_720">1280x720 (720p)</option>
<option value="1920_1080">1920x1080 (1080p)</option>
<option value="2160_1440">2160x1440 (1440p)</option>
<option value="3840_2160">4K (Beefy GPU territory)</option>
<option value="Custom">Custom (Placeholder)</option>
</select>
<!-- <button type="button" onclick="frame.requestFullscreen()">Fullscreen</button><br> -->
<button id="fullscreen-button" type="button">Fullscreen</button><br>
<span>Render Downscale: (1 = none)</span><br>
<input id="downscale-input" type="number" value="1" style="width:120px"><br>
<span>Camera FOV:</span><br>
<input id="cam-fov-range" type="range" value="60" min="1" max="180">
<input id="cam-fov-input" type="number" value="60" min="1" max="180" style="width:48px"><br>
<span>Aperature:</span><br>
<input id="cam-aperture-range" type="range" min="0.0" max="10.0" value="0.0" step="0.01">
<input id="cam-aperture-input" type="number" min="0.0" max="10.0" value="0.0" step="0.01" style="width:48px"><br>
<span>Focus Distance:</span><br>
<input id="cam-focus-dist-range" type="range" min="0" max="100" value="3" step="0.1">
<input id="cam-focus-dist-input" type="number" min="0" max="100" value="3" step="0.1" style="width:48px"><br>
<span>Samples Per Frame:</span><br>
<input id="frame-samples-input" type="number" value="1" min="1" max="1000" style="width:120px"><br>
<span>Accumulation Limit:</span><br>
<input id="samples-limit-input" type="number" value="10000" min="1" max="1000000" style="width:120px"><br>
<span>Bounce Limit:</span><br>
<input id="bounce-limit-input" type="number" value="5" min="1" max="100" style="width:120px"><br>
<input id="sky-color-input" type="color" value="#0C0C0C">
<span>Sky Color</span><br>
<input id="render-simple-toggle" type="checkbox">
<span>Simple Render</span><br>
<input id="enable-overlay-toggle" type="checkbox" checked>
<span>Enable Overlay</span>
</form>
</div>
<div id="scene-options" style="display:none;">
<span id="selected-object-display">Selected: none</span>
</div>
<details id="controls">
<summary>Controls</summary>
<p>While the mouse is clicked on the viewport and held...</p>
<ul>
<li>WASD to move the camera horzontally, Q/E for down/up.</li>
<li>Drag the mouse in the direction you want the camera to turn.</li>
<li>Hold either shift to make the camera travel 5x as fast.</li>
</ul>
<p>Additional Controls:</p>
<ul>
<li>Ctrl + click (in the window) to "select" - currently not implemented other than displaying.</li>
<li>Resize the frame freely be dragging the anchor in the bottom right corner (doesn't work on mobile).</li>
</ul>
</details>
<details id="notes">
<summary>Notes/Tips</summary>
<ul>
<li>When holding a key down and dis/re-selecting the canvas with a mouse, those inputs will not be available until also released and re-pressed (usually not a big deal).</li>
<li>Accidentally highlighting text when dragging the camera around can cause funky movement behavior (try fullscreen mode for large camera movements).</li>
<li>Lower resolutions and samples/pixel/frame will result in better framerate, but in the case of the latter, longer convergence time.</li>
<li>When simply waiting for a render to finish (not modifying the camera) there is no reason not to crank the samples per frame in order for the computation to run as fast as possible.</li>
<li>Scenes with higher contrasts in lighting or relatively small light sources that are very bright will need much more samples to converge.</li>
</ul>
</details>
</div>
</div>
<div id="footer">
<div>
<a href="index.html">Home</a>
<a href="editor.html">Editor</a>
<a href="about.html">About</a>
<a href="credits.html">Credits</a>
<a href="https://github.com/S2ink/Web-Project3" target="_blank">Source</a>
</div>
<div style="margin-top:clamp(16px, 4vw, 64px)"><a href="https://github.com/S1ink" target="_blank">
<img src="resources/github.svg" class="link-svg" style="height:clamp(20px, 2vw, 36px);"></a>
</div>
<span style="font-size:clamp(10px, 1.5vw, 16px); font-family:var(--font-styled);">
© 2023 Sam Richter
</span>
</div>
<!-- js scripts -->
<script defer src="gl-matrix/dist/gl-matrix-min.js"></script>
<script defer src="math.js"></script>
<script defer src="render.js"></script>
<script defer src="scene.js"></script>
<script defer src="envs.js"></script>
<script defer src="app.js"></script>
</body>
</html>