我开始使用WebGL开发并且知道很少的JavaScript。我正在尝试创建一个类来管理WebGL上下文。
我有以下内容:我的HTML页面:
<!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>
班级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 );
};
班级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 );
}
当我尝试更改背景时,
contextoWebGL.setColor( 0.5161561076529324, 1, 0.7, 1 )
我收到以下错误:
Uncaught TypeError: Object #<Object> has no method 'clearColor'
创建面向对象的上下文的正确代码是什么?
在JavaScript应用程序中使用面向对象的代码时,是否会影响效率?
答案 0 :(得分:2)
这里有两个问题:您没有获得上下文,而且您没有正确处理该错误。
WebGLDebugUtils.makeDebugContext
不测试是否给出了实际上下文,因此如果getContext
返回null,则会生成一个无用的对象,其行为与您所看到的一样。您应首先测试是否已成功获取WebGL上下文,然后使用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 );
}
这将导致您的代码正确报告无法获取上下文。此结构还使得更容易选择不使用调试上下文,以获得更好的性能。
为了成功获得WebGL上下文,您可能想要尝试名称“experimental-webgl”以及“webgl”。例如,Chrome不支持上下文名称“webgl”。