Shader學習 1跳動的心

2021-08-19 07:52:36 字數 1305 閱讀 3466

****

學習參考

關於心的形狀

首先,我們來看心形線的定義——乙個圓上的固定一點在它繞著與其相切且半徑相同的另外乙個圓周滾動時所形成的軌跡。

下面進入正文,分為背景和心形兩部分進行學習。

背景部分:

// background color

fixed3 background = fixed3(1.0,0.8,0.7 - 0.07*i.uv.y)*(1.0 - 0.25*length(i.uv));

background可以看做是主背景顏色(1.0,0.8,0.7)和畫素距離中心點遠近值的乘積。

0.7-0.07*i.uv.y即在b通道上減去畫素的y座標,表示y方向上輕微的顏色變化,0.07是經驗值可以更改。

(1.0-0.25*length(i.uv))則是對距離length(i.uv)的進一步計算,由於length(i.uv)有可能大於1(即x軸大於y軸時,x方向的絕對值有可能大於1),因此在length的基礎上乘以0.25,經驗值可修改。

心形部分:

我們通過函式進行約束,判斷畫素是在心形內部還是外部,分別用內部和外部的顏色進行填充。

// shape

float a = atan2(i.uv.x,i.uv.y) / 3.141593;

float r = length(i.uv);

float h = abs(a);

float d = (13.0*h - 22.0*h*h + 10.0*h*h*h) / (6.0 - 5.0*h);

atan2(i.uv.x,i.uv.y) 是向量(x,y)對應的弧度值,範圍是(-π,π)。(函式atan2比atan穩定;且atan2(y,x)中的引數順序是倒置的, 即計算了(x,y)的角度值。)r是畫素到中心點的長度,那麼|a|-r就可以判斷當前畫素是在心形的內部還是外部。

此時畫出的心形下部偏圓,我們用(13*x-22*x^2+10*x^3)/(6-5*x)對h的值進行修正,得到d。

純css畫一顆跳動的心

1.transition property 執行變換的屬性 2.transition duration 執行變換的時間 3.transition time function 執行變換的速率 4.transition delay 執行變換的延遲時間。1.animation name 規定需要繫結到選擇...

我的shader學習之六

今天覆習一下基礎,寫個光照的讀書筆記 先寫個blinn phong的光照模型 upgrade note replaced object2world with unity objecttoworld upgrade note replaced world2object with unity world...

梁寧產品思維學習 1同理心(2情緒)

如同一句話 學了很多道理,但是還是過不好這一生 我們後天學習的東西都是理性的,理性是把人往回拉的力量。但是驅動乙個人的,其實是他的內在感受,他的情緒。我們會有情緒衝動的時候,你陷入愛情了,被憤怒 被恐懼控制了,那麼人就崩潰了,所有你所學的理性的知識 技能 理性全都沒用了,全都不能說服你。知識的呼叫需...