Extras
Volumetric Video Integrations
SXRWeb Standalone A-Frame Plugin
10min
this document explains how to use the sense of space hologram a frame component and how to use the standalone a frame integration this guide is only for use with the hologram format sxrweb, and not the sxrweb geometry streaming a frame usage make sure the hologram component is available you can get from https //assets senseofspace io/jsplugins/1 0 15/soshologram aframe js https //assets senseofspace io/jsplugins/1 0 15/soshologram aframe js e g \<script src="https //assets senseofspace io/jsplugins/1 0 15/soshologram aframe js">\</script> after you have the code available, you can add an aframe component for the hologram as follows the soshologram component has the following paramters source the url of the hologram file use8thwallsource set this to true if your source is stored in 8thwall and you want to use 8th wall's require function to get the final url of the source the default value is false autoinit automatically initialize the hologram the default value is true loop loop the volumetric video clip the default value is true mutedautoplay automatically start the playback of the volumetric video in a muted state the defalt value is false autodecode automatically start decoding the stream when the hologram is initialized the default value is true controlling the holograms you can control the hologram(s) with javascript code using a global object called soshologramcontext soshologramcontext has the following functions switchtohologram(hologram id, autoplay) stops all holograms and activates the hologram with the id given in hologram id getactiveholograms() returns a list of all active hologram objects playactiveholograms() plays all active holograms pauseactiveholograms() pauses all active holograms activatehologram(hologram id, autoplay) activates the hologram with the id hologram id stopall() stops (deactivates) all hologras gethologramobject(hologram id) returns the hologram object of the hologram with the id hologram id example // stop, deactivate, and hide all holograms soshologramcontext stopall(); // reload and start playing hologram with id hologram1 (see above) soshologramcontext activatehologram("hologram1", true); // after 10 seconds switch to hologram2 settimeout(() => {soshologramcontext switchtohologram("hologram2", true)}, 10000); // after 20 seconds pause the hologram settimeout(() => {soshologramcontext pauseactiveholograms()}, 20000); to access the details of the playback of a single hologram you can get the hologram object and control that hologram specifically example let hologram = sosohologramcontext gethologramobject("hologram1"); hologram playhologram(true); the hologram object has the following member functions playhologram() play the hologram pausehologram() pause the hologram getmesh() return the threejs mesh used by the hologram setquality(integer) set the hologram quality if not using adaptive streaming (0,1 or 2) disposedata() free resources if the hologram is no more used decodedata() start decoding of the geometric data only available if autodecode is set to false in soshologram getvideoelement() returns the video element containing the texture of the hologram mute() unmute() additionally the user can define the following (callback) functions in the hologram object to customize the hologram createcustommaterial(threejstexture) define your own threejs material if you wish to use e g a custom shader instead of the default shading oninitialized() called when the hologram initialization is done, and it’s ready to be accessed onplayable() called when hologram is ready to be played onbufferprogress(number) called when the buffering progresses and the estimate (from 0 to 1) of the buffering progress is updated three js integration sxrweb three js player documentation component soshologram threejs js availeble in https //assets senseofspace io/jsplugins/1 0 15/soshologram threejs js https //assets senseofspace io/jsplugins/1 0 12/soshologram aframe js purpose playing volumetric video in the sense of space sxrweb format prerequisites three js, soshologram js, hologram data sxrweb (+ mp4) basic architecture when soshologram js code is run, a function named createhologram() is added to window this way, you can import soshologram js as a module or simply add a script tag to it to have access to it calling window\ createhologram will return a hologram object that can easily be integrated into any three js application, including but not limited to a frame createhologram() interface // creates as hologram object and returns it window\ createhologram( hologram url, // url of the hologram file ( sxrweb) hologram created callback, // called when hologram is loaded to the point // that it can be shown, but not necessarily // played yet function with no arguments progress callback, // this is called as loading progresses function // with one number parameter, representing the // progress of loading playable callback, // this is called when the hologram has been loaded // enough that it can be played loop mode, // sets the loop mode supported values // 0 or false = don’t loop // 1 or true = ordinary loop // 2 = ping pong or boomerang mode only works for short // volumetric videos (300 frames or under) texture url override // set this to the url of the texture file you // wish to use, if you want to override the texture // defined in the hologram file can be useful if // for some reason the texture files cannot be // placed in the same directory as the sxrweb file ); hologram object interface sxrhologram playhologram(userinteraction) tries to play the hologram if there is sufficient data to play it the argument can be used to indicate if the playing was caused by a user interaction or by automation affects muting of the video audio sxrhologram pausehologram() pauses the hologram playback sxrhologram getmesh() returns a three js mesh, that can be added to the scene sxrhologram updatehologram() updates the hologram geometry and texture by default this should be called every frame, or whenever you wish to update the hologram sxrhologram setquality(quality) sets the quality level of the hologram supported input values 0=low quality, 1=medium quality, 2= high quality sxrhologram sethologramtime(time) sets the hologram time value in seconds may not work expectedly when streaming the data geometry and video is streamed by default if the backend server supports ranges if you wish to preload everything before playing use blob urls sxrhologram getvideoelement() returns the video element which feeds the texture data to the hologram sxrhologram disposedata() call this if you get rid of a hologram in the middle of running your program frees resources