Hi all,
I’m not a web developer, and I think that most of the problems I’m encountering are caused by my general lack of knowledge on the topic. The problem is that I know so little that I also struggle to understand what to study and focus on.
My goal is to make a VR app to visualize and annotate point clouds and panoramic images. I tried several approaches and decided to use Babylon.js as I think it would be easier to use and more flexible than game engines or other programs. The idea is that with Babylon my app should be easily accessed remotely or locally directly from the VR browser without the need to install additional software or use Steam VR, etc.
So far, I coded a simple (non-VR) script that loads a .ply file (millions of points) and displays it. The results encouraged me to keep going. I did this in Notepad++ in a single .html file (pretty silly, I know).
Then I tried to implement VR. I switched to Visual Studio Code and Live Server to access my pages with my Oculus Quest, but with no success. Communication works, but VR doesn’t.
It looks like WebXR needs HTTPS to work. I tried several workarounds but with no success.
My current understanding of the problem is that I could use something like Node.js, install OpenSSL (which looks far from easy), mess with certificates, etc. But to be honest, these solutions seem quite complex to be the smartest ones for developing VR apps.
Can you give me some direction? I feel like I’m missing something massive and obvious.
hey!
If your issue is SSL only, then there are many different ways to go about it. First, localhost is exempt from this https-only rules, so if you run it locally (using the webxr emulator, for example) it should work without an issue.
http-server is a local server which has a way to serve content using SSL (i.e. - https), but it requires you to generate your own certificate. it’s not a hard task TBH, but there are other servers that are able to generate the certificate themselves. If you are using vite or webpack, they both are able to do that. You just need to pass the right flag.
Another way is to deploy your application to servers like netlify or vercel. Both will give you some free space to test your app during development. The have native SSL support, so you get that out of the box, and this way you also don’t have to mess with local network connections when testing with your headset. Both of those services support drag-and-drop of your code, so it should be a simple task. Firebase used to have static hosting as well (if you prefer using google’s infrastructure), and the same goes to azure’s app service for static websites or its storage account’s web hosting. It really all depends on whether you already use these services or have (free?) access to them.
Thanks for your reply!
I would really like to work locally through localhost, but using VSC Live Server i can access my “http://127.0.0.1:5500/index.html” but I receive the error: BJS - [22:06:37]: WebXR can only be served over HTTPS. Which is consestent with several things i read online (and ChatGPT btw :P).
I think that generating the certificate could be easy if you have a general idea of what are you doing… which is not my case (lol). But based on what you are writing, I think that tomorrow I’ll start working on that.
I should have free access to azure and hosting in general, I guess. Tomorrow I’ll ask to my reference IT, but it will likely be a very long process.
Try localhost instead of 127.0.0.1.
And this answer is exactly what you want of you want to serve using http-server node.js - npm http-server with SSL - Stack Overflow
http://localhost:5500/ works!
The VR button appear and if pressed start the VR environment. Really promising and tomorrow I’ll try with the VR itself.
Thank you for the help! This is the kind of noob problem that’s really hard to solve because you are constantly unsure about what should happen =)
2 Likes