Tag Archives: VR

How to Build VR on the Web Today

via How to Build VR on the Web Today.

To begin your development adventure into the Virtual Web, there are three potential ways to do this:

  • JavaScript, Three.js and Watching Device Orientation
  • JavaScript, Three.js and WebVR (My new preferred method!)
  • CSS and WebVR (still very early days)

I’ll go over each one and show a short summary of how each works.

Web APIs and the IoT in Unity

via Web APIs and the IoT in Unity.

For me, the Internet of Things is most exciting when you look at just how far reaching the capabilities are. There is so much technology out there, with new devices emerging all the time, that can benefit from connectivity to the web. Over the next few months at SitePoint, I’ll be looking at the various possibilities that the Internet of Things can bring, reviewing a different platform or device in each article. In the previous article, we looked at how to pull in data from the Jawbone Up.

This time around, we’ll be bringing IoT data into Unity, a widely used games engine that is used to build everything from iOS and Android games to console and Facebook games. It is also emerging as an engine that’ll be used on the Oculus Rift, Gear VR and more, so it’s a fun one to try pairing with the IoT. Imagine a game that adapts to real world conditions like weather and light, if it suddenly goes dark in your room, the game world suddenly goes dark too!

To start with, we’re going to connect up a Unity scene to a weather API, allowing us to use real-world weather data in our virtual world. Then we’ll connect up a Spark Core to use its light sensor data.

In this article, we’re assuming that you know all about setting up a scene in Unity, with a skybox, terrain and lighting. We’ll be building from a scene that has all of this ready and set up. My code samples will be in C# but it is possible to do the same sorts of things in UnityScript if you’d prefer.

Bringing VR to the Web with Google Cardboard and ThreeJS

via Bringing VR to the Web with Google Cardboard and Three.js.

Virtual reality is coming. You know that as a developer – you want in. The Oculus Rift, Gear VR, HTC Vive and more are making waves, yet many developers don’t realise just how much potential there is in the simplest of them all – Google Cardboard.

I’ve been doing a series of IoT related articles here at SitePoint, exploring connecting web APIs to almost anything. So far I’ve covered web APIs and the Unity game engine, the Jawbone Up API and Node.js and displaying web API data on an Arduino LCD via Node.js. In this article, I wanted to bring web APIs into the virtual reality world in a way that will allow JavaScript developers to get started easily. Google Cardboard and Three.js is the perfect first leap into this. It also means your users don’t have to install anything specific and you won’t need to spend hundreds of dollars on a VR headset. Just get a compatible smartphone, slip it into a cardboard headset and you’re ready to go.

Visualizing a Twitter Stream in VR with ThreeJS and Node

via Visualizing a Twitter Stream in VR with Three.js and Node.

Twitter is a wonderful and information rich beast. I wanted to combine some of the powers of visualization, Three.js and its VR capabilities with Socket.IO and Node to create a pretty world of particles generated via a Twitter stream.

I’ve previously discussed all the basics of developing virtual reality web experiences in the SitePoint article Bringing VR to the Web with Google Cardboard and Three.js, so if you are new to this whole idea – read that one first and come back. This demo uses the same foundations.

The demo we will be building will watch a live Twitter stream for a keyword. When one is tweeted out whilst it is watching the stream, it will bring up a “tower” of shining particles that represent how long the tweet was. This demo in particular will look for mentions of the word “pizza”. Why pizza you ask? I was looking for a term which was not mentioned as frequently as “bieber” but more frequently than “boxcar racing hyenas”. In short, the best terms are ones which are relatively frequent enough that they’ll appear whilst you are watching, but not so frequent that they come through at many hundreds a second. Pizza is one of them.

Streaming a Raspberry Pi Camera Into VR With JavaScript

via Streaming a Raspberry Pi Camera Into VR With JavaScript.

I spent the week tinkering with a Raspberry Pi Camera and exploring ways to get it to stream images to a web browser. In this article, we’ll explore the simplest and most effective way I found to stream images into client side JavaScript. In the end, we’ll stream those images into the Virtual Reality viewer built in my earlier article on Filtering Reality with JavaScript and Google Cardboard.

Augmented Reality in the Browser with AweJS

via Augmented Reality in the Browser with Awe.js.

Augmented reality is a neat concept. We take a view of the world around us and supplement it with images, text, sound and video. Tech companies are starting to explore the possibilities of AR with devices such as the Meta Glasses, Microsoft HoloLens and Magic Leap. These very exciting AR headsets are not quite ready for consumer release yet, so it may be a little while before every household has a pair. However, there is another way of introducing the world to augmented reality using something they may have easier access to – the mobile browser.

I have previously covered other sorts of reality creation and manipulation using JavaScript and Three.js here at SitePoint in my articles on Bringing VR to the Web with Google Cardboard and Three.js andFiltering Reality with JavaScript and Google Cardboard. In this article, I’ll show how you can use a JavaScript library called awe.js to create an augmented reality experience on the mobile web. We’re going to create a 3D control board that opens on top of a paper marker. We can hook it up to do pretty much anything that can be enabled via a JavaScript HTTP request, so I’ve set it up to change the color of my LIFX lightbulb using IFTTT.

3D Map Library Roundup

via 3D Map Library Roundup.

This is a quick roundup about WebGL map libraries. Since IOS is supporting WebGL and the browser support is getting better in general, it becomes a relevant technology for map applications too. Stepless zooming, tilting or rotating are features that almost all of the libraries can do. If the map is rendered on the fly and doesn’t rely on images, you can also change its styles and show and hide certain features on demand.

If you are missing a certain library just leave a comment or contact me via twitter.