22 February 2019
I wrote a little bit about a new Vragments project called XRDOK project back in October. Right before our second Hackathon next monday i finished a blogpost called The fabulous XRDOK starter kit that i will crosspost below.
Leaving the comfort zone i spent hours with tutorial videos, tutorial projects and with platform called Glitch, that was entirely new to me. Sitting in front of an HTML-editor has never ever been fun to me. I feel overwhelmed by code. I do not understand it. And there are large black holes everywhere to tap into and do get lost in the void. Whatever. It is pleasing to finally accomplish baby steps. And i can only encourage you to try it out.
The overall idea in the back is that the web or that what we used to call the web will be spatial in various forms of mixed reality. Time to get some knowledge concerning 3D and space in order to be equipped for the things to come. Cheerio.
The fabulous XRDOK starter kit
Up til very recently this web was flat: text, images and videos to look at on a screen. This is currently changing. A bunch of people is working on application programming interfaces (APIs) that allow web applications to present content in virtual or mixed reality. That means you basically can enter a 3d scene in your web browser, look around and move around with the cursor just like in a computer game on a laptop or desktop pc, you can use a head mounted display too, you can augment digital objects into the real reality and much more.
All this relies on software and as soon as you start digging into the topic you are confronted with a hell lot of vocabulary like WebGL or WebVR or A-Frame or Entity Component System that can very easily frighten you off if you are not a techie. But you should not let yourself down so fast. It was easy to write a simple "Hello World!" website back in the days and it is not so very complicated to built your very own 3D experience with computer generated imagery (CGI) and animated 3d objects. Trust us. We will focus on VR experiences now.
WebVR is an open specification that makes it possible to experience VR in your browser. The goal is to make it easier for everyone to get into VR experiences, no matter what device you have. To get a first idea you can check out An Intro to WebVR a free, 5-part video course with interactive code examples that will teach you the fundamentals of WebVR using A-Frame.Two things that you need to know right now: A-Frame and Glitch.
A-Frame is an open-source web framework for building virtual reality (VR) experiences. To be precise A-Frame is an entity component system framework for Three.js where developers can create 3D and WebVR scenes using HTML. The last bit is crucial. A-Frame can be developed from a plain HTML file without having to install anything. Just like your very first website that writes "Hello World" back in the 1990s. Check out the Introduction to A-Frame here.
Glitch is an online code editor that instantly hosts and deploys for free. It looks a bit weird in the beginning, but is really useful and the place where you can try out things by remixing existing projects. And: "If you’re not a developer, don’t sweat it — you can make simple changes as easily as you edit a spreadsheet. Apps update live as you type."
We prepared some examples for you to learn step by step. Here is our tutorial. Let me quickly show you what to do when you open 01objects. There is a lot of stuff happening but please do not panic. It all makes sense:
1) You can open the index.html-file and you see some code. Yet again. Be reminded that "you can make simple changes as easily as you edit a spreadsheet".
2) In order to play around with the project klick "Remix to Edit" - now you have your very own version of the file and can do whatever you want to do with it.
3) You can change the view to Code (just the code), App (just the app) or both (as you can see here)
4) Please pay attention to the grey text because these are the comments. They explain stuff.
Yet again it is useful to watch the starter kit videos mentioned above. They help you to sort things out.
After you have played around with the code a little bit it is time to check out the visual inspector. A-Frame provides a handy built-in visual 3D inspector. Open up any A-Frame scene, hit <ctrl> + <alt> + i, and fly around to peek under the hood! The A-Frame inspector is a visual tool for inspecting and tweaking scenes. With the Inspector, we can:
A-Frame is an open-source web framework. That means that the source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose. A-Frame has had over 270 different contributors that add components. A component is a reusable and modular chunk of data that adds further functionality.
And here Vragments comes in with XRDOK. XRDOK is an open source XR toolkit for CGI-based content production. It lets users combine 3d objects (gltf) with actions (components) in scenes (VR, later AR) easily in order to tell stories or explain things.
Our goal is to provide a library of components that provide functionality for specific use cases and are primed for easy use instead of abstraction. You can start playing around with our components xr-on and xr-click in tutorial project number 6.
xr-click: When added to an A-frame entity (a tag like a-box, a-sphere) or own A-frame components, triggers a click event when clicked.
xr-on: Trigger component updates sequentially and in parallel. Enrich the behaviour of an entity by defining components in child nodes that should be added to the entity depending on specified event condition.
Learn more about our components here.
On Monday, February 25th, 2019, 10 am we will play around with the components at Medieninnovationszentrum Babelsberg, Stahnsdorfer Str. 107, 14482 Potsdam. If you want, just come on over. And bring your laptop. Or write a mail to Marcus if you want to learn more.
We had a nice little Hackathon with enough time to finally play around with more A Frame. Inspired by Rafaël Rozendaal i was able to built some stuff with my more than limited HTML skills.