. 兩點之間的連線稱之為線段,在屏幕上顯示線段放在現在已經不是稀奇的事情,大多數高級圖形API都可以輕松實現,我嘗試用OpenGL畫線,在這里記錄一下收獲.
. OpenGL這個級別的圖形API,通常會提供一些繪制基本圖形的接口,這些基本圖形稱之為圖元,而OpenGL提供了點,線段,三角形三種圖元繪制接口,說出來你可能不信,OpenGL就只能繪制這三種圖形,本篇博文的主題是畫線,OpenGL能直接繪制的圖元之一.
用OpenGL繪制線段圖元
給出兩點的坐標,調用API即可直接畫出線段.
// 偽代碼
glVertex(x0, y0); // 點A
glVertex(x1, y1); // 點B
glDrawPrimitive(GL_LINES); // 繪制線段圖元
如果執行正確,你可以看到一條線段.
OpenGL同時還提供調整線段寬度和顏色的接口.
// 偽代碼
glLineWidth(width) // 寬度
glLineColor(r, g, b, a) // 顏色
glVertex(x0, y0); // 點A
glVertex(x1, y1); // 點B
glDrawPrimitive(GL_LINES); // 繪制線段圖元
如果這篇博文有讀者,如果恰好你就是這篇博文的讀者,看到這里,你大概已經被OpenGL的威力震懾住了,冷靜一下,接着往下看.
很多時候,我們想要繪制連續的線段,OpenGL可以輕松搞定這個問題,你只需要重復上述代碼就可以了.
// 偽代碼
glLineWidth(width) // 寬度
glLineColor(r, g, b, a) // 顏色
glVertex(x0, y0); // 第一條線段點A
glVertex(x1, y1); // 第一條線段點B
glVertex(x2, y2); // 第二條線段點A
glVertex(x3, y3); // 第二條線段點B
glDrawPrimitive(GL_LINES); // 繪制線段圖元
只需要短短幾行代碼,就可以畫出兩條線段,在驚嘆之余,你可能沒有發現,在兩條線段交接處,很明顯缺掉了一塊,這是因為繪制的線段寬度是3像素,而且OpenGL繪制的線段是直角,實際上上圖是兩個首尾相連的長方形,通過下面的圖能清晰的看出問題所在.
很容易想象,線越寬,線段交接處的缺口越大,大多數人都接受不了這種缺陷,同時大多數人都認為它不是個問題,如果這篇博文有觀眾,且恰好就是你,你肯定有同感,但事實上,你猜的沒錯,因為OpenGL在繪制線段圖元的設計上就沒考慮過這個問題,所以按上述思路去畫線,這個問題無解,無解的問題就不是問題,所以這的確不是個問題.
用三角形圖元來繪制線段
. 很多新人經常會被線段圖元迷惑,誤以為OpenGL畫線就的用它,實際上OpenGL對線段圖元提供的接口非常有限,即便如此,它還是有能發揮特長的使用場景,但本文所描述的場景它並不適合.
. 要解決"缺口"的問題,得換一種思路,先生成線段的網格,再填充網格,這樣靈活度就高多了.
從上圖可以看出,線段的交接處看起來沒有那么突兀了.
此外,因為線段是用網格填充的,所以我們可以隨心所欲的修改網格,以及通過可編程管線調整它.
基於上述內容畫的一些線段
閃電
曲線