前面幾個案例都是在 3d 空間中對頂點位置進行的變換,但本次將給出乙個在 2d 空間中基於頂點位置變換進行二維扭曲的案例。
介紹本節案例的具體開發之前,首先需要了解二維扭曲的基本情況,如圖所示。
從圖中可以看出,左側的原始三角形經過扭曲處理後產生了右側奇異的形狀,猶如乙個風車。同時從圖中可以看出,要想對原始三角形實現扭曲處理,必須將大三角形切分為很多小三角形。下面簡單介紹扭曲的計算思路,具體步驟如下。
其中 ratio 表示與當前總體旋轉角度線性相關的乙個係數,用於將距離轉化為當前考察點的旋轉角度(本案例中為-3.0~5.0,需自行根據專案設定)。
專案基礎為之前的布料模擬專案,故著色器中的**可能有些冗餘,但主要部分已經標出:
頂點著色器如下:
#version 450
layout (location =
0) in vec3 inpos;
layout (location =
1) in vec2 inuv;
layout (location =
2) in vec3 innormal;
layout (location =
0) out vec2 outuv;
layout (location =
1) out vec3 outnormal;
layout (location =
2) out vec3 outviewvec;
layout (location =
3) out vec3 outlightvec;
layout (binding =
0) uniform ubo
ubo;
out gl_pervertex
;void main (
)else
float resultradians = currradians + ratio*currradius;
//計算出扭曲後的角度
float resultx = centerx + currradius *
cos(resultradians)
;//計算結果點的x座標
float resulty = centery + currradius *
sin(resultradians)
;//計算結果點的y座標
//構造結果點,並根據總變換矩陣計算此次繪製此頂點的位置
vec4 eyepos = ubo.modelview *
vec4
(resultx, resulty, inpos.z,
1.0)
; outuv = inuv;
outnormal = innormal.xyz;
gl_position = ubo.projection * eyepos;
vec4 pos =
vec4
(inpos,
1.0)
; vec3 lpos = ubo.lightpos.xyz;
outlightvec = lpos - pos.xyz;
outviewvec =
-pos.xyz;
}
我們也可以動態把圓心移動到布料一角,旋轉可見如下效果:
頂點著色器 片段著色器
一 著色器 著色器只是一種把輸入轉化為輸出的程式。著色器也是一種非常獨立的程式,因為它們之間不能相互通訊 它們之間唯一的溝通只有通過輸入和輸出。在最簡配置下,至少都得有兩個著色器 乙個叫頂點著色器 vertex shader 它將作用於每個頂點上 另乙個叫片段著色器 fragment shader ...
HLSL頂點著色器
1.在文字檔案裡編寫頂點著色器 hlsl語言 2.編譯著色器 d3dxcompileshaderfromfile 3.建立頂點著色器 createvertexshader 4.獲取hlsl語言中變數控制代碼 getconstantbyname 5.根據控制代碼給hlsl語言中的變數傳值 id3dxc...
著色器(Shader)之頂點著色器
頂點著色器其實就是我們自己編寫的一段在gpu中執行的程式,有了頂點著色器,我們就可以從固定的功能流水線中代替一些模組,從而獲得更多的頂點操作的靈活性。對於頂點位置進行操作的的能力具有廣泛的應該場合 織物模擬 粒子系統的點尺寸處理等。可程式設計流水線中的頂點結構比固定的流水線具有更加豐富的資料。首先我...