Before social media and before easy content management systems like Wordpress (that actually runs this website that you are reading right now) you had to open an empty editor and make use of the hypertext markup language (HTML) in order to create a web page that could for instance display some text. Together with Cascading Style Sheets (CSS) and JavaScript, HTML forms a triad of cornerstone technologies for the World Wide Web.
The web will no longer be flat
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.
Learn Your Vocabulary
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.
Say 'Hi' to WebVR
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."
Our Glitch Tutorial
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.
Let me introduce the Visual Inspector
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:
- Drag, rotate, and scale entities using handles and helpers
- Tweak an entity’s components and their properties using widgets
- Immediately see results from changing values without having to go back and forth between code and the browser
The Time has come for XRDOK components
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.
A library of components for specific use cases
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.
Hackathon and more
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.
Links
