Skip to content

Commit

Permalink
Added files via upload
Browse files Browse the repository at this point in the history 
Initial population of library (display.js) and example (example.html)
  • Loading branch information
@DRx3D
DRx3D committed Mar 11, 2016
1 parent d1398fc commit 9761acc
Show file tree
Hide file tree
Showing 2 changed files with 314 additions and 0 deletions.
137 changes: 137 additions & 0 deletions display.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
// --> Holds information about an X3D scene that can be used for device-controlled display orientation
function DeviceDisplay (x3dId, transformCompass, transformTilt, transformSpin, name, active, rlt, rrt) {
if (x3dId == '') {return null; }
this.x3d = x3dId;
this.id = new Object();
this.objects = new Array();
this.activeObject = -1;
this.addObject = function (compass, tilt, spin, name, active) {
if (compass == '') {return;}
if (tilt == '') {return; }
if (spin == '') {return; }
this.objects[this.objects.length] = {'compass':compass, 'tilt':tilt, 'spin':spin, 'name':name};
if (active) {this.activeObject = this.objects.length-1; }
};
this.addObject(transformCompass, transformTilt, transformSpin, name, active);

this.mode = 'mono';
if (arguments.length == 8) {
this.id.renderLeft = rlt;
this.id.renderRight = rrt;
this.mode = 'stereo';
}
return this;
}

degreeToRadiansFactor = Math.PI / 180;
function deg2rad(deg){return deg * degreeToRadiansFactor;}

// --> There can be only one stereo display. This section defines the global object
var Stereo = {
'name':'DeviceDisplay',
'version':1,
'type':'mobile',
'x3d':null,
'runtime':null,
'mode':'mono',
'view':{'left':null,'right':null},
'last':{'W':0,'H':0},
'orientation':{
'sensor':0,
'device':{'alpha':0,'beta':0,'gamma':0},
'screen':null,
'transform':{'compass':null, 'tilt':null, 'spin':null}
}
};
window.orientation = 0;

if (window.DeviceOrientationEvent) {
Stereo.orientation.sensor = 1;
if (window.orientation == null) {window.orientation = 180;}
window.addEventListener('deviceorientation',
function(eventData) {
Stereo.orientation.device.alpha = 360-eventData.alpha;
Stereo.orientation.device.beta = -eventData.beta;
Stereo.orientation.device.gamma = eventData.gamma + 90;
if (eventData.gamma < 0) {
Stereo.orientation.device.gamma = -Stereo.orientation.device.gamma;
}
Stereo.orientation.device.gamma = -Stereo.orientation.device.gamma;
},
false);
// --> Orientation notes
// 0) This is for Chrome. Firefox does not follow the same conventions!
// 1) Computed rotations are about transformed object coordinates
} else {
alert ('No Device Motion Sensor');
}

// --> Loads a particular X3D scene for stereogrpahic display.
// o must be a DeviceDisplay object
// Stereo is the global object for the stereo display
function loadStereographic (o) {
Stereo.element = document.getElementById(o.x3d);
Stereo.runtime = Stereo.element.runtime;

Stereo.orientation.transform.compass = document.getElementById(o.objects[o.activeObject].compass);
Stereo.orientation.transform.tilt = document.getElementById(o.objects[o.activeObject].tilt);
Stereo.orientation.transform.spin = document.getElementById(o.objects[o.activeObject].spin);
if (o.mode == 'stereo') {
Stereo.view.left = document.getElementById(o.id.renderLeft);
Stereo.view.right = document.getElementById(o.id.renderRight);
Stereo.last.W = +Stereo.runtime.getWidth();
Stereo.last.H = +Stereo.runtime.getHeight();
hw = Math.round(Stereo.last.W / 2);
Stereo.view.left.setAttribute('dimensions', hw + ' ' + Stereo.last.H + ' 4');
Stereo.view.right.setAttribute('dimensions', hw + ' ' + Stereo.last.H + ' 4');
Stereo.mode = 'stereo';
}

Stereo.runtime.exitFrame = function () {
if (! Stereo.orientation.sensor) return;

if (Stereo.mode == 'stereo') {
var w = +Stereo.runtime.getWidth();
var h = +Stereo.runtime.getHeight();
if (w != Stereo.last.W || h != Stereo.last.H)
{
var half = Math.round(w / 2);
Stereo.view.left.setAttribute('dimensions', half + ' ' + h + ' 4');
Stereo.view.right.setAttribute('dimensions', half + ' ' + h + ' 4');
Stereo.last.W = w;
Stereo.last.H = h;
}
}

newOrientation = '0 1 0 ' + deg2rad(Stereo.orientation.device.alpha);
Stereo.orientation.transform.compass.setAttribute("rotation", newOrientation);

newOrientation = '1 0 0 ' + deg2rad(Stereo.orientation.device.gamma);
Stereo.orientation.transform.tilt.setAttribute("rotation", newOrientation);

newOrientation = '0 0 1 ' + deg2rad(Stereo.orientation.device.beta);
Stereo.orientation.transform.spin.setAttribute("rotation", newOrientation);
}
};
function fullscreen(cb) {
//lens center auf null setzten
Stereo.view.left = document.getElementById(cb.id.renderLeft);
Stereo.view.right = document.getElementById(cb.id.renderRight);
Stereo.view.left._x3domNode.lensCenter = 0;
Stereo.view.right._x3domNode.lensCenter = 0;

//fullscreen aktivieren
if (Stereo.element.requestFullscreen) {
alert ('General fullscreen');
Stereo.element.requestFullscreen();
} else if (Stereo.element.msRequestFullscreen) {
alert ('Microsoft fullscreen');
Stereo.element.msRequestFullscreen();
} else if (Stereo.element.mozRequestFullScreen) {
alert ('Mozilla fullscreen');
Stereo.element.mozRequestFullScreen();
} else if (Stereo.element.webkitRequestFullscreen) {
alert ('Webkit fullscreen');
Stereo.element.webkitRequestFullscreen();
}
}
177 changes: 177 additions & 0 deletions example.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<html>
<!--
See http://realism.com/blog/tracking-device-motion for a description of this example.
You will also need to download
* x3dom.js
* x3dom.css
* jQuery.js (any recent version)
to the same directory as this file.
x3dom needs to be at least V1.5. You can get the library at http://x3dom.org/
-->
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<script type="text/javascript" src="x3dom.js"></script>
<link rel='stylesheet' type='text/css' href='x3dom.css'>
<script src="jQuery.js"></script>

