Unity Client

By | Uncategorized | No Comments
So I have been working on a new version of The Expanse – this one is based in Unity. While i still believe the future of VR is in the open standards of web technologies, I think it needs just a little more time to get to its full potential. What I have decided to do in the mean time is prepare for that time by building a bridge between these two environments / game engines. The inspiration for The Expanse has always been to create an open platform that is controlled by the community and completely open – the less I have to decide the better. The web based version of The Expanse is relatively complete with some more polishing to be ready to release ( this will be happening very soon ) and what is exciting about the web is the possibility of integrating with other platforms. This is the main reason I open sourced the Aframe UI KIt and Shane’s Editor – to allow others to benefit from the content we create and be able to build their own platforms with the tools provided and to help shape those tools too!
The Unity client will help to provide more cross platform opportunities and allow us bridge even more gaps. I plan to open source as much of the unity project as possible to let other developers in the unity community benefit from the bridge between three.js / Aframe and Unity. My aim is to achieve feature parity with the current Expanse built with three.js providing the same geometries, materials and scripting capability. That’s right! The Unity based client will support scripting in both C# and Javascript and all this will be done in the client with a built in IDE environment – The Expanse will be the only platform to offer so much creative ability across so many platforms. The new Unity based version of The Expanse will launch on all devices simultaneously – that includes Oculus Go, Rift and Quest, HTV Vive and WMR devices. There will be the same rich customisation features and I still plan to support loading in WebVR content via an in-app browser. I plan to get a version on the relevant app stores as soon as i can – I expect to be ready to start the store submission process in about 3-4 weeks Woop Woop! I will be expanding the beta testers channel soon to include the new unity client too so if you interested then feel free to get involved and DM me for access to that group on this discord if you are not already included. These are exciting times and there will be lots of awesome things to come in the near future!

Shane’s Editor

By | UX | No Comments

Shane’s Editor first started in AltspaceVR around the 7th of Jan 2018. I had just finished up with a VR Shopping town called Marché City and we celebrated new years eve there with a giant ball dropping and all the usual festivities. I decided to build Shane’s Editor to be able to enable users who didnt understand code to be able to create content and experiences – without needing me to do it for them ha!

Over the coarse of 3 months or so I tied down many features, mapping and exposing the underlying features of THREE.js, a 3D javascript library that was supported by AltspaceVR at the time. I created a UI based on Google’s Material Design that made it simple to work with 3D objects and create a scene graph hierarchy. With a closed group of beta testers I worked hard to refine and stabilize the platform while I got ready for a release.

On May 1oth 2018, Alex Kipman ( Microsoft Mixed Reality, Hololens, Kinect ) made an announcement in AltspaceVR about the launch of Shane’s Editor. In a few short weeks I had hundreds of users and hundreds of separate scenes created by users in AltspaceVR.

Sometime in late August 2018 AltspaceVR announced that they would be removing the browser plugin that made it possible to use javascript in their application. This was a sad day when this was announced but it inspired me to create a new version of the content creation tools, and a new platform for users to enjoy their content on. I also decided that I would open source the bulk of my creation tools to be able to inspire the community to get involved and help shape what the future held for this VR based content creation tool.

Creating Immersive UIs

By | UX | No Comments

This new VR industry is awesome right? It exciting to see all the developments and evolutions as we, the early-adopters, soak it all up and get to experience it first hand. We engage and interact with all the new content in an entirely new way – a stark change from only a few short years ago. Everything needs to be reviewed from a fresh perspective so we can dominate our understanding of what is the best way to proceed. We can draw from past conventions as we move from the limited keyboard/mouse/gamepad input systems we have mastered industries with, but what we really need is standards and principles.

VR UX

It will take years to know what is the best user experience strategy could be, with the lightly-hood of many varied and diverse solutions catering to specific niche. Rather than try to answer a lot of these questions now I decided that it was best to draw on the standards and principals we already have. With the understanding that UIs could take the form of modular 2D flat interfaces, I wanted to replicate a well known standard with many communities supporting and contributing to it. That is why i chose Google’s Material Design

