Databases
StackOverflow2013
Postsdbo
POObject-oriented WebGL context wrapper fails
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POObject-oriented WebGL context wrapper fails
    text
    copied!<p>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.</p> <p>I have the following: My HTML page:</p> <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Star WebGL &lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt; &lt;link rel="stylesheet" type="text/css" href="estilos/main.css"&gt; &lt;script type="text/javascript" src="libs/webgl-debug.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="libs/clases/Contexto.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="libs/applicacion.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas class="screen" id="screen-canvas" width="640" height="480"&gt; &lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>The class <code>Contexto.js</code>:</p> <pre class="lang-js prettyprint-override"><code>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 ); }; </code></pre> <p>The class <code>applicacion.js</code>:</p> <pre class="lang-js prettyprint-override"><code>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 ); } </code></pre> <p>When I try to change the background,</p> <pre class="lang-js prettyprint-override"><code> contextoWebGL.setColor( 0.5161561076529324, 1, 0.7, 1 ) </code></pre> <p>I get the following error:</p> <pre class="lang-none prettyprint-override"><code> Uncaught TypeError: Object #&lt;Object&gt; has no method 'clearColor' </code></pre> <p>What is the correct code to create an object-oriented context?</p> <p>When using object-oriented code in JavaScript applications, is efficiency affected?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload