I’m wondering how to present ultra wide screenshots for a while now, because most people will not have an ultra wide display at hand or not run their browser in fullscreen on such a device. A scaled down version with retained ratio also just don’t really cut it:
Now what if we could wrap this in some sort of 360° image? This isn’t really 360°, of course but you get the idea. A quick search usually yields JS libs like Pannellum (https://pannellum.org/), which look great for this use-case as well and yes we could also solve this in CSS by using an animation and go for a little camera ride.
What if we could optionally also make use of a gyroscope though? You know, that sensor every mobile phone, tablet and VR device comes along with. So the user could device where to look just by moving the device around?
This was when I stumbled over A-Frame (https://aframe.io), which is basically a library for building 3D AR or VR experiences and while I may only scratching it’s surface with my quick tests here it does deliver exactly what I was looking for.
I built demos for various games today and I don’t know how long I’ll host the files here but they all follow the very same code pattern that I’ll add in the end:
https://beko.famkos.net/aframe-elite-dangerous.html
https://beko.famkos.net/aframe-fly-dangerous.html
https://beko.famkos.net/aframe-nms.html
https://beko.famkos.net/aframe-rebel-galaxy-outlaw.html
https://beko.famkos.net/aframe-spacebourne2.html
https://beko.famkos.net/aframe-starcitizen.html
https://beko.famkos.net/aframe-x4-foundations.html
Please be aware that I’m loading a ~5mb blob of JS code directly from A-Frame in the demos so don’t check them out if that is a problem for you. The image asset adds another whopping MB so please be patient. The best experience is on a mobile phone where you should be able to look around by moving the phone left and right. It works on a desktop browser too where the mouse can be used to look around.
Here is a code snippet that shows hows it’s done:
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
</head>
<body>
<a-scene loading-screen="dotsColor: #ff6a00; backgroundColor: black">
<a-assets>
<img id="sky" src="./wp-content/uploads/2023/03/elite_dangerous_odyssey_for_my_valentine.jpg">
</a-assets>
<a-entity id="rig" position="-8 0 0" rotation="0 90 0">
<a-entity id="camera" camera="fov:45; zoom: 1" far=90 look-controls></a-entity>
</a-entity>
<a-text color="#fff" value="Elite Dangerous ...on a canvas" width="3" position="-10.5 -0.5 1.5"
rotation="0 135 9"></a-text>
<a-curvedimage src="#sky" height="20.0" radius="10" theta-length="180" rotation="0 180 0"
scale="2.5 1 2.5"></a-curvedimage>
<a-sky rotation="0 0 0" position="0 0 0" color="#000"></a-sky>
</a-scene>
</body>
</html>
Feel free to copy this snippet and play around with it. Just keep in mind that you have to use _local_ assets too or they won’t show up. Make sure to read the documentation too and play with the built in inspector opened with the key combination ctrl + alt + i.
And yes I’ll happily take a CSS only variant too but I really doubt that’s possible without loosing features like gyroscope data usage.
This content is licensed under a Creative Commons Attribution 4.0 International license.
