15 通過索引訪問頂點資料

2021-10-24 09:07:46 字數 3489 閱讀 9536

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...