HTMLでレイトレーシング (5回目)
2021/6/13(日)
HTMLでレイトレーシング (5回目)
by ULproject for HTML(JavaScript, canvas)
参考記事
今回は、次の画面のように陰を描きます。
図3 点Pが陰になる場合
陰は視線と見えている球との交点Pから光源表面
までの間に、光源と自身を除く球があれば点Pに
光が当たっていないので暗くすれば陰になります
自身の球が検索されないように点Pを少し光源に
近づけて点Pを球表面から浮かす必要があります
検索時に自身を除くという方法は、球やポリゴン
のみのに使用できますが、トーラス(ドーナツ型)
などの自身の陰がうつる形に対応できません
今回は球のみですのでどちらでもかまいませんが、
検索部分(distance)を変更しなくてよい、点Pを
浮かす方法にしました
また光源自身が含まれないように光源表面までの
距離も少し短めで判定します
今回、陰がうまく出る位置に球を移動しました
また、解像度を多くして画面を大きくしました
shade関数を変更していきます
V0[0] = P[0] + SP[si][0];
V0[1] = P[1] + SP[si][1];
V0[2] = P[2] + SP[si][2]; // V0 = P (元の座標)
E0[0] = SP[0][0] - V0[0];
E0[1] = SP[0][1] - V0[1];
E0[2] = SP[0][2] - V0[2];
球表面の点PをV0、点Pから光源方向をE0にして
distanceを呼ぶ準備をします。
b = Math.sqrt(E0[0]*E0[0] + E0[1]*E0[1] + E0[2]*E0[2]);
t1 = b - Sr[0]; // 光源表面までの距離
光源中心までの距離から光源の半径を引いて表面
までの距離をt1とします。
if (b != 0) b = 1/b; else b = 0;
E0[0] *= b;
E0[1] *= b;
E0[2] *= b; // E0 = L(光源方向)
E0=E0/|E0|でE0を単位ベクトルにします。
b = 0.1;// 1.0E-8; // 少し手前
t1 -= b*2; // 光源表面までより短く
V0[0] += E0[0] * b;
V0[1] += E0[1] * b; // 点Pと重ならないように
V0[2] += E0[2] * b; // V0を少し光源に寄せる
光源表面までの距離の両端を少し短くし、
点P (V0) を表面から少し浮かせます。
distance(_t, V0, E0);
t = _t[0];
b = E0[0]*N[0] + E0[1]*N[1] + E0[2]*N[2]; // b = L・N
if (0 < t && t < t1) b = 0; // 陰
if (b < Am) b = Am; // ambient
_CL[0] *= b; _CL[1] *= b; _CL[2] *= b;
distanceを呼ぶと一番近いtが得られ、0<t<t1
なら光が遮られているので、明るさをb=0にし、
あとは、前回と同じです。
ray005.htmlはMicrosoft Edgeに重ねると
動き、メモ帳でコードを見ることが出来ます
blg～.zip(ray005.html)は
以下のリンクからダウンロードできます
Readme.txtを読んで遊んで下さい
VL-BASICホームページのHTML項目内で
htmlの動作を見ることが出来ます
https://vlbasic.amebaownd.com/pages/3605089/page_202002222051
次回
