ShaderToy 畫乙個球體

2022-03-03 14:02:37 字數 1093 閱讀 6548

嗯,其實渲染球體,可以看做就是乙個2d圓形圖案+渲染光澤的函式。

定義球體結構——半徑,球心座標

struct

sphere ;edzx-

定義光線——光源座標,方向

struct

ray ;

檢測「光線」與「球體」是否相交,若未相交返回false,相交返回從光源到球面的距離

數學解釋如下

圖中紅色線條即光線,重要線段已標註變數,光照方向記作向量dir

首先,需要判斷光線是否照射到球面,轉化為數學問題,即光線所在直線是否與球相交。

在乙個平面內,一條線與乙個球形的關係有三種——相交相切相離

其中相切作為乙個中間狀態是很好判斷的,當光線與球面相切,必然存在:

r = d

t1² = oc² - r²

如此,餘下的兩種狀態也很好判斷了。

假若線段t1的長度小於從光源出發到球形的切線段長,則光線必然與球形相交;反之,則與球形相離。

接下來,計算從光源到球面相交點的距離。 

如圖中所示,最終所求距離即線段t0長度:

t1 = oc·dir  (此處用到點乘)

d² = oc² - t1²

t3² = r² - d²

t0 = t1 - sqrt (t3)

**表示如下:

float intersectsphere(in ray ray, in

sphere sphere)

最終返回反射光的顏色。

最終繪製階段。

void mainimage( out vec4 fragcolor, in

vec2 fragcoord )

→示例:

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分,兩個長方形,分別設定 border radius,transform rotate 設定屬性之後 再次新增乙個,設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感,可以設定左邊的 box shadow cssbodydivdi...

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分,兩個長方形,分別設定 border radius,transform rotate 設定屬性之後 再次新增乙個,設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感,可以設定左邊的 box shadow cssbodydivdi...

畫乙個空心圓 今天用「 」畫乙個空心的圓

題目描述 1 孟子曾說過 離婁之明 公輸子之巧,不以規矩,不能成方圓 而機房日子的潘老師最近有乙個苦惱,他希望能用手畫出乙個圓,但是他發現,用手畫出的圓始終不夠圓,為此,他決定使用點 規矩 問題分析與演算法設計 2 列印圓可利用圖形的左右對稱性。根據圓的方程 r r x x y y 可以算出圓上每一...