基於egret的點光源光線效果的實現

2021-08-04 21:10:44 字數 1871 閱讀 9024

先上效果圖

白色區域為光線區域,黑色區域為陰影區域,光源可以自定義座標,同時可以新增位圖作為光源樣式。

**實現主要包含兩個函式,乙個是計算光源產生的射線與個圖形相交的座標,乙個用於繪製圖形

getintersection(ray, segment) 

var t2 = (r_dx * (s_py - r_py) + r_dy * (r_px - s_px)) / (s_dx * r_dy - s_dy * r_dx);

var t1 = (s_px + s_dx * t2 - r_px) / r_dx;

if (t1 < 0) return null;

if (t2 < 0 || t2 > 1) return null;

return ;

}

draw(x, y)  var points = (function (args) ); return a; })(this.segments); var uniquepoints = (function (points) ; return points.filter(function (p)  else  }); })(points); var uniqueangles = ; for (var j = 0; j < uniquepoints.length; j++)  var insert = ; for (var j = 0; j < uniqueangles.length; j++) , b:  }; var closestintersect = null; for (var i = 0; i < this.segments.length; i++)  } if (!closestintersect) continue; closestintersect.angle = angle; insert.push(closestintersect); } insert = insert.sort(function (a, b) ); this.ctx.beginfill( 0xffffff,1); this.ctx.moveto(insert[0].x, insert[0].y); for (var i = 0; i < insert.length; i++)  this.ctx.endfill(); }
segments = [//圖形頂點座標

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: },

, b: }

];

draw()函式傳入光源點座標。後期可以根據遊戲需要,通過遮罩實現光源的形式變化(如錐形光),同時結合地圖障礙物製作動態光源,實現動態光影效果。

Unity之基於光線投射演算法的體渲染技術(二)

接上文 第二種光線投射演算法的實現,基於光線起點 相機位置 將相機位置由世界座標通過模型檢視投影矩陣反變換到長方體的區域性座標空間。每個fragment的座標作為光線的入射點,由變換後的相機位置與光線入射點確定光線的方向,在沿著光線方向從入射點前進時,每到達乙個新的點,判斷其是否在長方體內,如果在,...

基於jQuery JSON的省市聯動效果

省市區聯動下拉效果在web應用中使用非常廣泛,尤其在一些會員資訊系統 電商 最為常見,開發者一般使用ajax實現無重新整理下拉聯動。本文將講述利用jquery外掛程式,通過讀取json資料,實現無重新整理動態下拉省市二 三 級聯動效果。html 首先在head中載入jquery庫和cityselec...

基於層次包圍盒的光線追蹤渲染加速演算法

光線追蹤的效率問題一直以來都是關注的焦點,因為很多時候都會有非常多的求交運算要執行。目前幾乎所有的加速演算法都是儘量減少求交運算量,比如octree kd tree 包圍盒 及層次包圍盒 等。基於空間分割的演算法最重要的就是如何有效地分隔空間,讓場景細節和主體脫離 劃分在不同的層次中 層次包圍盒對空...