please use a browser that supports "canvas"
//頂點著色器程式
var vshader_source =
'attribute vec4 a_position;\n'+ //attribute被稱為儲存限定符，表示接下來的變數（a_position）
'attribute float a_pointsize;\n'+
'void main() \n';
//片元著色器程式
var fshader_source =
'void main() \n';
function main()
//初始化著色器
if(!initshaders(gl, vshader_source, fshader_source))
//獲取attribute變數的儲存位置--位址
var a_position = gl.getattriblocation(gl.program, 'a_position');//引數1：程式物件； 引數2：想要獲取儲存位址的attribute變數名稱；
var a_pointsize = gl.getattriblocation(gl.program, 'a_pointsize');
//檢查
if(a_position < 0 || a_pointsize < 0)
//設定頂點位置
var n = initvertexbuffers(gl);
if(n < 0)
//將頂點大小傳輸給attribute變數
gl.vertexattrib1f(a_pointsize, 5.0);
//設定的背景顏色-----黑色
gl.clearcolor(0.0,0.0,0.0,1.0);
//清空
gl.clear(gl.color_buffer_bit);
//繪製三個點
gl.drawarrays(gl.points, 0, n);//n is 3
}function initvertexbuffers(gl)
//將緩衝區物件繫結到目標
gl.bindbuffer(gl.array_buffer, vertexbuffer);
//向緩衝區物件中寫入資料
gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);
var a_position = gl.getattriblocation(gl.program, 'a_position');
//將緩衝區物件分配給a_position變數
gl.vertexattribpointer(a_position, 2, gl.float, false, 0, 0);
//連線a_position變數與分配給它的緩衝區物件
gl.enablevertexattribarray(a_position);
return n;
}//流程圖：
//1.獲取webgl繪圖上下文
//2.初始化著色器
//3.設定點的座標資訊
//4.設定背景色
//5.清空
//6.繪製
//使用緩衝區物件向頂點著色器傳入多個頂點資料，需要遵循以下五個步驟：
//1.建立緩衝區物件 (gl.createbuffer());
//2.繫結緩衝區物件 (gl.bindbuffer());
//3.將資料寫入緩衝區物件 (gl.bufferdata());
//4.將緩衝區物件分配給乙個attribute變數 (gl.vertexattribpointer());
//5.開啟attribute變數 (gl.enablevertexattribarray());
fbo多個color buffer繪製
fbo frame buffer object主要用來render to texture,進行off screen rendering.以下是使用步驟 1,初始化glewinit 然後檢測 gpu是否支援gl ext framebuffer object擴充套件 2,建立fbo gluint fbo...
opengles繪製點精靈
什麼是點精靈 opengl圖形由頂點構成,所謂點精靈就是對點進行紋理對映,簡單說就是把一副紋理貼在乙個點上 原來4個頂點構成乙個矩形,現在乙個頂點就完成了，典型的如粒子效果,雲霧,水流火花都可以用點精靈來實現 這樣減少了3個頂點的計算,效率很高。下面看例子 我們把 shader實現 virtual ...
WebGL 示例 繪製圓形點
之前繪製的點都是正方形的，類似乙個畫素點，那怎麼才能把方點繪製成圓點，頂點著色器和片元著色器之間發生了光柵化過程，乙個頂點被光柵化為了多個片元，每乙個片元都會經過片元著色器處理，直接繪製就是方形的點，要繪製圓形的點就需要把多餘的片元給削去 將矩形削成圓形需要知道每個片元在光柵化過程中的座標，在片元著...