WebGLMathDevice is not defined
joaomilho opened this issue · comments
Just followed the tutorial in the README and I have positive results in the first 2 examples (yellow canvas and spinning wood box). In the third one I have a black screen and this in my JS Console (Chrome):
No turbulenz services debug.js:53
Uncaught ReferenceError: WebGLMathDevice is not defined turbulenzengine.js:117
There is no 404 on any JS file, and yes, I'm accessing the file through the python simple http server. Attached the HTML anyway.
Any idea?
(The HTML below just in case)
<html>
<head>
<title>Turbulenz - API - Textured Mesh Example</title>
<script>
var TurbulenzEngine = {};
</script>
<script src="jslib/debug.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script>
<script src="jslib/webgl/inputdevice.js"></script>
<script src="jslib/webgl/sounddevice.js"></script>
<script src="jslib/aabbtree.js"></script>
<script src="jslib/assettracker.js"></script>
<script src="jslib/camera.js"></script>
<script src="jslib/draw2d.js"></script>
<script src="jslib/effectmanager.js"></script>
<script src="jslib/fontmanager.js"></script>
<script src="jslib/forwardrendering.js"></script>
<script src="jslib/geometry.js"></script>
<script src="jslib/indexbuffermanager.js"></script>
<script src="jslib/light.js"></script>
<script src="jslib/loadingscreen.js"></script>
<script src="jslib/material.js"></script>
<script src="jslib/observer.js"></script>
<script src="jslib/renderingcommon.js"></script>
<script src="jslib/requesthandler.js"></script>
<script src="jslib/resourceloader.js"></script>
<script src="jslib/scene.js"></script>
<script src="jslib/scenenode.js"></script>
<script src="jslib/shadermanager.js"></script>
<script src="jslib/shadowmapping.js"></script>
<script src="jslib/soundmanager.js"></script>
<script src="jslib/texturemanager.js"></script>
<script src="jslib/utilities.js"></script>
<script src="jslib/vertexbuffermanager.js"></script>
<script src="jslib/vmath.js"></script>
<script src="jslib/services/turbulenzbridge.js"></script>
<script src="jslib/services/turbulenzservices.js"></script>
<script src="jslib/services/gamesession.js"></script>
<script src="jslib/services/mappingtable.js"></script>
<script src="protolib/duimanager.js"></script>
<script src="protolib/jqueryextend.js"></script>
<script src="protolib/simplesprite.js"></script>
<script src="protolib/simplefonts.js"></script>
<script src="protolib/simplesceneloader.js"></script>
<script src="protolib/debugdraw.js"></script>
<script src="protolib/sceneloader.js"></script>
<script src="protolib/soundsourcemanager.js"></script>
<script src="protolib/protolib.js"></script>
</head>
<body>
<canvas id="canvas" width="640px" height="480px"/>
<script>
TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
});
var mathDevice = null;
var mesh = null;
var rotationMatrix = null;
var rotationAngleMatrix = null;
var protolib = Protolib.create({
onInitialized: function onIntializedFn(protolib)
{
mathDevice = protolib.getMathDevice();
protolib.setCameraPosition(mathDevice.v3Build(0, 1, -2));
protolib.setCameraDirection(mathDevice.v3Build(0, 0, 1));
protolib.setAmbientLightColor(mathDevice.v3Build(1, 1, 1));
protolib.addPointLight({
v3Position: mathDevice.v3Build(-1, 1, -1),
v3Color: mathDevice.v3Build(1, 1, 1),
radius: 10
});
mesh = protolib.loadMesh({
mesh: "models/duck.dae"
});
rotationMatrix = mathDevice.m43BuildIdentity();
rotationAngleMatrix = mathDevice.m43BuildIdentity();
mathDevice.m43SetAxisRotation(rotationAngleMatrix,
mathDevice.v3Build(0, 1, 0),
(Math.PI * 2) / 360);
}
})
function update() {
if (protolib.beginFrame())
{
if (mesh)
{
mesh.getRotationMatrix(rotationMatrix);
mathDevice.m43Mul(rotationMatrix, rotationAngleMatrix, rotationMatrix);
mesh.setRotationMatrix(rotationMatrix);
}
protolib.endFrame();
}
}
TurbulenzEngine.setInterval(update, 1000 / 60);
</script>
</body>
</html>
That HTML page is missing a file, it needs to include mathdevice.js:
<script src="jslib/webgl/mathdevice.js"></script>
I will fix the README.
Readme updated. Will be included in next Open Source release.
Also following the readme, same error but with something extra before it:
- Uncaught ReferenceError: VMath is not defined
(anonymous function) @ mathdevice.js:5 - Uncaught ReferenceError: WebGLMathDevice is not defined
WebGLTurbulenzEngine.createMathDevice @ turbulenzengine.js:118
Looking true the code it seems the include order of the javascript files is off ?
Fails:
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script>
<script src="jslib/webgl/inputdevice.js"></script>
<script src="jslib/webgl/sounddevice.js"></script>
<script src="jslib/webgl/mathdevice.js"></script>
...
<script src="jslib/vmath.js"></script>
Works:
...
<script src="jslib/vmath.js"></script>
<script src="jslib/webgl/turbulenzengine.js"></script>
<script src="jslib/webgl/graphicsdevice.js"></script>
<script src="jslib/webgl/inputdevice.js"></script>
<script src="jslib/webgl/sounddevice.js"></script>
<script src="jslib/webgl/mathdevice.js"></script>
Might be that the includes need to happen even later, first time user so not sure if the changes to include order correct now.
same problem here, NemoPersona solution worked for me.
I moved "script src="jslib/vmath.js"></script" like he said, but this will cause any another problem?
Indeed the vmath include should be further up. I've updated the README.
Closing for now. Thanks guys.