"Minecraft" in VR in 30 Lines of Javascript

James Porter speaking at London Node User Group in March, 2017
616Views
 
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Leveraging A-Frame and React we will discover just how easy it is to build interactive WebVR experiences. Just as you create web front ends with React you can place images, text and 3D objects in an interactive 3D VR world. We will learn the basics of A-Frame and how React and Modern Javascript allows us to encapsulate and manage the complexities of it; allowing us to quickly create maintainable/extensible Apps and Visualisations.


Transcript


So I'm James Porter. I'm @complexview on Twitter, and this talk is Minecraft and 30 lines of Javascript, but you'll have to wait for that. So I'm kind of...over the last few years, I've gotten really excited about VR. It's become this incredibly accessible thing. It's gone from these Google cardboard things, which I think they were £20 originally ordered from the U.S. I've seen them for like £2. It's completely crazy, and it seems like there's so many awesome applications for this in terms of games. But perhaps more interestingly, in terms of things like education, data visualization is creating applications, websites, in VR. Pretty interactive experiences. I'd like you to get involved in that, but I'm not a games programmer, so can I do that? So I had heard about various technologies, including A-Frame and React. I went along to a hackathon in, I think it was June last year, and I made the demo I'm about to show. So this was literally the weekend after the Brexit referendum, so this is a demo I try only to give in London, but you know that's already been relevant. But interactive experience, so I'm in VR. So one thing I always have to say at the start is this talk is about VR, but intrinsically it is a talk in a two dimensional screen, so there is limitations to what I can actually present. This is a 3D thing. In VR it's great, you should all go away and get your Google Cardboard or buy a Google Cardboard if you don't have one and try it out at home. This gives some sense of it, but the Brexit referendum just happened, so I'm going to start this running. So we now have the United Kingdom and a series of lights going out symbolizing the no vote, in order of regions which voted no in proportion, so the west Midlands went first there, for example, a number of quotes. So this is something I made at the hackathon earlier this year. I made this in a matter of hours, and I know nothing, basically, about 3D graphics programming and all of that kind of stuff. So I was using these technologies, which I'm going to introduce in this talk. So we get to the end of this animation, the lights go out. They're still on in Scotland, Northern Ireland and London and then 10PM, results, votes in, darkness descends on the U.K. So it's London, so I probably only pissed off 10% of the audience here, so that's why this works here, but probably not so well in the West Midlands. So the plan for this talk is I'm going to try and talk about a way of getting into VR for the non- pecialist. We're at LNOG, so it's about like Javascript developers. Can we do VR? Can we do it efficiently, quickly, in a way that works, in a way that's structured? I'm going to quickly introduce A- rame, talk about using React with A-Frame. Just a little show of hands, who does React development or at least is somewhat familiar with React? So that's at least 50%, so that's good. I'll show a little demo, like the kind of "Hello, virtual world," and then get to Minecraft. Literally, it's about 30 lines of code. Depends how you add it up, but it generally is about 30 lines of code. So I talk about game development is this horrible industry in one sense. It seems like everyone works 80 plus hours a week and they all have a horrible time and they don't get paid very much and they get beaten by their managers and stuff. But that seems terrible, and it seems like VR could be that way. If it's about 3D, interactive graphic stuff, is it about games development? Is it a horrible world that I would like to run away from as quickly as possible, or is it something where you can create stuff efficiently? I'm obviously going to argue the latter and try to demo how you can bring modern, Javascript technologies like hot module reloading, released liability in this talk some of the recent ES6 plus features, MPM modules and so on into it. The stuff I'm going to present is based in A-Frame, which is a very interesting open source project from Mozilla, which allows you to create 3D stuff in the dom. So technically, it's an entity component system, so it's based around, instead of perhaps...you base it around a number of objects and then you let the system take care of how that is rendered, how that is experienced. You can do things like attaching geometry materials, behaviors and all sorts of different open source things to these dom elements. And it allows you to get something built really quickly and I have this diagram which explains how it works. There's some magic involved, and it's built in 3JS and so on. But here is the... I think this may actually be the Mozilla, hello world, A-Frame example. But you can see how this is just a regular HTML page. We've got a single Javascript import, so this one Javascript file is imported. And then we can create spheres, we can create boxes. We can create plans. We can create sky boxes in this world without any kind of special stuff. We can just write this in an HTML file. If you run that in your system, it would work. And that's great and it's really great for reuse and stuff, but it's not so structured. I don't...looking at that, I don't see how I would create an interactive application, how I would restructure my code, how I would develop things. So being a kind of React developer, I looked at, "How do I use React in this?" So there's a very simple way of using React to do this. So React takes a bunch of Javascript, let's say, and builds a virtual dom thing by some magic that is translated to the real dom. And then A-Frame via some magic translates that into a via Pre-JS, webGL thing. There are some tensions in this, which aren't really so important, but I think this kind of combination has been used for really substantial stuff, like what I'm going to show you is simple demos, but it has been used for real project, including this project that you should all go and look at. The A-Frame React library is what I've been building on is a very simple binding for this that brings together React and A-Frame. So let's look at an actual example. So I'm going to have to kill the server here. I don't want to do that. So I should hopefully, if I'm using the same port, have this really simple example. So this is the most basic example. It has some boxes, has some spheres and we can move around. Obviously, in VR, You'd be looking around this and really experience it in a more interesting way. So obviously, this text is really, really tiny, so we're going to switch back to the presentation. So this time I did anticipate that. So this is a basic program, so this is bringing together the React integration with A-Frame. And how do we create a scene? It's super simple. We create this React thing a scene and we can add a cube to it. We can add a camera. We can add some lights. We can add...but more interestingly, we can...more interestingly, we can nest these things. So if I want to think about...one of the complications about 3D space is we want to place things in this space. We want to put in a particular set of coordinates, move it around, rotate it. We can do that using React in GSX, so in a really, really trivial way but in a way that incapsulates all of that complexity. So as far as the program is concerned, we do this translation and there's a bunch of children inside it that all have that translation applied. We could also do rotations, we could do various other things. So we can create these well structured applications. We could respond to various events. We can create objects really simply and, again, encapsulating all that complexity. If we've got some kind of interactive behavior, some kind of thing that depends on the state, all of that can be neatly encapsulated and then is nicely presented. So all of the advantages of having a component system that many of us have probably seen using React can apply to that three-dimensional world. So let's have a look at the Minecraft example. So have to kill that. The demo, if it loads...[inaudible] This is literally only 30 lines of code, sort of. But we have a world which you can look about. We have various cubes and we can mine them away. And this works in VR. So this is kind of a very poor man's Minecraft, but it's 30 lines of code. So let's have a look at that code. So this is it. This is basically all of the code that was involved in that demo, apart from the generating some random number location stuff. So we literally can take that three-dimensional world and attach real interactivity, real ways of engaging with it. So we're updating this a simple way and then mapping that back into three- imensional world, which the user can then experience. We can create all sorts of data visualizations or interactive applications in a similar way. But all of the complexity is abstract away. It's all very maintainable and structural, well structured. If we wanted to use Redux or something we could use this very simply. So here is...this demos some of the things we can do with objects in the world. So in this case, we just have an on click, so the Minecraft mining thing. If you click in a cube, something happens. So we can just attach an event handler in the standard React way, so the way React if you're working on the dom is going to be on press. Actually, sorry, that's React [inaudible]. On click is this under dom thing. We can also do various things, like on MyCenter or on MySleeve, so we can have hover effects, so based in the way the user is looking, something could change in the world. But we have that nice way of encapsulating that and structuring things. If you're interested in getting started with this, we have some free, sort of simple demos and it's GitHub Repo. And I'll probably tweet this at some point. I don't know...if anyone has any questions, I do have some extra bonus things i can talk about. But does this make sense? Yeah. The other thing I should talk about, there is a...so Facebook have a project that React VR, which is the official Facebook, well semi- official, open-source Facebook version of this in a way. So that's going to cut out the middle man, I guess here, which is the...instead of using React to generate dom which A-Frame then handles and renders, it's going to cut that out, probably do some things more efficiently. But it would be very easy, of course, to swap by a lot of the underlying stuff to the React VR if it's officially sanctioned, it become mature at some point in time. So I don't know how I'm doing on time. I can talk a little bit more or...okay, that was a big yes. So I'll rattle through these two more slides quickly, then. So the A-Frame React library, it's a really simple file. It's literally, basically, 144 lines of code. Mostly it's about converting things from a React Javascript object world to things that A-Frame and the dom understand which is very ugly ways of expressing properties. And you can do things like [inaudible] very simply, so it's not just about objects. You can add lights. You can add various kinds of things to the world in a very simple way. I have done quite a bit of [inaudible]. Interestingly, React Native is effectively what this is doing, albeit in an indirect way. It's providing a different rendering target for React. It's converting from a Javascript world to a web GL world in a similar way to React Native would convert from Javascript to IOS or Android or other platforms. I think something like this could work [inaudible] and maybe even be a more efficient way of doing it. I would imagine it would require some very intricate, low level work that I'm very unfamiliar with, in the same way as I think there's some game frameworks called things like Ejecto which take a Javascript game engine and run it in an environment which is not a web browser for performance. I imagine that would be possible in native devices, but it doesn't exist yet. - [Male] Thanks very much. - Thanks.