WebGL之旅(二十)幀緩衝區物件FBO

2021-08-05 18:38:25 字數 3200 閱讀 4994

前面都是將作為繪製圖形時的紋理對映,這一節來看看如何將渲染結果作為紋理,即動態生成紋理,貼在另乙個物體上。預設情況下,都是在螢幕提供幀緩衝區中繪製,如果要動態生成紋理,就需要另外新建乙個緩衝區物件,來代替預設的緩衝區,在其中進行離屏繪製。

幀緩衝區物件包括:

顏色關聯物件(可以是紋理物件或渲染緩衝區物件)

深度關聯物件(渲染緩衝區物件)

模板關聯物件

要將動態生成的紋理作為貼圖,只需要在幀緩衝區的顏色關聯物件設定為紋理物件,然後將此紋理物件作為紋理,在繪製其他圖形時使用即可。

attribute vec4 a_position;

attribute vec2 a_texcoord;

uniform mat4 u_mvpmatrix;

varying vec2 v_texcoord;

void main()

#ifdef gl_es

precision mediump float;

#endif

uniform sampler2d u_sampler;

varying vec2 v_texcoord;

void main()

/**

* 幀緩衝區物件fbo

如圖:

可以看兩矩形的兩面都有貼面,開啟隱藏面消除之後,就只會繪製一面:

webgl之旅:

WebGL學習 緩衝區物件(四)

緩衝區物件 webgl提供的一種機制,可以一次性向著色器傳入多個頂點資料,我們可以一次性向緩衝器物件中填充大量的頂點資料,然後將這些資料儲存起來,供頂點著色器使用。初始化過程 建立緩衝器物件 gl.createbuffer 繫結緩衝器物件 gl.bindbuffer gl.array buffer,...

WebGl 利用緩衝區物件畫多個點

效果 webgl 利用緩衝區物件畫多個點 title 6head 7 body 89 canvas id mycanvas width 500 height 300 style border 1px solid red canvas 1011 body 1213 14 script 1516 win...

緩衝區物件

今天在做cuda的程式,突然出現了有關opengl緩衝區物件的函式,這讓我很是糾結,因為我的opengl的基礎不是很好,才接觸不到乙個月,今天我就稍微介紹一下緩衝區物件的有關函式。參考opengl程式設計指南 在許多opengl操作中,我們向opengl傳送一大塊資料,例如向它傳遞需要處理的頂點資料...