Seven Simple Shaders: WebGL Tutorial

Framebuffer Beginner's Guide Source Code

WebGL Framebuffer with Texture Color Attachment

Framebuffer Example Background Colors Change Framebuffer Beginner's Guide Initialize the Framebuffer Render One Frame Texture for Interactive Square More Framebuffer Examples

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'){

 this.viewGetWebGL();

 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";

}  
},
  
/**
View a WebGL error
**/
viewGetWebGL: function(){
 
var image = document.createElement(
 "IMG"
);

image.src = "http://www.SevenThunderSoftware.com/assets/ss-gl-get.png";

image.onclick=function(){
 window.location='http://get.webgl.org';
};

image.className="ex";
 
var eGraphic = document.getElementById(
 'eGraphic'
); 

eGraphic.innerHTML = "Your browser might not support WebGL.
"; eGraphic.innerHTML += "For more information see http://get.webgl.org.
"; eGraphic.appendChild( image ); },

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

Texture with Four Colors
WebGL Scenes: Responsive Web Design Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.