ngokevin

A Glimpse into Competitive VR Gaming

Just one more quarter. So close to beating that high score. Being at the local arcade, spaced out in front of a blipping machine with a display of flashing lights. That's the feeling I get when I play Space Pirate Trainer. But in this age, the leaderboard is global, the game is in virtual reality, and it's going to take a bit more skill.

»

How to Write an A-Frame VR Component

A-Frame is a WebVR framework that introduces the entity-component system (docs) to the DOM. The entity-component system treats every entity in the scene as a placeholder object which we apply and mix components to in order to add appearance, behavior, and functionality. A-Frame comes with some standard components out of the box like camera, geometry, material, light, or sound. However, people can write, publish, and register their own components to do whatever they want like have entities collide/explode/spawn, be controlled by physics, or follow a path. Today, we'll be going through how we can write our own A-Frame components.

»

I took the Ricoh Theta S all around Hong Kong and Guangzhou for the holidays. The Ricoh Theta S is a freshly released camera featuring two 180-degree wide-angle lens that can take 360-degree (equirectangular) photos with a single exposure or button press, opening up immersive 360-degree photography to the masses. With most familiar only with flat 2D photography, there is a completely different workflow to adapt to. Taking the Theta to the streets of Mong Kok, the most population-dense area and literally the busiest district in the world, here is what I learned about 360-degree shooting workflow and composition.

»

Upon first seeing A-Frame, branded as "building blocks for the web" displaying markup like <a-cube>, developers may conceive A-Frame as yet another 3DML (3D markup language) such as X3Dom or GLAM. What A-Frame brings to the game is that it is based off an entity-component system, a pattern used by universal game engines like Unity which favors composability over inheritance. As we'll see, this makes A-Frame extremely extendable.

And A-Frame VR is extremely mindful of how to start a developer ecosystem. There are tools, tutorials, guides, boilerplates, libraries being built and knowledge being readily shared on Slack.

»

Today, the Mozilla virtual reality team (MozVR) released an open-source library for beginners and developers alike to easily create WebVR experiences. It's called A-Frame. A-Frame wraps three.js into custom elements so the HTML and DOM manipulations that web developers are accustomed to can be used to create 3D VR scenes in the browser. Under the hood, A-Frame brings the entity component system, a pattern common in game development, to the DOM. It supports both desktop, if you got a Rift, or easier, you can even use a smartphone. This post serves as a speed-through introduction of A-Frame, refer the documentation at any time for much more detail.

»