Skip to content

Commit

Permalink
Wrapping up a bunch of work on external loading, object tracking, and…
Browse files Browse the repository at this point in the history
… external camera background.
  • Loading branch information
RealismCloud committed Jun 27, 2018
1 parent 9b10cab commit 8fdb047
Show file tree
Hide file tree
Showing 42 changed files with 17,031 additions and 416 deletions.
342 changes: 264 additions & 78 deletions Release/XSeen.0.7.js

Large diffs are not rendered by default.

211 changes: 131 additions & 80 deletions Release/XSeen.0.7.min.js

Large diffs are not rendered by default.

342 changes: 264 additions & 78 deletions Release/XSeen.js

Large diffs are not rendered by default.

211 changes: 131 additions & 80 deletions Release/XSeen.min.js

Large diffs are not rendered by default.

8 changes: 3 additions & 5 deletions src/Tag.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ XSeen.Parser = {
'sceneInfo' : mutation.target._xseen.sceneInfo, // Runtime...
};
XSeen.Parser.Parse (mutation.addedNodes[0], mutation.target);
if (mutation.target.localName == 'x-scene') {
XSeen.Tags.scene.addScene(); // Not the most elegant way to do this... :-(
}
}
}),

Expand Down Expand Up @@ -507,11 +510,6 @@ XSeen.Parser = {
if (svalue == 'f' || svalue == 'false' || svalue == '0') return false;
var ivalue = Boolean (value);
return ivalue;
/*
if (value) {return true;}
if (!value) {return false;}
return def;
*/
},
'vecToFloat3' : function (value, def)
{
Expand Down
30 changes: 17 additions & 13 deletions src/XSeen.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,32 +33,33 @@
* 0.7.21: Added axis-angle parsing for rotation
* 0.7.22: Added additional color type f3 (fractional rgb - direct support for X3D)
* 0.7.23: Added support for external XSeen files in XML format.
* 0.7.24: Added support for device camera use.
*
* Stereo+device should roll back to perspective+orbit if display doesn't have device orientation.
* If that happens than target should not be used
* Stereo camera automatically adds button to go full screen. Add "text" attribute to allow custom text.
* Check background image cube for proper orientation
* Additional PBR
* Fix for style3d (see embedded TODO)
* Audio
* Editor
* Events (add events as needed)
* Labeling (add space positioning)
* Stereo camera automatically adds button to go full screen. Add "text" attribute to allow custom text.
* Stereo+device should roll back to perspective+orbit if display doesn't have device orientation.
* If that happens than target should not be used
* Check background image cube for proper orientation
*
*/

//var Renderer = new THREE.WebGLRenderer();
var Renderer = new THREE.WebGLRenderer({'alpha':true,}); // Sets transparent WebGL canvas
//var Renderer = new THREE.WebGLRenderer({'alpha':true,}); // Sets transparent WebGL canvas

XSeen = (typeof(XSeen) === 'undefined') ? {} : XSeen;
XSeen.Constants = {
'_Major' : 0,
'_Minor' : 7,
'_Patch' : 23,
'_Patch' : 24,
'_PreRelease' : 'alpha.2',
'_Release' : 7,
'_Version' : '',
'_RDate' : '2018-05-20',
'_RDate' : '2018-06-16',
'_SplashText' : ["XSeen 3D Language parser.", "XSeen <a href='http://xseen.org/index.php/documentation/' target='_blank'>Documentation</a>."],
'tagPrefix' : 'x-',
'rootTag' : 'scene',
Expand Down Expand Up @@ -92,15 +93,15 @@ XSeen.parseTable = [];

// Data object for Runtime
// Stereo viewing effect from http://charliegerard.github.io/blog/Virtual-Reality-ThreeJs/
var StereoRenderer = new THREE.StereoEffect(Renderer);
//var StereoRenderer = new THREE.StereoEffect(Renderer);
XSeen.Runtime = {
'currentTime' : 0, // Current time at start of frame rendering
'deltaTime' : 0, // Time since last frame
'frameNumber' : 0, // Number of frame about to be rendered
'Time' : new THREE.Clock(),
'Renderer' : Renderer,
'RendererStandard' : Renderer,
'RendererStereo' : StereoRenderer,
'Renderer' : {},
'RendererStandard' : {},
'RendererStereo' : {},
'Camera' : {},
'CameraControl' : {}, // Camera control to be used in Renderer for various types
'Mixers' : [], // Internal animation mixer array
Expand Down Expand Up @@ -131,17 +132,20 @@ XSeen.Runtime = {
'isVrCapable' : false, // WebVR ready to run && access to VR device
'hasDeviceOrientation' : false, // device has Orientation sensor
'hasVrImmersive' : false, // hasDeviceOrientation && stereographic capable (=== TRUE)
'useDeviceOrientation' : false, // display is using device's Orientation sensor
'isStereographic' : false, // currently running stereographic display (not VR)
'rendererHasControls' : false, // Renderer has built-in motion controls
'isProcessingResize' : false, // semaphore for resizing processing
'mediaAvailable' : !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia), // flag for device media availability
'isTransparent' : false, // flag for XSeen transparent background
}; // Need place-holder for xR scene (if any -- tbd)

XSeen.RenderFrame = function()
{
if (XSeen.Runtime.isProcessingResize) {return;} // Only do one thing at a time

if (XSeen.Runtime.frameNumber == 0) {
if (XSeen.Loader.loadingComplete()) {
if (XSeen.Runtime.frameNumber == 0) { // TODO: Replace with 'dirty' flag. May not need loadingComplete
if (XSeen.Loader.loadingComplete()) { // Code needs to set Runtime.nodeChange whenever nodes are added/removed
XSeen.Tags.scene.addScene();
} else {
return;
Expand Down
173 changes: 132 additions & 41 deletions src/onLoad.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,41 @@ XSeen.onLoad = function() {
loadExternal = function(url, domElement) {
// Method for adding userdata from https://stackoverflow.com/questions/11997234/three-js-jsonloader-callback
//
var xseenCode = '';
var xseenCode = '';
loadExternalSuccess = function (userdata) {
var e = userdata.e;
return function (response) {
console.log('Loading of external XSeen complete');
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(response,"text/xml");
var rootNode = xmlDoc.getElementsByTagName('x-scene');
var nodes = rootNode[0].children;
while (nodes.length > 0) {
console.log('Adding external node: ' + nodes[0].nodeName);
e.appendChild(nodes[0]);
}
}
};
return function (response) {
console.log('Loading of external XSeen complete');
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(response,"text/xml");
var rootNode = xmlDoc.getElementsByTagName('x-scene');
var nodes = rootNode[0].children;
while (nodes.length > 0) {
console.log('Adding external node: ' + nodes[0].nodeName);
e.appendChild(nodes[0]);
}
}
};

if (url != 'test') {
console.log ('External loads not yet supported for ' + url);
var loader = new THREE.FileLoader();
loader.load (url, loadExternalSuccess({'e':domElement}));
//if (url != 'test') {
//console.log ('External loads not yet supported for ' + url);
var loader = new THREE.FileLoader();
loader.load (url,
loadExternalSuccess({'e':domElement}),
// onProgress callback
function ( xhr ) {
console.log('External source loader: ' + (xhr.loaded / xhr.total * 100) + '% loaded' );
},
// onError callback
function ( err ) {
console.log ('Response Code: ' + err.target.status);
console.log ('Response URL: ' + err.target.responseURL);
console.log ('Response Text\n' + err.target.responseText);
console.error( 'External source loader: An error happened' );
}
);

/*
} else {
xseenCode = '' +
"<x-class3d id='geometry'>\n" +
Expand Down Expand Up @@ -80,7 +94,8 @@ XSeen.onLoad = function() {
console.log ('Adding inline-generated nodes');
domElement.insertAdjacentHTML('afterbegin', xseenCode);
}
}
*/
};

var sceneOccurrences, ii;
if (typeof(XSeen._Scenes) === 'undefined') {XSeen._Scenes = [];}
Expand All @@ -103,21 +118,36 @@ XSeen.onLoad = function() {
'name' : 'src',
'default' : '',
'type' : 'string',
'case' : 'sensitive' ,
},
'usecamera' : { // deprecated
'name' : 'usecamera',
'default' : 'false',
'type' : 'boolean',
},
'showstat' : {
'name' : 'showstat',
'default' : 'false',
'type' : 'boolean',
'case' : 'insensitive' ,
},
'showprogress' : {
'name' : 'showprogress',
'default' : 'false',
'type' : 'boolean',
'case' : 'insensitive' ,
},
'transparent' : {
'name' : 'transparent',
'default' : 'false',
'type' : 'boolean',
'case' : 'insensitive' ,
},
'cubetest' : {
'name' : 'cubetest',
'default' : 'false',
'type' : 'boolean',
'case' : 'insensitive' ,
},
};

Expand All @@ -126,7 +156,11 @@ XSeen.onLoad = function() {
if (value == '' || value === null || typeof(value) === 'undefined') {value = attributeCharacteristics[prop].default;}
//console.log ('Checking XSEEN attribute: ' + prop + '; with value: ' + value);
if (value != '') {
XSeen.Runtime.Attributes[attributeCharacteristics[prop].name] = XSeen.Convert.fromString (value.toLowerCase(), attributeCharacteristics[prop].type);
if (attributeCharacteristics[prop].case != 'sensitive') {
XSeen.Runtime.Attributes[attributeCharacteristics[prop].name] = XSeen.Convert.fromString (value.toLowerCase(), attributeCharacteristics[prop].type);
} else {
XSeen.Runtime.Attributes[attributeCharacteristics[prop].name] = XSeen.Convert.fromString (value, attributeCharacteristics[prop].type);
}
}
});

Expand All @@ -136,44 +170,101 @@ XSeen.onLoad = function() {
}


// Setup/define various characteristics for the runtime or display

/** Setup/define various characteristics for the runtime or display
*
* Define Renderer and StereoRenderer
* This was formerly in XSeen, but moved here to support a transparent
* background request either by style or explicit attribute
*/
var Renderer;
if (XSeen.Runtime.Attributes.transparent) {
XSeen.Runtime.isTransparent = true;
} else {
XSeen.Runtime.isTransparent = false;
}
if (XSeen.Runtime.isTransparent) {
Renderer = new THREE.WebGLRenderer({'alpha':true,}); // Sets transparent WebGL canvas
} else {
Renderer = new THREE.WebGLRenderer();
}
XSeen.Runtime.Renderer = Renderer,
XSeen.Runtime.RendererStandard = Renderer,
XSeen.Runtime.RendererStereo = new THREE.StereoEffect(Renderer);
Renderer = null;

XSeen.Logging = XSeen.definitions.Logging.init (XSeen.Runtime.Attributes['showlog'], XSeen.Runtime.RootTag);
XSeen.Runtime.Size = XSeen.updateDisplaySize (XSeen.Runtime.RootTag); // TODO: test
//XSeen.Runtime.Renderer.setPixelRatio( window.devicePixelRatio ); // See https://stackoverflow.com/questions/31407778/display-scene-at-lower-resolution-in-three-js
XSeen.Runtime.Renderer.setSize (XSeen.Runtime.Size.width, XSeen.Runtime.Size.height);
XSeen.Runtime.Renderer.setPixelRatio( window.devicePixelRatio );

XSeen.Runtime.Camera = new THREE.PerspectiveCamera( 75, XSeen.Runtime.Size.aspect, 0.1, 10000 );
XSeen.Runtime.SceneDom = XSeen.Runtime.Renderer.domElement;
XSeen.Runtime.RootTag.appendChild (XSeen.Runtime.SceneDom);

XSeen.Runtime.mediaAvailable = !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia); // flag for device media availability


/*
* Experimental code for device camera
*
* From: https://www.html5rocks.com/en/tutorials/getusermedia/intro/
* https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
*
* Revision plans:
* 1. Remove 'usecamera' x-scene attribute and use element transparency instead.
* a. This is a one-time setting and can't be changed
* b. Camera not allowed unless this is set
* 2. Renderer, StereoRenderer definitions need to go in onLoad
* 3. Runtime definition remains, but many items are populated in onLoad
* 4. x-background specified use of camera
* 5. This code would need to go there
* 6. If camera is operational, skycolor or any other background is disabled
* 7. Create separate object for dealing with camera
*/
function hasGetUserMedia() {
return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
}
if (!hasGetUserMedia()) {
alert('getUserMedia() is not supported by your browser');
} else {
if (XSeen.Runtime.mediaAvailable && XSeen.Runtime.isTransparent) {
/*
var video = document.createElement( 'video' );
//if (XSeen.Runtime.Attributes.usecamera) {
video.setAttribute("autoplay", "1");
video.height = XSeen.Runtime.SceneDom.height;
video.width = XSeen.Runtime.SceneDom.width;
video.style.height = video.height + 'px';
video.style.width = video.width + 'px';
video.style.position = 'absolute';
video.style.top = '0';
video.style.left = '0';
video.style.zIndex = -1;
const constraints = {video: {facingMode: "environment"}};
var video = document.createElement( 'video' );
video.style.zIndex = -1;
XSeen.Runtime.RootTag.appendChild (video);
const constraints = {video: true};
function handleSuccess(stream) {
XSeen.Runtime.RootTag.appendChild (video);
video.srcObject = stream;
}
function handleError(error) {
//console.error('Reeeejected!', error);
console.log ('Device camera not available -- ignoring');
}
function handleSuccess(stream) {
video.srcObject = stream;
// XSeen.Runtime.RootTag.appendChild (video);
}
function handleError(error) {
//console.error('Reeeejected!', error);
console.log ('Device camera not available -- ignoring');
}
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
navigator.mediaDevices.enumerateDevices()
.then(gotDevices);
// .then(gotDevices).then(getStream).catch(handleError);
function gotDevices(deviceInfos) {
var msgs = '';
for (var i = 0; i !== deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
console.log('Found a media device of type: ' + deviceInfo.kind);
msgs += 'Found a media device of type: ' + deviceInfo.kind + "(" + deviceInfo.deviceId + '; ' + deviceInfo.groupId + ")\n";
}
//alert (msgs);
}
navigator.mediaDevices.getUserMedia(constraints).
then(handleSuccess).catch(handleError);
*/
} else {
console.log ('Device Media support is not available or NOT requested ('+XSeen.Runtime.isTransparent+')');
}
// End of experimental code

Expand Down
Loading

0 comments on commit 8fdb047

Please sign in to comment.