WebGL關於著色器傳值的幾種方式總結

2022-08-12 13:33:14 字數 1749 閱讀 8309

一、三個變數限定詞的概念

1、attribute

用途:傳輸那些和頂點資料有關的資料(例如,頂點位置、法向量、頂點顏色《每個頂點都對應乙個顏色》)

2、uniform

用途:傳輸那些對於所有頂點都相同(或者與頂點無關資料)=》例如:旋轉、平移、縮放的矩陣,每個頂點位置都要用到同樣的矩陣來獲取變換的位置,對於每乙個頂點該矩陣都一樣,或者光線的顏色,壓根和頂點沒有關係

3、varying

用途:從頂點著色器,像片源著色器傳遞資料 。例如:紋理座標等,一般通過attribute傳給varying

以上三個變數限定詞都是全域性屬性。

二、單值傳入(分別以頂點、入射光顏色)

(attribute 傳值)

1、宣告變數

//頂點著色器**

var vshader_source =

'attribute vec4 a_position;\n' + // attribute variable

'void main() \n12

3456

72、獲取attribute變數儲存位址

var a_position = gl.getattriblocation(gl.program, 'a_position');

13、將頂點傳給attribute變數(vertexattrib3f為組函式)

gl.vertexattrib3f(a_position, 0.0, 0.0, 0.0);

1(uniform 傳值)

1、宣告變數

'uniform vec3 u_lightcolor;\n'

12、獲取uniform變數儲存位址

var u_lightcolor = gl.getuniformlocation(gl.program, 'u_lightcolor');

13、將入射光顏色傳給uniform(這裡uniform3f也是組函式)

gl.uniform3f(u_lightcolor, 1.0, 1.0, 1.0);

1(varying 傳值)(

三、多值傳入

(attribute 傳值)

1、宣告變數

'attribute vec4 a_position;\n'

12、建立緩衝區物件

var vertexbuffer = gl.createbuffer();

13、繫結緩衝區物件

gl.bindbuffer(gl.array_buffer, vertexbuffer);

14、將資料寫入緩衝區物件

gl.bufferdata(gl.array_buffer, vertices, gl.static_draw);

15、獲取attribute變數儲存位址

var a_position = gl.getattriblocation(gl.program, 'a_position');

16、將緩衝區物件分配給attribute變數

gl.vertexattribpointer(a_position, 2, gl.float, false, 0, 0);

17、開啟attribute變數

gl.enablevertexattribarray(a_position);

1(uniform 傳值)

將第六步改成下面**,第七步去掉即可

gl.uniformmatrix4fv(u_xformmatrix, false, xformmatrix.elements);

--------------------- 

webgl學習 著色器

著色器是一段使用glsl語言 一種類c的高階語言 編寫的簡短程式,它定義了3d物件的畫素點實際繪製到螢幕上的方式,webgl要求開發者要為每個待繪製的物件提供乙個著色器,乙個著色器可以應用於多個物件,因此在實際的應用中,整個場景通常提供乙個統一的 著色器。乙個著色器,通常由兩個部分組成 頂點著色器 ...

建立WebGL著色器程式

既然是高階,我們就要先從基礎入手,那麼先看一下如何建立乙個webgl的著色器程式 初始化著色器程式外掛程式 initshaders.js function initshaders gl,vertexshaderid,fragmentshaderid else var fragelem documen...

一 WebGL 著色器和繪製

var vshader source void main 型別和變數名字 var fshader source void main param mode 繪製模式 gl.points,gl.lines,gl.line strip,gl.line loop param first 從哪個點開始繪製 p...