webgl依賴於一種新的稱為著色器的繪圖機制,
繪製乙個點中,用到了頂點著色器和片元著色器
下面是繪製乙個點的程式(直接複製無法工作),
// 頂點著色器
varvshader_source
='void main() \n'
;// 片元著色器
varfshader_source
='void main() \n'
;function
main()
// 初始化shaders!! 這裡使用了書中自己編寫的初始化程式,遮蔽了底層差異if(
!initshaders
(gl,
vshader_source
,fshader_source))
// 設定黑色清空,(設定背景色)
gl.clearcolor
(0.0
,0.0
,0.0
,1.0);
// 清空
gl.clear
(gl.
color_buffer_bit);
// 繪製
gl.drawarrays
(gl.
points,0
,1);
}
獲取canvas元素
獲取webgl繪圖上下文
初始化著色器
設定canvas背景色
清除canvas繪圖
頂點著色器
用來描述頂點的特性的程式,
示例程式中 ,以下**代表了乙個頂點著色器
是使用opengl es著色器語言
'void main() \n'
;
頂點著色器中 gl_position和gl_pointsize 是內建在頂點著色器中的,而且有著特殊的含義,分別代表頂點的位置,和頂點的尺寸,
gl_position必須被賦值,否則無法工作
vec4 vec4(v0,v1,v2,v3)
可以根據值來建立vec4物件,
vec4表示由4個浮點數組成的向量(x,y,z,w)
w為齊次座標
(x,y,z,w)等價為(x/w,y/w,z/w)
片元著色器
下面是乙個片元著色器
void
main()
;
型別也是vec4型別的
代表(r,g,b.a)
詳細的片元著色器的內容將會在以後介紹.
WebGL程式設計指南案例解析之繪製乙個點
webgl width 400 height 400 後續的本系列部落格頁都將基於這個頁面進行開發，只是替換了案例相關 部分的js檔案。首先讓我們來看webgl1.js 第一章.繪製乙個點，通過頂點著色器和片元著色器傳參 頂點著色器，接收attribute型變數a position var vsha...
opengl 繪製乙個點
背景 這將是我們第一次遇到 glew，glew 是opengl的擴充套件功能庫。它能幫助你解決opengl不斷擴充套件的問題。一旦你初始化它之後，它在你的系統上將查詢所有可用的擴充套件功能，自動的載入它們並且通過乙個單一的標頭檔案提供簡單的介面。在這一節中，我們將第一次看見頂點緩衝區物件 vbos ...
VB SolidWorks繪製乙個圓
1 繪製乙個圓的 dim part as object dim boolstatus as boolean sub main 連線solidworks 在前視基準面建立乙個圓 boolstatus part.extension.selectbyid2 前視基準面 plane 0,0,0,false,...