之前繪製的點都是正方形的，類似乙個畫素點，那怎麼才能把方點繪製成圓點，頂點著色器和片元著色器之間發生了光柵化過程，乙個頂點被光柵化為了多個片元，每乙個片元都會經過片元著色器處理，直接繪製就是方形的點，要繪製圓形的點就需要把多餘的片元給削去;
將矩形削成圓形需要知道每個片元在光柵化過程中的座標，在片元著色器中通過 **內建變數gl_fragcoord**來訪問片元的座標，還可以通過另乙個 **內建變數gl_pointcoord**來訪問片元在繪製的點內的座標；
變數型別和名稱
描述vec4 gl_fragcoord片元的視窗座標
vec4 gl_pointcoord片元在被繪製的點內的座標(0.0, 1.0)
gl_pointcoord變數表示當前片元在所屬的點內的座標，座標值的區間是0.0到1.0，因此為了將矩形削成圓形，需要將點的中心(0.5, 0.5)距離超過以0.5為半徑範圍外的片元剔除掉，在片元著色器中可以使用discard來放棄當前片元
具體剔除片元的**在片元著色器中實現
片元著色器**
precision mediump float
;void
main()
else
}
attribute fec4 a_position;
void
main()
示例：繪製圓形點
WebGL與Vue結合連續繪製點
本文主要介紹 webgl程式設計指南 中連續繪製點功能的學習，並將 改造在vue框架中執行。部分 源自以及 webgl程式設計指南 1 在src components中新建canvas.vue檔案。2 如下 8行引入tools進行webgl的基本設定，內容參見前期的文章。13 20行設定頂點著色器和...
繪製圓心 SVG 繪製圓形
本節我們來學習如何在 svg 中繪製圓形，圓形也是 svg 的基本形狀之一，我們可以通過元素來繪製原型。要繪製圓形可以通過元素來實現，在繪製圓形時，我們需要確定這個圓的圓心及半徑。其中確定圓心需要用到cx屬性和cy屬性，半徑需要用到r屬性。除此之外，還可以使用fill屬性圓進行顏色填充，stroke...
WebGL入門 001 繪製乙個點
webgl依賴於一種新的稱為著色器的繪圖機制,繪製乙個點中,用到了頂點著色器和片元著色器 下面是繪製乙個點的程式 直接複製無法工作 頂點著色器 varvshader source void main n 片元著色器 varfshader source void main n function mai...