<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Scene (NoMap)</title>

    <script type='text/javascript' src='js/jquery/jquery-3.1.1.js'></script>
    <script type='text/javascript' src='js/x3dom/x3dom-full.debug.js'></script>

<!--     <script type='text/javascript' src='js/nomap_vr_init.js'></script> -->

    <link rel='stylesheet' type='text/css' href='js/x3dom/x3dom.css'></link>

    <style type='text/css'>
        body {margin:0; padding:0; background-color:#04344c; background-color:#ddeeff; }
        .stereo-view {float:left; }
        .stereo-view x3d {float:left; }
    </style>
    <script>
        // Get display size
        var deviceOrientation = 'portrait';
        notFirstTime = false;
        //alert ('Checking device orientation and display size');
        while (deviceOrientation == 'portrait') {
            insideWidth = window.innerWidth;
            insideHeight = window.innerHeight;
            if (insideWidth > insideHeight) {deviceOrientation = 'landscape';}
            if (notFirstTime) {alert ("Please oriention device to landscape and press 'OK'");}
            notFirstTime = true;
        }
        x3dWidth = Math.floor((insideWidth-12)/2);
        x3dHeight = insideHeight;
        //x3dHeight = x3dHeight/2;
        x3dHeight = x3dHeight - 2;
    </script>
  </head>
  <body>
    <div class='stereo-view-1'>
        <!--view-source:http://realism.com/sample/model/stereo/VAM_246-1-1870/model-ig0b75.x3d?=&headlight=true&ipd=30&%20=-->
        <!--view-source:http://realism.com/x3d-examples/HTML5-Fall2014/stereo/kelpie.sgl.html -->

        <script>
            document.writeln ("<x3d id='all_view' showStat='false' showLog='false' disableDoubleClick='true' keysEnabled='true' x='0px' y='0px' width='"+(2*x3dWidth)+"px' height='"+x3dHeight+"px'>");
            var x3dDimStr = x3dWidth + ' ' + x3dHeight + ' 4';
        </script>

        <scene>
            <navigationInfo type='"EXAMINE" "WALK"'></navigationInfo>
	
            <background DEF='bgnd'
                backUrl=  "js/images/background_side.jpeg"
                bottomUrl="js/images/background_floor.jpeg"
                frontUrl= "models/1488240695_710844/V0/1488240695_710844-texture-bgnd-ext.jpeg"
                leftUrl=  "js/images/background_side.jpeg"
                rightUrl= "js/images/background_side.jpeg"
                topUrl=   "js/images/background_sky.jpeg">
            </background>

            <transform translation='0 0 0' rotation='0 1 0 0'>
                <viewpoint DEF='viewpoint' id='x3d_viewpoint' position='0 0 0' orientation='0 1 0 0' zNear='0.001' zFar='2000'></viewpoint>
            </transform>

            <group id='unrendered_scene' render='false'>
                <group DEF='scene'>
                    <transform DEF='Viewpoint-Left'  id='x3d_viewpoint'       translation='0 0 0' rotation='0 1 0 0'>
                    <transform DEF='Viewpoint-gamma' id='x3d_viewpoint_gamma' translation='0 0 0'  rotation='0 1 0 0'>
                    <transform DEF='Viewpoint-beta'  id='x3d_viewpoint_beta'  translation='0 0 0'  rotation='1 0 0 0'>
                    <transform DEF='Viewpoint-alpha' id='x3d_viewpoint_alpha' translation='0 0 0'  rotation='0 0 1 0'>
                    <transform translation='0 0 0'>	<!-- account for model center != center-of-mass -->
                        <inline url='models/1488240695_710844/V0/1488240695_710844.x3d'></inline>
                    </transform>
                    </transform>
                    </transform>
                    </transform>
                    </transform>
                </group>
            </group>

            <group DEF='left' render='true'>
                <shape>
                    <appearance>
                        <!-- The dimensions is the size of each display side -->
                        <script>
                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtLeft' stereoMode='LEFT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                        </script>

                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>

                        <background USE='bgnd' containerField='background'></background>

                        <group USE='scene' containerField="scene"></group>

                    </renderedTexture>

                    <composedShader>
                        <field name='tex' type='SFInt32' value='0'></field>
                        <field name='leftEye' type='SFFloat' value='1'></field>
                        <shaderPart type='VERTEX'>
                            attribute vec3 position;
                            attribute vec2 texcoord;

                            uniform mat4 modelViewProjectionMatrix;
                            varying vec2 fragTexCoord;

                            void main()
                            {
                                vec2 pos = sign(position.xy);
                                fragTexCoord = texcoord;
                                gl_Position = vec4((pos.x/2.0)-0.5, pos.y, 0.0, 1.0);
                            }
                        </shaderPart>
                        <!-- The division of pos.x relates to the fraction of the window that is used -->
                        <shaderPart DEF="frag" type='FRAGMENT'>
                            #ifdef GL_ES
                            precision highp float;
                            #endif

                            uniform sampler2D tex;
                            uniform float leftEye;
                            varying vec2 fragTexCoord;

                            void main()
                            {
                                gl_FragColor = texture2D(tex, fragTexCoord);
                            }
                        </shaderPart>
                    </composedShader>
                    </appearance>
                    <plane solid="false"></plane>
                </shape>
            </group>		<!-- End of tag for left window -->

            <group DEF='right'>
                <shape>
                    <appearance>
                        <script>
                            document.writeln ("<renderedTexture interpupillaryDistance='0.3' id='rtRight' stereoMode='RIGHT_EYE' update='ALWAYS' dimensions='"+x3dDimStr+"' repeatS='false' repeatT='false'>");
                        </script>

                        <viewpoint USE='viewpoint' containerField='viewpoint'></viewpoint>

                        <background USE='bgnd' containerField='background'></background>

                        <group USE='scene' containerField="scene"></group>

                    </renderedTexture>

                    <composedShader>
                        <field name='tex' type='SFInt32' value='0'></field>
                        <field name='leftEye' type='SFFloat' value='0'></field>
                        <shaderPart type='VERTEX'>
                            attribute vec3 position;
                            attribute vec2 texcoord;

                            uniform mat4 modelViewProjectionMatrix;
                            varying vec2 fragTexCoord;

                            void main()
                            {
                                vec2 pos = sign(position.xy);
                                fragTexCoord = texcoord;
                                gl_Position = vec4((pos.x + 1.0)/2.0, pos.y, 0.0, 1.0);
                            }
                        </shaderPart>
                        <shaderPart USE="frag" type='FRAGMENT'>
                        </shaderPart>
                    </composedShader>
                    </appearance>
                    <plane solid="false"></plane>
                </shape>
            </group>
        </scene>
        </x3d>
    </div>

    <script language='JavaScript'>
        // --> Check to see if there are DeviceOrientation events in the DOM

        var previousAngles = {'alpha':0, 'beta':0, 'gamma':0};
        var vectors = {'alpha':"0 1 0 ", 'beta':"1 0 0 ", 'gamma':"0 0 1 "};
        var deg2rad = Math.PI / 180;

        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', function(eventData) {
                gamma = eventData.gamma;
		beta = eventData.beta;
		alpha = 360-eventData.alpha;
		rotate (alpha, 'alpha');
		rotate (beta,  'beta');
		rotate (gamma, 'gamma');
            }, false);
        }else{
            alert ('No Device Motion Sensor');
        }

        function rotate (angle, label) {
            intAngle = Math.floor(angle + 0.5);
            if (intAngle == previousAngles[label]) {return; }
            previousAngles[label] = intAngle;

            if (label == 'alpha') {
		rotateView ("x3d_viewpoint_"+label, vectors[label]+" "+intAngle*deg2rad);
//              rotateView ("x3d_viewpointR_"+label, vectors[label]+" "+intAngle*deg2rad);
//              rotateView ("x3d_viewpointL_"+label, vectors[label]+" "+intAngle*deg2rad);
            }
        }

        function rotateView (label, vector) {
            view = document.getElementById(label);
            view.setAttribute('set_rotation',vector);
        }
    </script>
  </body>
</html>