-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (227 loc) · 6.84 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<title>Daylight field Analysis Explained</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
position: relative;
font-weight: 100;
font-family: Helvetica;
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
overflow-x: hidden;
}
.content {
width: 100%;
max-width: 1200px;
margin: 1rem auto;
box-sizing: border-box;
padding: 0 2rem;
}
.content p {
font-size: 1.2rem;
line-height: 1.4;
margin-bottom: 2rem;
}
h1 {
font-size: 3rem;
margin-bottom: 3rem;
margin-top: 2rem;
line-height: 1.2;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.scene {
position: relative;
}
.canvas-parent {
width: 100vw;
height: 100vh;
touch-action: none;
position: sticky;
top: 0;
z-index: -1;
}
canvas {
opacity: 1;
}
.scroller {
top: 0vh;
width: 100vw;
height: 1200vh;
z-index: 2;
}
.caption {
background-color: rgba(0,0,0,0.55);
padding: 2rem;
width: 340px;
position: absolute;
}
.caption p {
color: white;
line-height: 1.5;
}
#c1 {
top: 90vh;
left: 15vw;
}
#c2 {
top: 180vh;
right: 20vw;
}
#c3 {
top: 280vh;
left: 20vw;
}
#c4 {
top: 450vh;
right: 10vw;
}
#c5 {
top: 600vh;
left: 10vw;
}
#c6 {
top: 750vh;
right: 10vw;
}
#c7 {
top: 880vh;
left: 6vw;
}
#c8 {
top: 990vh;
left: 20vw;
}
#c9 {
top: 1080vh;
left: 6vw;
}
@media (max-width: 1024px) {
#c1, #c2, #c3, #c4, #c5, #c6 {
right: auto;
left: 5rem;
}
}
@media (max-width:480px) {
#c1, #c2, #c3, #c4, #c5, #c6 {
width: 100%;
box-sizing: border-box;
left: 0;
}
}
#button {
position: fixed;
bottom: 16px;
right: 16px;
padding: 12px;
border-radius: 50%;
margin-bottom: 0px;
background-color: #FFF;
opacity: .9;
z-index: 999;
box-shadow: 0 0 4px rgb(0 0 0 / 15%);
}
#info {
position: absolute;
left: 5px;
top: 5px;
background: rgba( 255, 255, 255, 0.1 );
padding: 5px;
color: rgb(4, 3, 3);
border-radius: 2px;
white-space: pre;
}
</style>
</head>
<body>
<div id="info"></div>
<div class='content'>
<h1> Daylight field Analysis Explained</h1>
<p>
Daylight field analysis extends the traditional daylight analysis workflow, providing designers with unique functionalities.
The difference between daylight field analysis and traditional techniques is similar to the difference between a light field camera and a traditional camera.
With a traditional camera, photons are collected at each pixel, and the final cumulative result is recorded.
In contrast, a light field camera collects additional information along the light path, such as the origin of the light and the position
where the light path intersects with the lens. With this information, images taken by a light field camera can be refocused,
and even the perspective of the image can be modified.
</p>
<p>
Daylight field analysis also collect additional information during the ray tracing process. Let's go through the process of traditional daylight analysis techniques and explore how daylight field analysis can enhance them.
</p>
</div>
<div class='scene'>
<div class='canvas-parent'>
</div>
<div class='scroller'>
<div class='caption' id='c1'>
<p>Daylight analysis starts from one sensor in a space.</p>
</div>
<div class='caption' id='c2'>
<p>
Using the sensor's location and solar geometry, sun vectors at different times of the day and throughout the year are tested against obstructions.
Only the unobstructed vectors are counted.
</p>
</div>
<div class='caption' id='c3'>
<p>
As more sensors are added, additional vectors from each sensor are tested for obstructions.
</p>
</div>
<div class='caption' id='c4'>
<p>
The final count of unobstructed vectors, along with their associated energy, is used to calculate daylight metrics we are familiar with, such as sun hours, spatial daylight autonomy, and others.
</p>
</div>
<div class='caption' id='c5'>
<p>
However, since information is collected only at the sensor points, much data about the light's path is lost.
</p>
</div>
<div class='caption' id='c6'>
<p>
Daylight field analysis, on the other hand, captures this lost information. It records intersection points of light rays with the facade and their directions, not just at sensor points.
</p>
</div>
<div class='caption' id='c7'>
<p>
The density of these intersection points indicates the effectiveness of applying shading across the facade area.
</p>
</div>
<div class='caption' id='c8'>
<p>
The direction of the light rays helps determine the optimal shading angles for the facade.
</p>
</div>
<div class='caption' id='c9'>
<p>
With this additional information, optimized shading options can be developed.
</p>
</div>
</div>
</div>
</div>
<div class='content'>
<p>
Daylight field analysis offers several advantages over traditional daylighting analysis techniques due to its ability to capture more detailed information about light behavior. The key benefits include:
</p>
<p>
1. <b>Analysis results are based on design surfaces,</b> such as facades, rather than typical analysis planes. This allows the results to be used directly in facade design development. For example, the density of intersections and the direction of light rays can be directly applied to determine optimal shading.
</p>
<p>
2. <b>Rich data enables advanced post-processing techniques.</b> For example, by utilizing ray origins, weather conditions can be decoupled from the analysis, allowing weather data from different climates to be applied without additional calculations.
</p>
<p>
These advantages make daylight field analysis particularly useful for rapid design and optimization of a performance driven
facade and building envelope design. By providing information on the design surfaces, this approach empowers designers to make more informed decisions early in the design process, which can significantly improve energy efficiency, occupant comfort, and overall building performance.
</p>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>