ULprojectのホームページ © ULproject

2021/6/10(木) HTML でレイトレーシング (2 回 目 )   by ULproject for HTML(JavaScript, canvas)   参考記事 N88-BASICでレイトレーシング (2回目)   複数の球から 1番近い交点までの距離を求る関数 function distance(_t, V, E) を作ります 値が返る変数 (要素数1の配列変数)は_0を付けて 分かり易いようにしています   Snが球の数で配列要素0～2の3個の球を定義します   var Sn = 3 // 球の個数 //        光源           大球         小球 var SP = [[-12, 8, -5], [5, 0, -40], [0, 5, -20]];// center var Sr = [ 2          ,  12        ,  4         ];// radius     SP[0][0],SP[0][1],SP[0][2]は0番の球の中心座標です 座標の向きは、 1回目の図1を見て下さい Sr[0]は0番の球の半径です   c番の球までの距離t0を求めるには 視点 Vから球の中心座標(SP[c][0],SP[c][1],SP[c][2])を 引き、球を原点に移動させた視点を V0として 交点までの距離を求めます   V0[0] = V[0] - SP[c][0]; V0[1] = V[1] - SP[c][1]; V0[2] = V[2] - SP[c][2]; t0    = distance_sphere(V0, E, Sr[c]);   で t0に距離が入ります ;(セミコロン)は終止符の様なもので 必ず必要です   球 c=0,1,2のt0で一番近いもの を tにすれば良いので、   t = -1.0; si = -1; for (c = 0; c < Sn; c++) {   V0[0] = V[0] - SP[c][0];   V0[1] = V[1] - SP[c][1];   V0[2] = V[2] - SP[c][2];   t0    = distance_sphere(V0, E, Sr[c]);   if (t0 >= 0)   {     if (t0 <

2021/6/9(水) HTMLでレイトレーシング (1回目) by ULproject for HTML(JavaScript, canvas) レイトレーシングで球を表示するという 簡単なプログラムをHTML(Java script, canvas)で作ります このシリーズは、式などに関する説明を省略して いますので 詳しくは N88-BASICでレイトレーシング (1回目) を見てください 図1 視線方向の単位ベクトルE(上記矢印)     とその出発点V(視点位置ベクトル) 視線と球の1番近い交点の色をスクリーン上に 描いて行きます ここから、数値(スカラー)を小文字、ベクトル (x,y,z成分を持つ矢印)を大文字で書きます 原点が中心で半径rの球は、 |P| = r (|P - C| = rは視線を移動すれば良いので不必要です) 視点VからE方向に向けた視線は、 P = V + Etです |P| = r にP = V + Etを代入して、 |V + Et| = rの両辺を2乗して||を外し、 整理すると(E･E = |E|2 = 12 = 1より) t2 +  2(V･E)t + (V･V - r2) = 0で tの2次方程式になり、解の公式で 視点から球との交点までの距離 t = -V･E±√{ (V･E)2 - V･V + r2 }です 判別式D = (V･E)2 - V･V + r2 で3パターン判別 D < 0 → 交差しない  (tは虚数) D = 0 → １点で接する(tは１個) D > 0 → ２点で貫く  (tは遠近２個) これをJava scriptで書いていきます ベクトルの成分は、 P=(x, y, z)、V=(Vx ,Vy ,Vz)、V=(V0, V1, V2) などと表しますが、配列を使うことにします var V = [x, y, z] または var V = new Array(3) で、定義します (x, y, zは座標を表す数値、Array(3)の3は 配列の要素数なのでx,y,zの3要素を指定します) 定義するとV[0],V[1],V[2]という変数が使え それぞれx,y,z成分とします VとEの内積は同じxyz成分同士の積の和なので b = V･Eは、 b = V[0]*E[0] + V[1]*E[1] +