您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“glsl_buffer如何實(shí)現(xiàn)漸變?nèi)切巍?,?nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“glsl_buffer如何實(shí)現(xiàn)漸變?nèi)切巍蔽恼履軒椭蠹医鉀Q疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
我們通過glsl畫一個(gè)三角形需要的是三個(gè)坐標(biāo)系中的點(diǎn),三點(diǎn)成面。而我們?cè)谑褂胓lsl畫一個(gè)動(dòng)態(tài)點(diǎn)用到的是vertexAttrib2f往vertexShader傳遞位置坐標(biāo),通過drawArrays繪制點(diǎn)。繪制一個(gè)三角形也是類似的思想,但是多頂點(diǎn)我們就不能以vertexAttrib2f的形式傳遞參數(shù),這時(shí)我們就要用到buffer。
第一步我們需要?jiǎng)?chuàng)建一個(gè)buffer容器并綁定它
//創(chuàng)建一個(gè)buffer let buffer = gl.createBuffer(); //綁定buffer gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
通過Float32Array對(duì)象創(chuàng)建一個(gè)點(diǎn)位信息組合,并傳遞到buffer中
let vertices = [ ...... ]; vertices = new Float32Array(vertices); //創(chuàng)建一個(gè)float對(duì)象 //傳數(shù)據(jù) gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
我們實(shí)現(xiàn)一個(gè)三角形需要的是三個(gè)二維的坐標(biāo)點(diǎn),所以我們需將vertices中的數(shù)據(jù)以倆倆一組的形式呈現(xiàn)。如何實(shí)現(xiàn)漸變呢? 我們不僅要存頂點(diǎn)位置信息也要存顏色rab信息,所以我們?cè)?strong>vertices中需以5個(gè)float為一組傳遞給attribute。
let vertices = [ -0.5, 0.0, 1.0, 0.0, 0.0, //頂點(diǎn)1 0.0, 0.8, 0.0, 1.0, 0.0, //頂點(diǎn)2 0.5, 0.0, 0.0, 0.0, 1.0, //頂點(diǎn)3 ]; //頂點(diǎn)著色器,聲明a_position和a_Color的attribute屬性,v_Color的varying屬性 let vertexShader = ` attribute vec2 a_position; attribute vec3 a_Color; varying vec3 v_Color; void main(){ v_Color = a_Color; gl_Position = vec4(a_position,0.0,1.0); } `; //片源著色器 let fragmentShader = ` precision mediump float; varying vec3 v_Color; void main() { gl_FragColor = vec4(v_Color,1.0); } `;
這里用到了glsl通信相關(guān)知識(shí),我就不做展開,不了解的可以查看我的第一篇glsl開篇文章中有詳細(xì)介紹~ 這里需要獲取到attribute的內(nèi)存地址,并將buffer中的數(shù)據(jù)傳遞給attribute。這里面有一些注意點(diǎn),由于我們采用5個(gè)float一組的形式,前兩位是位置信息、后三位存儲(chǔ)顏色rgb,所以在傳遞前我們需告知attribute一組有幾位且從第幾位開始拾取~
let FSIZE = vertices.BYTES_PER_ELEMENT; //每一個(gè)值占用多少字節(jié) float32為4字節(jié)
//把buffer賦值給attribute let a_position = gl.getAttribLocation(webgl.program, "a_position"); let a_Color = gl.getAttribLocation(webgl.program, "a_Color"); gl.vertexAttribPointer( a_position, //vertexshader里面的變量的地址 2, //size:attribute變量的長(zhǎng)度(幾個(gè)一組) gl.FLOAT, //數(shù)據(jù)類型 float false, //歸一化 相當(dāng)于length等于1 FSIZE * 5, //stride:每個(gè)點(diǎn)(組)的信息所占用的字節(jié)BYTES 0 // offset:偏移(從第幾個(gè)開始) ); gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2); //確認(rèn)賦值 gl.enableVertexAttribArray(a_position); gl.enableVertexAttribArray(a_Color);
完成上方的buffer綁定以及傳遞attribute后,我們只需最后繪制三角形就行了~
//畫三角形 gl.drawArrays(gl.TRIANGLES, 0, 3);
讀到這里,這篇“glsl_buffer如何實(shí)現(xiàn)漸變?nèi)切巍蔽恼乱呀?jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。