投稿

ラベル（JavaScript）が付いた投稿を表示しています

HTMLで動くレイトレーシング

イメージ
2021/7/6(火) HTMLで動くレイトレーシング (1回目)～(4回目)   (by ULproject for HTML,JavaScript,canvas)   HTMLでレイトレーシング (8回目) HTMLで行列(matrix) (2回目) 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(); ...
続きを読む

HTMLでクォータニオン(quaternion) (2回目)

イメージ
HTMLでクォータニオン(quaternion) ( 2 回目 )   (by ULproject for HTML,JavaScript,canvas)   行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました   今回はクォータニオンを行列に変換して ベクトルとの積を求めています       以後、四元数と行列を大文字、それ以外を 小文字で表します   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICでクォータニオン(quaternion) (2回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください blg～.zip(quad002.html)は 以下のリンクからダウンロードできます VL-BASIC(N88-BASIC互換?)ホームページ Readme.txtを読んで遊んで下さい   動作は同じなので前回のHTMLのリンクと 行列での動画を貼っておきます quad001.htmlへのリンク 操作方法 //---------------------------------------------------------------------- //  1  2           |  1モデルモード 2ビューモード //                 | //  p  @  [  enter |  p左傾き    @上に移動  [右傾き   enter初期位置へ //  ;  :  ]        |  ;左に移動  :下に移動  ]右に...
続きを読む

HTMLでクォータニオン(quaternion) (1回目)

イメージ
2021/7/3(土) HTMLでクォータニオン (quaternion)  (1回目)   (by ULproject for HTML,JavaScript,canvas)   行列 (matrix)の代わりに四元数(しげんすう) (quaternion)を使用して見ました。     以後、四元数と行列を大文字、それ以外を 小文字で表します   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICでクォータニオン(quaternion) (1回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   JavaScriptでは、 Q[0]～Q[3]で回転四元数 Q[4]～Q[7]で並進四元数 として 複合四元数を表現しています blg～.zip(quad001.html)は 以下のリンクからダウンロードできます VL-BASIC(N88-BASIC互換?)ホームページ Readme.txtを読んで遊んで下さい quad001.htmlへのリンク 操作方法 //---------------------------------------------------------------------- //  1  2           |  1モデルモード 2ビューモード //                 | //  p  @  [  enter |  p左傾き    @上に移動  [右傾き   enter初期位置へ //  ;  :  ]        |  ;左に移動  :下に移動  ]右に移動 ...
続きを読む

HTMLで行列(matrix) (2回目)

イメージ
2021/7/2(金) HTML で 行列 (matrix)   (2 回 目 )   (by ULproject for HTML,JavaScript,canvas)     点を並進、回転移動させる行列を作り ワイヤーフレーム (線画)の立体を ラジコンや自分が移動する (1,2キーで切り替え、キー操作はプログラムの 最終行のコメントに書いています ) ように動かしていきます   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICで行列(matrix) (2回目) を見てください HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   ここから、行列は大文字、 ベクトルとスカラーは小文字で表す事にします 行列は 4×4(4行4列)とし、 ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   JavaScriptでは行列Aの成分を、 |A[0] A[4] A[ 8] A[12]| |A[1] A[5] A[ 9] A[13]| |A[2] A[6] A[10] A[14]| |A[3] A[7] A[11] A[15]| で表す事にします   r 11  = n 1 n 1 +(1-n 1 n 1 )cosθ r 22  = n 2 n 2 +(1-n 2 n 2 )cosθ r 33  = n 3 n 3 +(1-n 3 n 3 )cosθ r 12  = n 1 n 2 (1-cosθ)-n 3 sinθ r 21  = n 2 n 1 (1-cosθ)+n 3 sinθ r 13  = n 1 n 3 (1-cosθ)+n 2 sinθ r 31  = n 3 n 1 (1-cosθ)-n 2 sinθ r 23  = n 2 n 3 (1-cosθ)-n 1 sinθ r 32  = n 3 n 2 (1-cosθ)+n 1 sinθ となり、回転行列 A は  ...
続きを読む

HTMLで行列(matrix) (1回目)

イメージ
2021/7/1(木) HTML で 行列 (matrix)   (1 回 目 )   (by ULproject for HTML,JavaScript,canvas)       点を並進、回転移動させる行列を作り ワイヤーフレーム (線画)の立体を ラジコンや自分が移動する (1,2キーで切り替え、キー操作はプログラムの 最終行のコメントに書いています ) ように動かしていきます   このシリーズは、プログラム を 出来るだけ似せて 移植していますので、解説を省略しています 式などに関する説明も省略していますので 詳しくは N88-BASICで行列(matrix) (1回目) を見てください   HTML,JavaScript,canvasは、使い慣れていない ため、不具合などが多々あると思いますが、 ご了承ください   ここから、行列は大文字、 ベクトルとスカラーは小文字で表す事にします 行列は 4×4(4行4列)とし、 ベクトルは 3次元(4次元目は常に1)とします またベクトル上部の矢印は省いています   JavaScriptでは行列Aの成分を、 |A[0] A[4] A[ 8] A[12]| |A[1] A[5] A[ 9] A[13]| |A[2] A[6] A[10] A[14]| |A[3] A[7] A[11] A[15]| で表す事にします     |1 0 0 x| A=|0 1 0 y|   |0 0 1 z|   |0 0 0 1| です   カレント行列 Mに対して M=MAはラジコンのような移動、 M=AMは自分が動く動作になり、 Modeの値で切替えています どちらも物体を動かす方向になり、 M=AMでは自分が逆向きに動く 指定方法になりますので注意が必要です プログラムではキー入力の所で、 M=AMの時は、符号を変える処理を しています   ベクトル p=(x,y,z)、p 1 =(x',y',z') Mを行列として上記式はp 1 =Mp と表せます 今回のベクトルは 3次元ですので 4次元目は無視(常に1と)します   blg～.zip(ma...
続きを読む

HTMLでレイトレーシング (8回目)

イメージ
2021/6/16(水) HTML でレイトレーシング  (8 回 目 )   by ULproject for HTML(JavaScript, canvas) ray008.html 式変形など詳しくは N88-BASICでレイトレーシング (8回目) 透過を追加します 透過は屈折光と反射光に分けて追跡します   物質 1から2へ光が進む時、 物質 1,2の絶対 屈折率を n 1 、 n 2 、相対屈折率を n = n 12  = n 2 /n 1 とし、入射光 E,屈折面の法線N、反射光S、 屈折光 Rとする |E|=|N|=|R|=1   図 5 屈折光R = (1/n)(E - d N)   光が当たった部分の長さを 1にして 幅のある光が屈折する様子を書いた のが図 5です   物質 1 : 物質2 = sinθ : sinα は、 単位時間当たりの光が進む距離の比 つまり、進みやすさの比です。 屈折率 n 1 , n 2 は光の進みにくさなので 進みやすさの比は、 sinθ : sinα = n 2  : n 1  = n : 1 sinθ = nsinα   よって、図 5の角αを持つ2つの 直角三角形は大が小の n倍になって いる   R’= E - d Nと置くと、 R  = (1/n)R’    = (1/n)(E - d N)   となり、 dを求める、   d = ncosα - cosθ ncosα = n√(1-sin 2 α) = √{n 2 -(nsinα) 2 } = √(n 2 -sin 2 θ) = √{n 2 -(1-cos 2 θ)} d = √{n 2 -(1-cos 2 θ)} - cosθ   屈折光 Rと前回やった反射光Sは R = (1/n)[E-[√{n 2 -(1-cos 2 θ)}-cosθ]N] ただし、 cosθ= -E･N S = E+(2cosθ)N = E - 2(E･N)N   次に、入射光が屈折光 (1-k)と反射光kに 分かれる割合 反射率 k = [ {sin(θ-α)/sin(θ+α)} 2 ...
続きを読む