HTMLで動くレイトレーシング
2021/7/6(火)
HTMLで動くレイトレーシング (1回目)～(4回目)
(by ULproject for HTML,JavaScript,canvas)
HTMLでクォータニオン(quaternion) (1回目)
を使ってレイトレーシングを動かしてみました
HTML,JavaScript,canvasは、使い慣れていない
ため、不具合などが多々あると思いますが、
ご了承ください
(1回目)～(4回目)のプログラムの説明
上記リンク先のプログラムをほぼそのまま結合
(1回目) mray001.html … 行列による移動
(2回目) mray002.html … クォータニオンによる移動
上記プログラムをOpenGL風インターフェースに改造
(3回目) mray003.html … mray001.htmlを改造
(4回目) mray004.html … mray002.htmlを改造
以下、モデル(球)の配置の説明
function model()
{
var md;
Sn = 0; // Model reset
md = Mode; // Push Mode
Mode = 0; // Model mode
Specular(1.0);
Shininess(10.0);
Reflect(0.0);
Clarity(0.0);
Refract(1.0);
// 光源
Diffuse(1.0, 1.0, 1.0);
Push();
Translate(-500, 500, 500);
Sphere(2);
Pop();
// 大球
Diffuse(0.0, 1.0, 1.0);
Push();
Translate(3, 8, -80);
Sphere(18);
Pop();
// 小球
Diffuse(1.0, 1.0, 0.0);
Push();
Translate(-6, 14, -60);
Sphere(6);
Pop();
// 透明
Diffuse(0.1, 0.1, 0.1);
Clarity(0.9);
Refract(1.2);
Push();
Translate(3, 9, -20);
Sphere(4);
Pop();
// 反射
Diffuse(0.5, 0.5, 0.5);
Reflect(0.5);
Clarity(0.0);
Refract(1.0);
Push();
Translate(0, -91, -90);
Sphere(80);
Pop();
Mode = md; // Pop Mode
}
のように
OpenGL風にモデルを配置出来るようにしました
Push(), Pop()は行列(クォータニオン)の退避と戻しです
Specular 反射光の割合
Shininess 反射光の収束度
Reflect 鏡の割合
Clarity 透明度
Refract 屈折率
Diffuse 表面の色(RGB)
Sphere(r) 半径rの球
Translate(x, y, z) x,y,z方向に移動
Rotate(d, x, y, z) ベクトル(x,y,z)回りにd°回転
MODELモード(Mode = 0)では
行列などの演算はSphereに近いほうから
例
Rotate(d, x, y, z)
Translate(x, y, z)
Sphere(r)
球は並進移動した後回転する
VIEWモード(Mode = 1)では
自分が動くイメージですが方向はモデルが動く方向です
演算は常にモデル(球)に対して行っているためです
例
Rotate(d, x, y, z)
Translate(x, y, z)
自分がベクトル(x,y,z)回りに-d°回転し
自分が-x,-y,-z方向に並進移動する
ややこしいですが、行列などの演算の都合です
演算を変更追加などして、直観で分かり易いような
インターフェースなどを考えて見るのも良いかもしれません
(すでにありそうですが)
blg～.zip(mray001.html～mray004.html)は
以下のリンクからダウンロードできます
Readme.txtを読んで遊んで下さい
操作方法はプログラムリストの最終行に
書いてあります
mray004.htmlを貼ったページへのリンク
https://ulproject.github.io/html/mray004
