Hi, we’re currently in early development of a new interactive platform. I’m just doing a feasibility check for something we currently have in planning. The brief is:
An interactive globe that has overlayed elements such as animated gifs or videos. Users will be able to rotate and view elements in more detail (focussed in on the video to watch it for example).
Ideally there could be session logic in this (e.g visual prompts for what had been previously viewed).
Also ideally things could be populated via an API, and use data pushed back.
Is this something that sounds feasible with Babylon? From reading it would mostly be done using meshes, the globe seems relatively simple. But what about the media elements and data transfer? Does this work like standard js for pushing and pulling data?
Our devs are very competent in js and modern frameworks, and have experience in things like greensocks and libraries for animation. Should this be easy enough to pick up through prototyping stages? (E.g. not having to bring on somebody who specialises in Babylon or 3D experience).
Thanks!!
1 Like
Hello and welcome!
This is highly feasible. Babylon.js is a JS framework so all will work like any JS code base 
It should be fairly easy for your dev to use Babylon.js and even if this is not the case, we (the community) will gladly help you!
1 Like
Great stuff! I’ve had a stab at creating my first scene (a sphere with texture, surrounded by holographic buttons on the same plane. Clicking these changes the material on the sphere. Skybox is also built).
My next step I think is going to be how to introduce traditional HTML. Since you can’t inheritly do this with Canvas, I think I’ll just use javascript to create a new div (or even an iframe) to load in traditional items.
In terms of making it content managed, I think it’ll be fine to use iterations on a json endpoint to populate panels etc.
I’ll see how we get on! Looks like a fantastic library so far though.
2 Likes
Hi guys. If I may add a few things… I’m not sure if BJS can do animated gif or png, as a texture on a mesh.
Let’s say you have various panels (planes) placed “around” your globe. IF you want them to all have an animated something happening whenever they are within camera view, you might wish to use sprite animation.
Then, when a panel gets focus’d/featured/chosen, you replace the sprites/panel… with a “square-on to camera/canvas” panel… and present the video. You might call this focusedMode, as opposed to globalTourMode.
Keep in mind that the “eye-catching” that happens in globalTourMode… doesn’t need to be animated textures (per your requirements). It can be labeled animated colorful sparkly particle-spewing clickable mesh/polyhedra.
IF… your scene is never expected to use VR head-gear or use VR mode… then you can also launch absolutely-positioned HTML elements atop the scene canvas, and THAT window/element can have a large allowed-media-types within it… depending upon the mimestype handler-settings of the viewee’s browser.
Ok, that’s all I have, and I’m not overly informed or intelligent. Welcome aboard, coalfaceed! Party on! Stay tuned for more comments.
Thanks for the feedback. Yes VR isn’t a requirement, there’s certain scenes we have in mind that might be appropriate, but the content heavy areas we don’t intend any VR use.
For gifs on meshes, we may be able to work around this with converting them to small video files? They just need to be looping, then the actual video can play on the absolute html. Still at prototyping stage so these things can be challenged.
This needs to be done in webgl so it’s really either this or three.js and from what I’ve read three isn’t nearly as ‘nice’ or well supported in terms of roadmap and maintenance. With Babylon being championed by Microsoft is great too. We are a Microsoft organisation as is alot of our clients, including the one we are working with for this. So - any roadblocks I’m sure we can tweak requirements around.
Again - great feedback, shows a great community you have!!
2 Likes