<style type='text/css' media='all'>
#goFullScreen {font-size:200%; font-weight:bold; position:absolute; height30px; width:200px; border:1 solid black; background-color:white; border-radius:7px; z-index:2; top:20px; left:20px; text-align:center; padding:10px 0 10px 0; }
</style>
</head>

<body style='width:100%; height:100%; border:0; margin:0; padding:0;'>
<div id='goFullScreen'>Go Full Screen</div>
<x3d id='x3dElement' showStat='false' showLog='false' style='width:100%; height:100%; border:0; margin:0; padding:0;'>
<scene id='scene'>
<!-- set the value of headlight as needed -->
<navigationInfo headlight='TRUE' type='"EXAMINE" "WALK"'></navigationInfo>
<!-- set the value of position as needed to match the scale of the model -->
<viewpoint centerOfRotation='0 0 0' position='0 0 10'></viewpoint>
<background DEF='bgnd' skyColor="0.4 0.4 0.5"></background>
<group id='root' render='true'>
<group DEF='theScene'>
<Transform id='orient-spin' DEF='RotateObjectAlpha' rotation='0 1 0 0' translation='0 0 0'>
<Transform id='orient-tilt' DEF='RotateObjectGamma' rotation='0 1 0 0' translation='0 0 0'>
<Transform id='orient-compass' DEF='RotateObjectBeta' rotation='0 1 0 0' translation='0 0 0'>
<Transform DEF='Reposition' translation='0 0 0'>
<!-- Change the url to correspond to your model's X3D file or uncomment the simple model -->
<Inline url='YourModel.x3d'></Inline>
<!-- Simple model. If you are going to use this, make sure to comment or remove the above Inline node -->
<!--
<Group>
<Transform translation='-2 0 0'>
<Shape>
<Box size='2 2 2'></Box>
<Appearance>
<Material diffuseColor="1 0 0"></Material>
</Appearance>
</Shape>
<Transform translation='0 2 0'>
<Shape>
<Cone heigh='1' bottomRadius='1'></Cone>
<Appearance>
<Material diffuseColor="1 1 0"></Material>
</Appearance>
</Shape>
</Transform>
</Transform>
<Transform translation='2 0 0'>
<Shape>
<Sphere radius='1'></Sphere>
<Appearance>
<Material diffuseColor="0 0 1"></Material>
</Appearance>
</Shape>
</Transform>
<Transform translation='0 0 -3'>
<Shape>
<Cylinder height='2' radius='1'></Cylinder>
<Appearance>
<Material diffuseColor="0 1 0"></Material>
</Appearance>
</Shape>
</Transform>
</Group>
-->
</Transform>
</Transform>
</Transform>
</Transform>
</group>
</group>

<group DEF='left'>
<shape>
<appearance>
<renderedTexture interpupillaryDistance="0.03" id="rtLeft" stereoMode="LEFT_EYE" update='ALWAYS'
dimensions='480 320 4' repeatS='false' repeatT='false'>
<viewpoint USE='vp' containerField='viewpoint'></viewpoint>
<background USE='bgnd' containerField='background'></background>
<group USE='theScene' 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>
<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>
<group DEF='right'>
<shape>
<appearance>
<renderedTexture interpupillaryDistance="0.03" id="rtRight" stereoMode="RIGHT_EYE" update='ALWAYS'
dimensions='480 320 4' repeatS='false' repeatT='false'>
<viewpoint USE='vp' containerField='viewpoint'></viewpoint>
<background USE='bgnd' containerField='background'></background>
<group USE='theScene' 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>

<!--
Load the display.js library and activate the orientation manager (DeviceDisplay). See http://realism.com/blog/tracking-device-motion
for a description of the library interface.
-->
<script type="text/javascript" src="display.js"></script>
<script type="text/javascript">
cb = new DeviceDisplay ('x3dElement', 'orient-compass', 'orient-tilt', 'orient-spin', 'Shapes', true, 'rtLeft', 'rtRight');
document.onload = function() {loadStereographic(cb); fullscreen(cb);};
jQuery("#goFullScreen").click(function() {fullscreen(cb);});
</script>
</body>
</html>

0 comments on commit 9761acc

Please sign in to comment.