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.
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.
via Introducing Four: It’s WebGL, but Easier.
WebGL has been around for a few years now and we have watched it mature into the reliable and widely supported graphics technology it is today. With big companies like Google, Mozilla, and Microsoft advocating for its use, it’s hard not being curious about it.
Since its specifications were finalized in 2011, it has gained a lot of attraction. With the help of frameworks like ThreeJS, BabylonJS and Play Canvas, this area has become less daunting. Thanks to them it’s much easier to pick up, but it still requires a good learning effort as it is a different discipline altogether.
This article will briefly introduce you to what WebGL is and then I’ll cover Four, a framework I created to help developers delve quickly into the WebGL world. In case you want to see what Four and WebGL can do for you, take a look at this simple demo I built.
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.
via How to Make a Smartphone Controlled 3D Web Game | CSS-Tricks.
via Three.js – Working with Cameras.
Our lessons on webgl are continuing. Today we review Threejs cameras. Threejs library provides two different cameras: orthographic camera (OrthographicCamera) and perspective camera (PerspectiveCamera). The best way to understand the difference between these cameras – try every one of them with your own eyes.
Cross platform, touch optimized 2D & 3D visualization made with HTML5 Canvas, WebGL and ThreeJS.