-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcylinder.html
97 lines (94 loc) · 5.21 KB
/
cylinder.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rendering of a Rectangle - Ray Tracing in WebGL</title>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<header>
<a href="index.html">Ray Tracing in WebGL</a> » <a href="cylinder.html">Cylinder</a>
</header>
<body>
<h1>Rendering of a cylinder</h1>
<h2>Equation of a cylinder</h2>
<p>まず円柱を表す式について確認する．下図において，p1が3次元座標の原点，p2がz軸上にある場合，無限に長い円柱は以下の式で表される．</p>
$$
\begin{equation}
x^2 + y^2 = r^2 \tag{1}
\end{equation}
$$
<img src=".\images\cylinder.svg" width="500">
<p>円柱のローカルな基底は以下のように求められる．これらは一般に，グローバル座標系の基底とは向きが異なり，原点も別の位置にある．</p>
$$
\begin{equation}
\boldsymbol{R}_\mathrm{X} = \frac{\boldsymbol{p}_3-\boldsymbol{p}_1}{|\boldsymbol{p}_3-\boldsymbol{p}_1|}, ~~
\boldsymbol{R}_\mathrm{Z} = \frac{\boldsymbol{p}_2-\boldsymbol{p}_1}{|\boldsymbol{p}_2-\boldsymbol{p}_1|}, ~~
\boldsymbol{R}_\mathrm{Y} = \boldsymbol{R}_\mathrm{Z} \times \boldsymbol{R}_\mathrm{X} \tag{2}
\end{equation}
$$
<p>ローカル座標\((X,Y,Z)\)からグローバル座標\((x,y,z)\)への変換は以下のように表される．</p>
$$
\begin{equation}
\left[ \begin{array}{c} x \\ y \\ z \end{array} \right] = \left[ \begin{array}{ccc} \boldsymbol{R}_\mathrm{X} & \boldsymbol{R}_\mathrm{Y} & \boldsymbol{R}_\mathrm{Z} \end{array} \right] \left[ \begin{array}{c} X \\ Y \\ Z \end{array} \right] + \boldsymbol{p}_1 \tag{3}
\end{equation}
$$
<h2>Intersections of a ray and a cylinder</h2>
<p>一般の位置・方向の円柱を式で表すと複雑になるので，(1)で表された円柱と直線の交点を求めよう．</p>
$$
\begin{equation}
\left[ \begin{array}{c} x \\ y \\ z \end{array} \right] = \left[ \begin{array}{c} x_o \\ y_o \\ z_o \end{array} \right] + t \left[ \begin{array}{c} u_l \\ v_l \\ w_l \end{array} \right] \tag{4}
\end{equation}
$$
<p>直線(3)をローカル座標に変換すると，(4)の形に書き換えられる．</p>
$$
\begin{gather}
\left[ \begin{array}{c} X \\ Y \\ Z \end{array} \right] = \left[ \begin{array}{c} X_\mathrm{o} \\ Y_\mathrm{o} \\ Z_\mathrm{o} \end{array} \right] + t \left[ \begin{array}{c} U_l \\ V_l \\ W_l \end{array} \right], ~~
\mathrm{where}~~ \left[ \begin{array}{c} X_\mathrm{o} \\ Y_\mathrm{o} \\ Z_\mathrm{o} \end{array} \right] = \left[ \begin{array}{ccc} \boldsymbol{R}_\mathrm{X} & \boldsymbol{R}_\mathrm{Y} & \boldsymbol{R}_\mathrm{Z} \end{array} \right]^\mathrm{T} \left\{ \left[ \begin{array}{c} x_\mathrm{o} \\ y_\mathrm{o} \\ z_\mathrm{o} \end{array} \right] - \boldsymbol{p}_1 \right\}, ~~
\left[ \begin{array}{c} U_l \\ V_l \\ W_l \end{array} \right] = \left[ \begin{array}{ccc} \boldsymbol{R}_\mathrm{X} & \boldsymbol{R}_\mathrm{Y} & \boldsymbol{R}_\mathrm{Z} \end{array} \right]^\mathrm{T} \left[ \begin{array}{c} u_l \\ v_l \\ w_l \end{array} \right] \tag{5}
\end{gather}
$$
<p>これを(1)に代入し，tについての2次方程式を解くと，円柱と直線の交点がローカル座標で求められる．</p>
$$
\begin{gather}
(X_\mathrm{o} + tU_l)^2 + (Y_\mathrm{o} + tV_l)^2 = r^2 \tag{6} \\
(U_l^2 + V_l^2)t^2 + 2(X_\mathrm{o}U_l + Y_\mathrm{o}V_l)t + X_\mathrm{o}^2 + Y_\mathrm{o}^2 - r^2 = 0 \tag{7}
\end{gather}
$$
<p>交点の数は判別式を用いて確認できる．</p>
$$
\begin{equation}
D = (X_\mathrm{o}U_l + Y_\mathrm{o}V_l)^2 - (U_l^2 + V_l^2)(X_\mathrm{o}^2 + Y_\mathrm{o}^2 - r^2) \tag{8}
\end{equation}
$$
<p>交点が存在する場合，対応するtは以下のように求められる．</p>
$$
\begin{equation}
t_\pm = \frac{-(X_\mathrm{o}U_l + Y_\mathrm{o}V_l) \pm \sqrt{D}}{U_l^2 + V_l^2} \tag{9}
\end{equation}
$$
<p>これより交点のローカル座標は以下のように表される．</p>
$$
\begin{equation}
\left[ \begin{array}{c} X_\pm \\ Y_\pm \\ Z_\pm \end{array} \right] = \left[ \begin{array}{c} X_\mathrm{o} \\ Y_\mathrm{o} \\ Z_\mathrm{o} \end{array} \right] + t_\pm \left[ \begin{array}{c} U_l \\ V_l \\ W_l \end{array} \right] \tag{10}
\end{equation}
$$
<p>得られた交点が，円柱の特定の一部に含まれるかは，以下の条件を確認すればよい．</p>
$$
\begin{equation}
0 \le z \le |\boldsymbol{p}_2-\boldsymbol{p}_1| \tag{11}
\end{equation}
$$
$$
\begin{equation}
\mathrm{start\_angle} \le \theta \le \mathrm{end\_angle}, ~~
\mathrm{where}~~ \theta = \mathrm{atan2}(y, x) \tag{12}
\end{equation}
$$
</body>
<footer>
<a href="index.html">Ray Tracing in WebGL</a> » <a href="cylinder.html">Cylinder</a>
<span style="float: right">Copyright 2021, Kaname Sasaki</span>
</footer>
</html>