Desktop

In this guide you'll learn how to add lights to the scene and how to use the different render methods in ayceVR.

There are three different display modes in ayceVR. While the desktop renderer lets you display your scene as a single view the VR renderer duplicates and renders a stereoscopic view of your scene. It also creates the necessary cameras needed for VR rendering.
Furthermore you can enable distorted rendering to correct the distortion caused by your headset's lenses. Note that this requires a capable device to maintain a high frame rate.

If you want to know how to configure the IPD (pupillary distance) and receive HMD motion input check out the guide on ayceVR camera modifiers.

    scene.setClearColor(0.2, 0.2, 0.35);
    scene.setAmbientLight(0.6, 0.8, 0.6);

    var light = new Ayce.Light();
    light.position.set(1, 0, 2);
    light.color.red = 1.0;
    light.color.green = 0.0;
    light.color.blue = 1.0;
    scene.addToScene(light);

To demonstrate how adding lights and the different renderers work we will make some changes to the code from guide one. You can find the complete code at the end of this guide or download it here.

First let's change the background color of your scene by calling .setClearColor(red, green, blue). We will also add an ambient light which illuminates the cube in a greenish color.
Then we're creating a purple point light starting with a new Ayce.Light object, setting its attributes and adding it to the scene. We're creating a second light the same way, this time a yellow one. Adding lights is very similar to adding an O3D.
It's recommended to add all lights during scene initialization. Even though ayceVR can handle lights that are added during runtime, performance will be much better if you're adding them before rendering. This will also prevent lag spikes.

    var counter = 0;
    var i = 0;

    function update() {
        counter++;
        if (counter > 250) {
            i = (i+1) % 3;
            if (i === 0) scene.setRendererDesktop();
            if (i === 1) scene.setRendererVR(false);
            if (i === 2) scene.setRendererVR(true);
            counter = 0;
        }
        ...

You can switch between the three different render methods by changing only one command. To use the VR renderer use .setRendererVR(distortion). The boolean argument distortion specifies if distortion correction should be applied. It can be set false or left blank for undistorted rendering.
If true is passed, the distorted VR renderer will be used.
Using .setRendererDesktop() the renderer is set to single view rendering.

To enable WebVR use the scene.useWebVR() function. It will return true if the browser supports WebVR and the initialization was successful. It will also set the right renderer and camera modifiers for the scene. Read on about camera modifiers here.

...
    <script>
        var canvas = document.getElementById("ayce_canvas");
        var scene = new Ayce.Scene(canvas);
        scene.setClearColor(0.2, 0.2, 0.35);
        scene.setAmbientLight(0.6, 0.8, 0.6);

        var light = new Ayce.Light();
        light.position.set(1, 0, 2);
        light.color.red = 1.0;
        light.color.green = 0.0;
        light.color.blue = 1.0;
        scene.addToScene(light);

        var light2 = new Ayce.Light();
        light2.position.set(-1, 0, 2);
        light2.color.red = 1.0;
        light2.color.green = 1.0;
        light2.color.blue = 0.0;
        scene.addToScene(light2);

        var cube = new Ayce.Geometry.Box(1, 1, 1);
        cube.offset.set(-cube.a / 2.0, -cube.b / 2.0, -cube.c / 2.0);
        cube = cube.getO3D();
        cube.position.z = -2;
        scene.addToScene(cube);

        var counter = 0;
        var i = 0;

        function update() {
            counter++;
            if (counter > 250) {
                i = (i+1) % 3;
                if (i === 0) scene.setRendererDesktop();
                if (i === 1) scene.setRendererVR(false);
                if (i === 2) scene.setRendererVR(true);
                counter = 0;
            }
            var y = (Date.now() / 2000) % Math.PI * 2.0;
            cube.rotation.fromEulerAngles(0, y, 0);
            Ayce.requestAnimFrame(update);
            scene.updateScene();
            scene.drawScene();
        }

        update();
    </script>
    ...

Complete Code