glsl_buffer實現(xiàn)漸變?nèi)切畏椒ㄔ斀?/h1>

 更新時間：2023年03月31日 16:45:20   作者：mool  

這篇文章主要為大家介紹了glsl_buffer實現(xiàn)漸變?nèi)切畏椒ㄔ斀?，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

目錄

• 正文
• 三角形
• 創(chuàng)建一個buffer
• 傳遞數(shù)據(jù)
• 分析
• 三角形buffer數(shù)據(jù)及著色器信息
• buffer賦值attribute
• 繪制三角形
• 效果
• 結(jié)語

正文

上篇文章我簡單封裝了一個glsl的程序類，并簡單介紹了glsl的一些通信方式。這篇文章我們主要來介紹glsl中buffer的使用，結(jié)合上一篇文章中的attribute和varying來實現(xiàn)一個漸變色的三角形～

三角形

我們通過glsl畫一個三角形需要的是三個坐標系中的點，三點成面。而我們在使用glsl畫一個動態(tài)點用到的是vertexAttrib2f往vertexShader傳遞位置坐標，通過drawArrays繪制點。繪制一個三角形也是類似的思想，但是多頂點我們就不能以vertexAttrib2f的形式傳遞參數(shù)，這時我們就要用到buffer，下面通過代碼詳細介紹buffer～

創(chuàng)建一個buffer

第一步我們需要創(chuàng)建一個buffer容器并綁定它

//創(chuàng)建一個buffer
let buffer = gl.createBuffer();
//綁定buffer
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

傳遞數(shù)據(jù)

通過Float32Array對象創(chuàng)建一個點位信息組合，并傳遞到buffer中

let vertices = [
    ......
];
vertices = new Float32Array(vertices); //創(chuàng)建一個float對象
//傳數(shù)據(jù)
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

分析

我們實現(xiàn)一個三角形需要的是三個二維的坐標點，所以我們需將vertices中的數(shù)據(jù)以倆倆一組的形式呈現(xiàn)。如何實現(xiàn)漸變呢？ 我們不僅要存頂點位置信息也要存顏色rab信息，所以我們在vertices中需以5個float為一組傳遞給attribute。下面我們來實現(xiàn)一下代碼～

三角形buffer數(shù)據(jù)及著色器信息

let vertices = [
  -0.5,
  0.0,
  1.0,
  0.0,
  0.0, //頂點1
  0.0,
  0.8,
  0.0,
  1.0,
  0.0, //頂點2
  0.5,
  0.0,
  0.0,
  0.0,
  1.0, //頂點3
];
//頂點著色器,聲明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);
    }
`;

buffer賦值attribute

這里用到了glsl通信相關(guān)知識，我就不做展開，不了解的可以查看我的第一篇glsl開篇文章中有詳細介紹～ 這里需要獲取到attribute的內(nèi)存地址，并將buffer中的數(shù)據(jù)傳遞給attribute。這里面有一些注意點，由于我們采用5個float一組的形式，前兩位是位置信息、后三位存儲顏色rgb，所以在傳遞前我們需告知attribute一組有幾位且從第幾位開始拾取～

let FSIZE = vertices.BYTES_PER_ELEMENT; //每一個值占用多少字節(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變量的長度(幾個一組)
  gl.FLOAT, //數(shù)據(jù)類型 float
  false, //歸一化 相當(dāng)于length等于1
  FSIZE * 5, //stride:每個點（組）的信息所占用的字節(jié)BYTES
  0 // offset:偏移（從第幾個開始）
);
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
//確認賦值
gl.enableVertexAttribArray(a_position);
gl.enableVertexAttribArray(a_Color);

繪制三角形

完成上方的buffer綁定以及傳遞attribute后，我們只需最后繪制三角形就行了～

//畫三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);

效果

結(jié)語

本系列作為glsl入門系列，本人也才接觸glsl語言，后續(xù)會根據(jù)學(xué)習(xí)進度不斷更新，更多關(guān)于glsl buffer漸變?nèi)切蔚馁Y料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

• three.js引入glsl文件并高亮顯示代碼的完整步驟
• Nodejs 中的 Buffer 類的創(chuàng)建與基本使用
• Nodejs Buffer的使用及Stream流和事件機制詳解

• glsl
• buffer
• 漸變
• 三角形

相關(guān)文章

• 

  JavaScript之Canvas_動力節(jié)點Java學(xué)院整理

  這篇文章主要介紹了JavaScript之Canvas，Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等

  2017-07-07
• 

  javascript委托(Delegate)blur和focus用法實例分析

  這篇文章主要介紹了javascript委托(Delegate)blur和focus用法,實例分析了javascript委托的用法及針對常見瀏覽器的使用技巧,需要的朋友可以參考下

  2015-05-05
• 

  JavaScript中removeChild 方法開發(fā)示例代碼

  這篇文章主要介紹了JavaScript中removeChild 方法開發(fā)示例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

  2016-08-08
• 

  詳解小程序緩存插件(mrc)

  這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

  2018-08-08
• 

  詳解 javascript中offsetleft屬性的用法

  本章節(jié)通過代碼實例介紹一下offsetleft屬性的用法，需要的朋友可以做一下參考。

  2015-11-11
• 

  javascript實現(xiàn)C語言經(jīng)典程序題

  這篇文章主要介紹了javascript實現(xiàn)C語言經(jīng)典程序題的解題思路，感興趣的小伙伴們可以參考一下

  2015-11-11
• 

  微信用戶訪問小程序的登錄過程詳解

  這篇文章主要介紹了微信用戶訪問小程序的登錄過程詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2019-09-09
• 

  JavaScript實現(xiàn)文件下載的超簡單兩種方式分享

  這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)文件下載的超簡單兩種方式,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

  2023-12-12
• 

  Bootstrap table 服務(wù)器端分頁功能實現(xiàn)方法示例

  這篇文章主要介紹了Bootstrap table 服務(wù)器端分頁功能實現(xiàn)方法,結(jié)合實例形式詳細分析了Bootstrap table 服務(wù)器端后臺交互與分頁功能相關(guān)操作技巧,需要的朋友可以參考下

  2020-06-06
• 

  JavaScript使用DeviceOne開發(fā)實戰(zhàn)（一) 配置和起步

  這篇文章主要介紹了JavaScript使用DeviceOne開發(fā)實戰(zhàn)（一) 配置和起步的相關(guān)資料,需要的朋友可以參考下

  2015-12-12

最新評論