學習ios Metal 3 寬度可調的線條的繪製

2021-08-25 02:28:58 字數 1475 閱讀 6373

本節原始碼:

根據蘋果官方的說法,metal是乙個底層的圖形api,因此它與opengles不同,沒有提供任何上層封裝的常用功能的實現。其中繪製有寬度的線條,在opengles是內建支援的,但是metal內建並不支援。如上一節所說,mtlprimitivetype中包含mtlprimitivetypeline型別,但是呼叫drawprimitives進行線條繪製時,只能得到固定寬度為1pixel的線條,不能進行寬度調整:下面給出一種利用矩形模擬有寬度的線條的方法進行寬度可調的線條的繪製。

首先介紹一下原理,會涉及到一點點的幾何數學。假設在二維平面上,需要繪製寬度為w的線段p1p2,其中p1(x1, y1)、p2(x2, y2)座標已知,寬度w已知。如圖所示,只需要繪製兩個實心的三角形papbpc和papcpd即可。

**中實現計算pa, pb, pc, pd這4個點時,採用了向量的方式:

float thickness=0

float4 position1=vertices[lineindex1].position;

float4 position2=vertices[lineindex2].position;.02;

float4 v = position2 - position1;

float2 p0 = float2(position1.x,position1.y);

float2 v0 = float2(v.x,v.y);

float2 v1 = thickness * normalize(v0) * float2x2(float2(0,-1),float2(1,0));

float2 pa = p0 + v1;

float2 pb = p0 - v1;

float2 pc = p0 - v1 + v0;

float2 pd = p0 + v1 + v0;

參見博主給出的原始碼,每一條線段可以看成乙個繪製的例項,每個繪製例項由2個三角形構成,下面是對於每個例項,根據vertex_main中傳入的vid(0~5)來確定具體要傳遞給fragment_main的是pa, pb, pc, pd中的哪乙個點。即每條寬線段是由2個三角形、4個點和6個index(vid)來解釋的,需要對例項的繪製有所理解。

vertex outvertex;

switch(vid)

outvertex.color=;

return outvertex;

ps:關於例項繪製的基礎請參考:的第11章。demo中給出的是直接在ndc座標系中繪製的直線,具體到繪製三維模型的線框圖的實現時,既要考慮遮擋關係,又要考慮正反面,博主會在後續給出三維模型的線框圖的渲染實現。

CSS3學習筆記 中間自適應 兩側寬度固定

實現三欄自適應布局 左右寬度固定,中間自適應 1.傳統的position和margin屬性進行布局 1 絕對定位法 原理 將左右兩邊使用absolute定位,因為絕對定位使其脫離文件流,後面的center會自然流動到他們上面,然後使用margin屬性,留出左右元素的寬度,既可以使中間元素自適應螢幕寬...

巧用CSS3的calc 寬度計算做響應模式布局

今天瀏覽這個站時,因為好奇看了下人家寫的 結果發現了這行 於是就研究了一下,calc 從字面我們可以把他理解為乙個函式function。其實calc是英文單詞calculate 計算 的縮寫,是 css3的乙個新增的功能,用來指定元素的長度。比如說,你可以使用calc 給元素的border marg...

棧的學習(3)

棧學習中必做題 中綴表示式轉換成字尾表示式 字尾表示式也叫逆波蘭表示式 列如 a b ab 首先用順序儲存來實現 include includechar stack 100 int compare char s1,char s2 int isblock void pop int t void pus...