WebGLMathDevice is not defined

joaomilho commented 10 years ago

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>

davidgaleano commented 10 years ago

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.

ianballantyne commented 10 years ago

Readme updated. Will be included in next Open Source release.

ghost commented 9 years ago

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.

leonardopaiva commented 8 years ago

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?

dtebbs commented 8 years ago

Indeed the vmath include should be further up. I've updated the README. Closing for now. Thanks guys.

turbulenz / turbulenz_engine

WebGLMathDevice is not defined #36