I now had everything I needed to begin building a UI kit that could work with VR, I started to build Aframe Material Collection and as the name suggests, this UI kit was intended to target AframeVR and WebVR technologies. Now all I had to do was recreate the UI components designers are used to working with: radio selection, checkbox, text input, buttons, modals and toast messages to name a few. So I got to work trying to recreate the aesthetic and behavior of these components as closely as I could maintaining the benefits of material design.

Material Ripple

Material Ripple is a visual feedback technique to supplement things like haptic or audio feedback for UIs. It is a great way to offer a more accessible interface not only to those with disabilities but also those that prefer to ignore or disable the other feedback methods. This effect is usually achieved using 2d shapes – mostly a circle. Without technologies like CSS or SVG to create shapes I decided to use 3D geometry to achieve the same effect. This approach has the caveat that geometry must be rendered on each frame continuously. Later I would create a 2D renderer to solve this problem but in the mean time I was eager to explore any optimizations I could make. I decided rather than a circle geometry I could save on some vertices if I used a hexagon shape instead. A hexagon seem to be the lowest denomination I could find that still had a striking aesthetic appeal. This shape would also feature later in other components for the same reasons.

Buttons

I created a series of buttons to match those usually found in material based UI kits for the web. I built buttons with cursor interaction and animations, that could easy be represented in several states – disabled, floating action and normal. Using standard techniques for capturing interaction in Aframe using raycasters I was able to create buttons that could work with traditional mouse inputs as well as cursor based interaction with tracked motion controllers. Incorporating the ripple effect we can make the buttons function pretty well.

 

Form Elements

Form elements are important for capturing information for the user. These come in the form of radio or single selection, checkbox or multiple selection, drop down menus single/multi selection and also text input fields. A lot of these components actually achieve similar behavior so I decided to only create radios, check-boxes and switch inputs leaving out drop down menus and multi select drop downs as these usually required more clicks from the user.

 

Text Input fields are important and for this UI kit I had to recreate text input from scratch. Someone once told me that text input largly goes unnoticed if its done properly. I wanted text input to behave exactly like the browser equivalent in terms of cursor selection/navigation and keyboard shortcuts for selecting/scrolling text.

UI Renderer

In order to optimize the UI rendering, I decided to take a slightly different approach to rendering the components. I realized that I could control when the objects rendered and eliminate the unnecessary render calls when the interface is idle. I could also expose settings like FPS and resolution to be able to control optimize the rendered output event more – we could also cater differently for mobile and desktop using these options. This provided many opportunities to improve on the UI also, being able to wrap the rendered UI around custom geometries. I used a curved plane in the examples.

Yoga Layout Engine

Without having the luxury of CSS styles to contnrol layout options inside WebVR, the guys over at Mozilla Hubs mentioned the Yoga Layout Engine from Facebook. This was a great option as it provided a pure javascript implementation of flex box and flex layouts. THis proved pretty powerful for laying out elements in the UI. I decided to integrate the layout engine into a scroll pane so that items int he scroll-able section get automatically layout out. I was able to set the width and height of the objects and they were automatically positioned which was great! in lots of cases i didnt even have to set the width and height, it was automatically detected from the object eg. using the radius of a circle or the outer radius of a ring.

Who We Are

By | Uncategorized

Shane Harris

Chief Executive Officer

Shane Harris

Passionate about VR and human computer interaction. I previously worked as CTO for Sensum – an emotional research company focused on correlating biometric data from physiological responses with emotions. I have been very passionate about devloping in VR ever since I presented with Sensum at CES in 2015 with a VR based demo and one of the oculus staff members came to try it out. I am eager to do my part to push this industry forward towards the next evolution of computers and how we use them.

Kenny Reijnders

Chief Innovation Officer

Kenny Reijnders

Always thought of VR as one of the greatest things to do with a computer. I have a great passion for technology and automation, and work in a R&D as a technical manager. Also love making things come to life in the real world and in vr, I spend a lot of time modelling and coding machines and animations. I love creating things and making things better, and I’m excited to help built the community and the tools to bring people together and share all the craziness they can think off.