CODEWITHSUNDEEP
javascriptwebgl
Cristian
Cristian

Reputation: 1478

Object-oriented WebGL context wrapper fails

I'm starting to develop with WebGL and know little JavaScript. I'm trying to make a class to take care of managing the WebGL context.

I have the following: My HTML page:

<!DOCTYPE html>
<html>
   <head>
      <title> Star WebGL  </title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <link rel="stylesheet" type="text/css" href="estilos/main.css">

      <script type="text/javascript" src="libs/webgl-debug.js"></script>
      <script type="text/javascript" src="libs/clases/Contexto.js"></script>
      <script type="text/javascript" src="libs/applicacion.js"></script>
   </head>

   <body>
      <canvas class="screen" id="screen-canvas"  width="640" height="480">
          </canvas>  
   </body>

</html>

The class Contexto.js:

function Contexto( Canvas )
{
    this.canvas = Canvas;
    this.contextoGL;
    this.contexto_creado = false;   
}

Contexto.prototype.crearContextoWebGL = function ()
{
   try
   {        
      this.contextoGL  = WebGLDebugUtils.makeDebugContext( this.canvas.getContext( "webgl" ) );
      if( !this.contextoGL )
        this.contexto_creado = false;
      else
        this.contexto_creado = true;
   }
   catch( e)
   {
      console.log( "No se puede crear un contexto gl" );
   }
};

Contexto.prototype.contextoCreado = function ()
{
   return this.contexto_creado;
};

Contexto.prototype.getGL = function ()
{
   return this.contextoGL;
};

Contexto.prototype.setColor = function(  r,g,b,a )
{
   this.contextoGL.clearColor( r,g,b,a );   
};

The class applicacion.js:

window.onload = main;

function main()
{
   var canvas = document.getElementById( "screen-canvas");
   var contextoWebGL = new Contexto( canvas );
   contextoWebGL.crearContextoWebGL();
   console.log( contextoWebGL.contextoCreado() );
   contextoWebGL.setColor(  0.5161561076529324, 1, 0.7, 1  );
}

When I try to change the background,

 contextoWebGL.setColor(  0.5161561076529324, 1, 0.7, 1  )

I get the following error:

 Uncaught TypeError: Object #<Object> has no method 'clearColor'

What is the correct code to create an object-oriented context?

When using object-oriented code in JavaScript applications, is efficiency affected?

Upvotes: 1

Views: 639

Answers (1)

Kevin Reid
Kevin Reid

Reputation: 43733

There are two problems here: you are not obtaining a context, and you are not handling that failure correctly.

  1. WebGLDebugUtils.makeDebugContext does not test whether it is given an actual context, so if getContext returns null, it produces a useless object that behaves as you are seeing. You should first test whether you successfully obtained a WebGL context, and only then wrap it using makeDebugContext.

    this.contextoGL = this.canvas.getContext( "webgl" );
if( !this.contextoGL ) {
    this.contexto_creado = false;
} else {
    this.contexto_creado = true;
    this.contextoGL = WebGLDebugUtils.makeDebugContext( this.contextoGL );
}

    This will cause your code to correctly report that it failed to obtain a context. This structure also makes it easier to choose not to use the debug context, for better performance.

  2. In order to obtain a WebGL context successfully, you probably want to try the name "experimental-webgl" as well as "webgl". Chrome, for example, does not support the context name "webgl".

Upvotes: 2

Related Questions