1.繪製立方體:
使用gl.drawarrays方法以gl.********s方式繪製需要定義36個頂點,以gl.********_fan繪製需要24個頂點,但是需要呼叫6次drawarrays方法。webgl提供了解決方案:gl.drawelements();
api:gl.drawelements(mode,count,type,offset),避免重複定義頂點,保持頂點數量最小
mode:指定繪圖方式
count:繪製頂點個數(整型)
type:指定索引值資料型別gl.unsigned_byte或gl.unsigned_short
offset:指定索引陣列中開始繪製的位置,以位元組為單位
該繪製方法先從element_array_buffer中讀取頂點索引,再索引到array_buffer中的頂點座標,然後呼叫著色器進行繪製。向element_array_buffer寫入資料的方法和向array_buffer寫入資料方法相同。頂點著色器的執行次數由element_array_buffer中索引的個數決定
console.log("n是"+n);
//開啟深度檢測
gl.enable(gl.depth_test);
gl.clearcolor(0,0,0,1);
var mvpmatrix = new matrix4();
var u_mvpmatrix = gl.getuniformlocation(gl.program,'u_mvpmatrix');
if(!u_mvpmatrix)
mvpmatrix.setperspective(30,canvas.width/canvas.height,1,100);
mvpmatrix.lookat(3,3,7,0,0,0,0,1,0);
gl.uniformmatrix4fv(u_mvpmatrix,false,mvpmatrix.elements);
gl.clear(gl.color_buffer_bit|gl.depth_buffer_bit);
gl.drawelements(gl.********s,n,gl.unsigned_byte,0);
}function initvertexbuffers(gl)
if(a_color<0)
var vertexcolorbuffer = gl.createbuffer();
var indexbuffer = gl.createbuffer();
gl.bindbuffer(gl.array_buffer,vertexcolorbuffer);
gl.bufferdata(gl.array_buffer,verticescolors,gl.static_draw);
gl.vertexattribpointer(a_position,3,gl.float,false,fsize*6,0);
gl.enablevertexattribarray(a_position);
gl.vertexattribpointer(a_color,3,gl.float,false,fsize*6,fsize*3);
gl.enablevertexattribarray(a_color);
gl.bindbuffer(gl.element_array_buffer,indexbuffer);
gl.bufferdata(gl.element_array_buffer,indices,gl.static_draw);
return indices.length;
}2.為立方體每個表面指定不同顏色
注意:指定頂點顏色後,著色器會自動內插出面上每個片元的顏色值,但是每個頂點由三個表面共用,那就需要為乙個頂點指定三次顏色,所以每個頂點都需要定義三次即24個點。
將顏色單獨存在乙個緩衝區,顏色緩衝區與頂點座標緩衝區根據儲存的順序對應,索引緩衝區根據索引值和頂點座標緩衝區對應。
var vshader_source =
'attribute vec4 a_position;\n' +
'attribute vec4 a_color;\n' +
'varying vec4 v_color;\n' +
'uniform mat4 u_mvpmatrix;\n' +
'void main()\n';
var fshader_source =
'precision mediump float;\n' +
'varying vec4 v_color;\n' +
'void main()\n';
function main()
//開啟深度檢測
gl.enable(gl.depth_test);
gl.clearcolor(0,0,0,1);
var n = initvertexbuffers(gl);
var mvpmatrix = new matrix4();
var u_mvpmatrix = gl.getuniformlocation(gl.program,'u_mvpmatrix');
if(!u_mvpmatrix)
draw(gl,mvpmatrix,u_mvpmatrix,n);
document.onkeydown = function(ev)
}var horz_angle = 0,stright_angle = 0;
function keydown(gl,ev,n,mvpmatrix,u_mvpmatrix)
else if(ev.keycode == 37) else if(ev.keycode == 38) else if(ev.keycode == 40)
draw(gl,mvpmatrix,u_mvpmatrix,n);
}function initvertexbuffers(gl)
function initarraybuffer(gl,data,num,type,attribute)
function draw(gl,mvpmatrix,u_mvpmatrix,n)
CentOS 7通過SSH外部訪問
1.安裝centos 7 最小版本後,使用ip addr 查詢ip 2.進入cd etc sysconfig network scripts vi ifcfg ens33對檔案進行修改 type ethernet proxy method none browser only no bootproto...
windows10 通過ssh訪問 linux
win10其實自帶openssh 沒有的話,點選上面的新增找到並安裝 在服務裡設定對應服務開機啟動 ssh keygen r 你的伺服器ipssh 使用者名稱 ipwindows生成公鑰 ssh keygen傳送公鑰到linux伺服器 scp id rsa.pub root 伺服器ip ssh wi...
Vue基礎 九 通過元件物件進行訪問內容
通過元件物件進行訪問內容 parent children 之前都是寫在同乙個頁面裡面,這次試著將js分離出去,降低 的耦合度 ref被用來給圓度或子元件註冊引用資訊 refs乙個物件,持有註冊過 ref 特性 的所有 dom 元素和元件例項。html 單擊單擊2這是乙個小div data metho...