WebGL Feature Test Source Code

WebGL Feature Test Example WebGL Feature Test Tutorial Introduction Obtain Reference to WebGLRenderingContext WebGL Method getParameter() WebGL Method getContextAttributes() Random WebGL Tests

Introduction

This page includes the source code to test available WebGL features and capabilities. Run the WebGL Performance Feature Test to see how your current browser performs. Look at the source code on this page to learn how the browser performance test works. Feel free to modify the JavaScript Source Code GLTest.js

Method getContext() obtains a reference to the WebGLRenderingContext. Method getParameter() displays a range of WebGL features. Method getContextAttributes() displays a list of attribute properties. Last see some random WebGL tests.

GLTest Constructor

 /**
 * Initialize a WebGL
 * test prototype 'class'.
 */
var GLTest = function(){
 
 this.cv = document.getElementById("cvs");
 this.eDebug = document.getElementById("eDebug");
 this.gl = this.getGLContext();

 if(this.gl != null){  
  this.getAttribs();  
 }

 this.getGLFunctionality();
 this.getGLErrors();  
};

GLTest.prototype = {

Obtain Reference to WebGLRenderingContext

/**
 * Try to obtain a reference
 * to the WebGL rendering
 * context. Use
 * an Array with a set
 * of potential
 * names for the 
 * context.
 */
getGLContext: function(){
var canvas = this.cv;

// Array of names.
var a3D = 
[
 'webgl', 
 'experimental-webgl', 
 'webkit-3d',
 'moz-webgl'
];


var glContext = null;
try {
   
 for (var i = 0; i < a3D.length; i++) {    
      
  glContext = canvas.getContext(a3D[i]);
      
  if (glContext != null) {  
   break;
  }
 }    
} 
   
catch(err) {    
 this.eDebug.innerHTML = err.toString();    
}   
   
return glContext;
},

WebGL Method getParameter()

/**
 * Get values for every
 * parameter currently available
 * from WebGL method
 * getParameter().
 */
getGLFunctionality: function(){
 if (this.gl) {
   var gl = this.gl;
   this.eDebug.innerHTML +="<br /><br />*** WebGL Parameters ***";
   this.eDebug.innerHTML +="<br />WebGL Version: " + gl.getParameter(gl.VERSION);
   this.eDebug.innerHTML +="<br />Shading Language Version: " + gl.getParameter(gl.SHADING_LANGUAGE_VERSION);
   this.eDebug.innerHTML +="<br />WebGL Vendor: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />WebGL Renderer: " + gl.getParameter(gl.RENDERER);
    
   this.eDebug.innerHTML +="<br />gl.ACTIVE_TEXTURE: " + gl.getParameter(gl.ACTIVE_TEXTURE);
   this.eDebug.innerHTML +="<br />gl.ALIASED_LINE_WIDTH_RANGE: " + gl.getParameter(gl.ALIASED_LINE_WIDTH_RANGE); 
   this.eDebug.innerHTML +="<br />gl.ALIASED_POINT_SIZE_RANGE: " + gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE); 
   this.eDebug.innerHTML +="<br />gl.ALPHA_BITS: " + gl.getParameter(gl.ALPHA_BITS);
   this.eDebug.innerHTML +="<br />gl.ARRAY_BUFFER_BINDING: " + gl.getParameter(gl.ARRAY_BUFFER_BINDING);
   this.eDebug.innerHTML +="<br />gl.BLEND: " + gl.getParameter(gl.BLEND); 
   this.eDebug.innerHTML +="<br />gl.BLEND_COLOR: " + gl.getParameter(gl.BLEND_COLOR);
   this.eDebug.innerHTML +="<br />gl.BLEND_DST_ALPHA: " + gl.getParameter(gl.BLEND_DST_ALPHA); 
   this.eDebug.innerHTML +="<br />gl.BLEND_DST_RGB: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />gl.BLEND_EQUATION: " + gl.getParameter(gl.VENDOR); 
   this.eDebug.innerHTML +="<br />gl.BLEND_EQUATION: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />gl.BLEND_EQUATION_RGB: " + gl.getParameter(gl.VENDOR);
 
   this.eDebug.innerHTML +="<br />gl.BLEND_SRC_ALPHA: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />gl.BLEND_SRC_RGB: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />gl.BLUE_BITS: " + gl.getParameter(gl.VENDOR); 
   this.eDebug.innerHTML +="<br />gl.COLOR_CLEAR_VALUE: " + gl.getParameter(gl.VENDOR);
   this.eDebug.innerHTML +="<br />gl.COLOR_WRITEMASK: " + gl.getParameter(gl.VENDOR);
    
   } 
   else {
    this.eDebug+="<br />WebGL is Not Available";
  }
 },

WebGL Method getContextAttributes()

getAttribs: function(){
 var cA = this.gl.getContextAttributes();
 var eDebug = document.getElementById("eDebug");
 eDebug.innerHTML += "*** WebGLContext attributes *** ";
 eDebug.innerHTML += "<br />alpha:"+cA.alpha;
 eDebug.innerHTML += "<br />antialias:"+cA.antialias;
 eDebug.innerHTML += "<br />depth:"+cA.depth;
 eDebug.innerHTML += "<br />stencil:"+cA.stencil;
 eDebug.innerHTML += "<br />premultipliedAlpha:"+cA.premultipliedAlpha;
 eDebug.innerHTML += "<br />preserveDrawingBuffer:"+cA.preserveDrawingBuffer;
 eDebug.innerHTML += "<br />failIfMajorPerformanceCaveat:"+cA.failIfMajorPerformanceCaveat;
},
 
};

Random WebGL Tests

Call the WebGL API method getError() along with some other random tests. Feel free to add your own tests.

  
/**
 * Call WebGL method
 * getError(), also
 * test some random
 * WebGL features for
 * errors.
 */
getGLErrors: function(){
 
 var gl = this.gl;
 var nReturn = null;
 var bErrors = false;
 var s = new String("<br /><br />*** WebGLRenderingContext Errors ***<br />");
 
if (gl == null){
 s +="<br />WebGLRenderingContext is null or undefined.";
 bErrors = true;
}

else {
 
 if (gl.drawingBufferWidth <= 0){
  s +="<br />WebGL drawingBufferWidth is less than or equal to zero.";
  bErrors = true;
 }
 
 if(gl.drawingBufferWidth == undefined || gl.drawingBufferWidth == null){
  s +="<br />WebGL drawingBufferWidth is null or undefined: "+gl.drawingBufferWidth;
  bErrors = true;
 }
 
 if(gl.getError() != gl.NO_ERROR){
  s +="<br />WebGL returned an error:"+gl.getError();
  bErrors = true;
 }
 
 if(window.requestAnimationFrame == null){
  s +="<br />requestAnimationFrame isn't available";
  bErrors = true;
 }
 }
   
 if (bErrors == false){
  s +="<br />No errors were recorded with this brief test.";
 }
   
 this.eDebug.innerHTML += s;
},

};