Framebuffer Beginner's Guide Source Code

WebGL Framebuffer with Texture Color Attachment

Random Colors Framebuffer Frame & Depth Buffers

JavaScript

/**
* Framebuffer with just one
* texture color attachment.
* 
* @param s: String path to image file.
*/
var GLFbTexColor = function(s){ 

// Show an error message
// soon as possible.
if (typeof Float32Array === 'undefined'){
 new GLControl(0,null,null,null);
 return;
}


var shapes = new Square(); 
  
var aIm = new Array();

var e =  new GLEntity(
 s,
 0
);

e.nOffset = Number(
 shapes.aOffset[0]
);

e.nCount = Number(
 shapes.aCount[0]
);

aIm.push(
 e
);
 
 // Default viewport dimensions:
this.nDim = Number(512);

var controller = new GLControl
(
 shapes.aVertices,
 shapes.aIndices,  
 aIm,
 this
);
  
if(controller == null){
 return;
}
 
};

GLFbTexColor.prototype = {

Initialize the Framebuffer

 
init:function(controller) {

var gl = controller.gl;

var glDemo = controller.glDemo; 

var glUtils = controller.glUtils = new GLUtils();

glUtils.getFramebuffer(
 controller,
 512
);

glUtils.getTexColor(
 controller
);

glUtils.getFramebufferStatus(
 controller
);
 
var responsive = new GLResponsive(
 ontroller,
 null
);

if (responsive == null){

 init.eDebug.innerHTML = "GLResponsive == null";

}  
},
  

Render One Frame

 
/**
Render one animation frame.
**/
render: function(controller){

var gl = controller.gl;

var glDemo = controller.glDemo;

var glUtils = controller.glUtils;

var e0 = controller.aEntities[0];

var nDimCanvas = controller.cv.width;

// Viewport dimensions
// equal render texture
// dimensions, before
// render to texture.
gl.viewport(
 0,
 0,
 glDemo.nDim,
 glDemo.nDim
);
 
gl.bindFramebuffer(
gl.FRAMEBUFFER, 
  glUtils.fb
);
 
gl.clearColor(
 Math.random(),
 Math.random(),
 Math.random(),   
 1
); 
 
gl.clear(
 gl.COLOR_BUFFER_BIT 
 | 
 gl.DEPTH_BUFFER_BIT
);
 

// Activate the 
// first texture. 
gl.uniform1i
(
 0.uSampler, 
 e0.idx
); 

gl.activeTexture
(
 gl.TEXTURE0 + e0.idx
);
 
// Draws the scene
// mapping the first
// texture to scene mesh
// elements. Renders to the
// framebuffer texture.
e0.matrix[14] = -8;

glUtils.renderInteractiveXY(
 controller,
 e0
);
 
// Viewport dimensions
// equal canvas dimensions
// before render to
// the canvas.
gl.viewport(
 0,
 0,
 nDimCanvas,
 nDimCanvas
);
 
// Draw the rendered
// texture to a square.
gl.bindFramebuffer(
 gl.FRAMEBUFFER, 
 null
);
 
gl.uniform1i
(
 e0.uSampler, 
 3
); 
 

gl.clearColor(
 1,
 0,
 1,
 1
);

gl.clear(
 gl.COLOR_BUFFER_BIT 
 | 
 gl.DEPTH_BUFFER_BIT
);

e0.matrix[14] = -2;

glUtils.renderQuad(
 controller,
 e0
);

},

};

Texture for Interactive Square

Tags