從0開始用javascript和HTML5的canvas編寫光線追蹤渲染器

題目寫的比較吸引眼球,實際上這個光線追蹤渲染器十分簡陋,只能渲染最簡單的幾何體----球體,效果也很簡陋。但是十分簡單,核心代碼只有200-300行。很適合初學者學習計算機圖形學的一些基本概念。  以下我會通過介紹一些基本算法,逐步構建這個“光線追蹤渲染器”。

                                                                                            


什麼是光線追蹤?

光線跟蹤或 稱光跡追蹤是計算機圖形學的核心算法之一。在算法中,光線從光源被拋射出來,當他們經過物體表面的時候,對他們應用種種符合物理光學定律的變換。最終,光線進入虛擬的攝像機底片中,圖片被生成出來。在當今的電影特效渲染中被廣泛運用,比如阿凡達等,由於光線被賦予了真實的物理特性,使得物體的光影效果十分真實。

光線追蹤是一種全局光照算法,相較於局部光照,全局光照可以模擬出光線在物體之間的傳遞、反射。 大概就是下面這個意思。

                                                                               

光線追蹤渲染器的算法大致框架:

光線投射部分:

Ray_cast( view_point ){

    For( 遍歷視窗上的像素 ){

        產生視線sightLine

        For( 遍歷object_group{

            判斷視線和哪個object相交,並且得到離視窗最近的相交點closed_point 

            Shader = ray_tracing( closed_point, sightLine, 3 )

            用shander 給當前像素着色。

        }

    }

}

光線追蹤部分

Int Ray_tracing(closed_Point, sightLine, deep){

    If( deep > 0 ){

        計算出鏡面反射光線reflectLight  

        For( 遍歷除當前object以外的object )

        求得reflectLight與之最近交點rflPoint

        計算出折射光線RefringenceLight

        For( 遍歷除當前object以外的object )

        求得RefringenceLight與之最近交點rfrPoint

        If( rfrPoint 存在 )

            Refringence = Ray_tracing(rflPoint, RefringenceLight, deep-1);

        If( rflPoint存在 )

            Reflection = Ray_tracing(rfrPoint, reflectLight, deep-1);

        Return phong( closed_point, sightLine ) + k1*Refringence + k2*Reflection;( 0<k1, k2 < 1 )

    } else{

        Retrun phong( closed_point )

    }

}

局部光照模型部分(phong模型)

Int Phong( closed_point, sightLine ){
    先計算點光源逆向射線closed_point->point_light lightLine之間有無遮蔽
    If( 沒有遮蔽 ){
        Cos a = closed_point點法向量與lightLine之間夾角餘弦
        Cos b = lightLine反射光 和sightLine的夾角餘弦
        Diffuse = Point_light.range * cos a
        Reflection = Point_light.range * (cos b)^5 
        Return Diffuse + Reflection;
    }
}

下一節詳細介紹每一個模塊的作用以及使用到的算法。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章