360 website background and how to optimise it?

Jri

Member
Hi!

I've been figuring out how to output a 3D animation to a movie file in such a way that when it is stretched/the metadata is altered, it works as a 360 video that can be scrolled/panned around. These are popular on Facebook, as their platform supports physically scanning round with a smartphone instead of dragging a mouse in your browser.

What I want to do is fairly straight forward in that I want a browser friendly 360 drag-around-to-pan image for my site. There's a fair bit of free third party java script online that I can try and butcher to fit my needs.

My worry is that websites can be a pain to get to work on smartphones/tablets at the best of times, so doing something like this might complicate things further.

An ideal scenario would be to get the site to work as mentioned above, and when accessed on a phone the user could pan around using the inbuilt gyroscope. This might be a little ambitious - so as a compromise I'd be happy with an simplified version of the site for phones, reserving the 360 interactivity for basic computer browsers.

My web design knowledge is basic (but gradually improving), and I usually just tweak and jury rig old pre-existing code until it does what I want. With this in mind, how would you approach doing something like this?

Thanks,

Jri.
 
It's a very complicated thing to get right!.. so much so that even leading digital agencies point blank refuse to attempt such a thing (I know because I was tasked with researching the possibilities when a global agency turned down a client for this exact request). That being said, it is achievable. This blog post is a good place to start.

Good luck!
 
Great link, thanks.

This is basically going to be an elaborate illustration portfolio for me and isn't for a corporate client - meaning time is on my side. The downside is that if I can't get it to look stable and professional - I don't want my work represented poorly.

Ironically, the superficially complex bit is actually pretty easy as most 3D graphics tools (with a little poking and prodding) can be made to render 'equirectangular' representations of a 3D scene (i.e. a 360 wraparound friendly - yet standard aspect ratio - image/movie).

The hard bit is telling the browser how to display it, YouTube and Facebook have a some clever coding operating in there (I would assume some javascript(?) line that checks if it is being displayed in an app, as YouTube doesn't support 360 video panning in safari on my iPhone - only in the YouTube app - I think the same is possibly true of Facebook). When you view them on a desktop browser, it allows you to drag them round.

I'll keep you posted on what I can manage.

If anyone else has dealt with anything like this - shout up!

Thanks,

Jri.
 
...here we go:

This guy has the right idea. Need to see if I can hybridise the iPhone functionality from the link you posted earlier with this to make something unholy.

dr-frankenstein.jpg
 
Assuming you're making the 3D animation in something like 3DS Max you can also look at using something like unity which has a vr module and gyro support to insert it onto your website.

If it's a 3D sphere video then you'd likely need to look into things like google vr (https://developers.google.com/vr/concepts/vrview) or similar.
 
Back
Top