RWD Podcast 58
Listen to episode 58
Show notes
Transcription
Hey, everyone, and welcome to another edition of Responsive Design Weekly. My name is Justin Avery, and I am your host and the curator of the Responsive Design Weekly news letter. A weekly news letter all about front end development and back end stuff and performance stuff and frameworks and tools. A whole bunch of stuff. This podcast is like a … I was going to say a sidekick. It’s not a sidekick. It’s like a spin off of the news letter as well, so I bring you some cool stuff on the podcast as well I hope. This is edition number 58 which is kind of cool, and the fist time that I’ve gone back to back editions week to week for a while actually. It’s the first time in 2017, but it’s only been two weeks in 2017, but it’s actually the first time for quite a while including 2016, so yay.
Thank you for downloading and tuning in again. This week I’ve got like this tickle in my throat thanks to my little boy. Thanks to him going back to school, so he’s bringing back a whole swathe of new germs that can do the run around in the family as well, so I’m going to try this thing where I click on the mute button if I feel a cough coming, so there will be like tonnes of tiny little pauses through the show. Super professional, I know.
This week no guest, but I did on Tuesday night I went to the London web performance meet up, and I saw a wonderful talk from Ada Rose Edwards. You can see her site at Ada.is. She was fantastic. She talked all about web VR. Now, I looked into web VR a couple of months ago because a client was asking what they could do with it, and they wanted to keep on top of things, and when I had a look I came across this framework called A frame. Aframe.io, and it’s a framework produced by the Mozilla company. Here we go. We’re going to try to cough quickly. I hope that worked.
I believe it’s developed by Mozilla. Anyway, it’s a wonderful thing. It’s like a framework. You drop in a bit of Java script, and instead of programming really, really difficult like web GL stuff and things that I have no idea or understand, have any comprehension of how to do at all. You drop this code in so the reference to a Java script file, and then you can just pretty much write HTML. The HTML, like you write HTML but with particular components, but it then turns it into a wonderful web VR experience. Then all you need is, all you need, you then need a phone. Some description. Something that supports web VR, so I mean I’ve got an iPhone five here. I’ve got an iPhone six from work. Both of those support it, and then like a headset which could be Google cardboard, or it could just be you pushing the phone really hard up against your face.
Google cardboards come pretty cheap. Fortunately there was a Google representative that gave away 100 Google cardboards at this meet up, so we all got to try it out. I forgot to hit the mute then. It was a wonderful meet up, and it was really, really good. Ada talked. No slides, just demos which makes it even better. Web VR it’s really a thing. It’s like it’s here, and it’s ready to go. I’m not going to lie, it looks a little bit like the designs that were coming out in the mid 90s or late 90s, so they’ve got a very 80s, 90s feel about the designs, but that’s because the web VR stuff is still, I mean the pixel perfection we expect retina quality stuff now with our screens and our phones, but the resolution on web VR just isn’t up to that scratch, but man it is immersive, and it is cool, all right?
One of the wonderful things I think is that you can jump straight into it. Now, A frame has a whole bunch of examples to allow you to get involved with it straight away, and there’s this wonderful component that you can add in called a sky box, all right? It’s almost literally … Let me just fire up. I built a call thing. Well, I didn’t build a call thing. I built a thing. Not necessarily going to say it’s cool. Yeah, it’s called a sky, so you know how I’ve dissed [amp alone 00:05:12]. I’ve questioned the usefulness of amp and the ideas behind it, so this has a very similar idea, so you’re loading in Java script at the top of the page. May as well. We have locking script. Pretty sure it is. Then instead of using regular HTML tags you’re using kind of like components I suppose, so everything in amp is predefined or prefixed with amp-image or amp-iframe.
Everything in here with the components is prefixed with an A for A frame, so you can build a box which is A-sky. Give it an ID. Give it a radius. Give it a source, and then it will effectively build a sky for you which is well cool. Now, the cool thing that I did with this if you go on to aframe.io and we can try it out. There’s an example which is a 3-D 360 image. This is how simple it was. It was lunch time yesterday, and I thought look I just want to try this out. I want to see how quickly I could build something that might be somewhat helpful. I jumped on and we have at work some clients, and as you would hope, and the clients are really keen on making sure that new employees get a really good feel for what it’s going to be like to work at the place.
All right, and that’s great, so you can have tours of your office which is fine, or you can show pictures, or you can show a video of the office and stuff, but sometimes things like if you’re working in construction, so we have like for a couple of construction companies, you can’t take people onto construction sites and show them because you’ve got it go through a whole bunch of safety rigmarole things, so it’s not really going to fly. Some places are super secure, so you’re not allowed to let people in, so even though you could show them the office, and there’s nothing super secure on desks or anything you’re not actually allowed to let them into the building to begin with.
Sometimes people just won’t travel, right? If you’re doing an international placement, or if you’re moving from one side of the country to the other, and you want to get a feel for what it’s like then, I mean, it’s a long way to go just to get a feel. I thought well it would be cool if you could kind of get an immersive experience of what it’s like in an office. I downloaded … For this you need a 360 degree picture, and so I didn’t have the camera. You can get a camera, and what Ada recommended there’s a Samsung Gear 360. It takes some pretty sweet shots. Like, it looks beautiful. It does video I believe, or maybe it’s just … Could be just … I’ll check that. It may not do video, but it definitely does some beautiful pictures. It’s 349 quid, so not cheap. Not something that I’m just going to drop 350 quid on to try out, but I probably will now that I’ve seen how cool it is.
I’m not going to tell you to go and do that, but if you do have a phone which I’m sure most of you do there is I think available for the iPhone anyway which is what I had. An app called 360 panorama, and it’s by Occipital. It was a pound 50, so 350 pounds verse a pound 50. I went with the cheaper pound 50 for a change, and essentially it lets you kind of do a panorama like you can do with your iPhone now, but it sets like this globe grid behind it to begin with, and then as you hold you phone over a particular area it records that part of the image and then adds it to this grid, and you basically do a circle and then you look up and then you look down, and you’re done. You have this amazing 360 … You have this amazing … I just muted my headphones instead of the microphone, sorry. You have this amazing 360 view. This is great.
Now, from that you just download it and put it into an images folder like you normally would a regular image and then you’ve got this picture which you can then paint on the sky box, all right? This is amazing, so you can get started with this just having a 360 image, and I think it’s like about 30 lines of code, but for me it was like a copy and paste and update one image reference. It was really cool. What I did is I downloaded this thing and then I took a look around, and I did a 360 view at my desk. Then I went into our kitchen, and I did a 360 view of our kitchen as well. Then once I was finished doing that I downloaded the picture and then I chose the gallery option, so the gallery option is like the 360 image, but it allows you to have multiple images.
What this does is it just gives you the ability to put like just two boxes like a thumb nail to say I want to view that one, and with web VR because you don’t have a mouse or a pointer or a clicker you can write into it that you want a little dot which is kind of life your reference point, or it’s like a pointer. Then if you move that dot onto a square that you’ve designated as a link and you stare at it for a little bit it activates that as if you were clicking on it which is super cool, right? Then the click is you can just control the click event like you do with Java script for normal click events. I’ve got these two boxes now which one says office, one says kitchen, and you look at the kitchen box, and it sets the sky box. The A-sky to use the 360 picture of the kitchen, and then if you look at the office box then it runs Java script and that sets it as the office one.
Now I’ve got this 360 immersive experience with … I mean, I’m going to say it’s not the best picture in the world, but it gives you an idea of what the office is like. Yeah, so now we’ve got this thing, so if I was to say hey you should come and work for us. This is what our offices look like. This is what our kitchen looks like. This is … Maybe not toilets, but you know just showcase some of the different areas. If you’re in a building construction site you can showcase those different areas there. If you’re selling houses why not showcase the different rooms the house has?
One of the things I want to do with it is I’m Australian. I live in the UK. I have a lot of family back in Australia, family and friends, and they’ve never been over to visit. They don’t know I I live. They don’t know what our house looks like. They can’t picture like what a garage is like or a backyard or anything, so I’m going to go … Especially my dad who’s technically not there I would say to be nice. Sorry, dad. You’re not the most cynical person. The most practical person in the world. He can build. He’s build a barge. He builds some cool stuff, but computers he’s not a fan. I can now do these pictures in rooms and set this up, and my brother who lives over there with him still can give him this phone. He can put on this cheap Google cardboard headset, and he can be immersed. He can see pictures of the kids. He can be involved in it.
It’s really cool, so anything you can do with Java script you can do. You can import objects. You can, if you’ve done a bit of SVG work and sort of moving SVGs around and animations and stuff this is all possible with this A frame. I highly, highly recommend it. We talked about responsive design. We talked about how we’re going to make our information and make our content respond to the different devices that we’re consuming it from. Well, we’ve been looking at screens. We’ve been looking at windows, so I remember someone describing a screen as amazing, but it’s kind of like if you take a picture and then you put it in a frame. That’s kind of … That’s what you get. You can look at it, but you can’t experience it. You can take a video of something which is better, but it’s still a picture, and it’s still a frame, and you’re looking at it through a 16 by nine window. What you want to do is you want to put your head through that window and be there and experience it.
If we can create content which allows people … We are creating content, but we want to be able to create content that allows people to experience it in that way, and at the moment the web can now do it, so with this web VR we’re able to start doing it. Now, a couple of things which I’ve learned over the last couple of days and from the talk is text in web VR is not a great idea. I still want to wrap my head around that a little bit more, but I just have really advised against using huge amounts of text. That causes a bit of an issue if we’re creating loads of content on our web sites, and we want people to consume it, and then we said we can’t use text then we need to find other ways for people to be able to do that. I need to wrap my head around that a little bit more. If anyone has experience on web VR and large amounts of text or being able to consume content, text content, in that way, I’d love to hear from you and learn a bit more about that. I’ll be updating anyway.
I kind of want to do a responsive, so I’m doing the redesign of the responsive design that is coming along nicely. I kind of want to add a web VR version of it as well, and see how that just might look. I think that would be quite cool. Text, not so great. The other thing is you need the camera, but like I said we’ve got this fall back. You can use an app to do that instead. There’s a whole bunch of different cameras that you can get a hold of, but apparently that one is the best one. The Samsung 360 VR. We also at work we did this project with an energy company, and we built this 3-D model of this island in a futuristic city, and the 3-D modellers, we only got a 2-D picture of it because we were putting it up on a website, and we kind of made it float like an island because it was a transparent PNG, but what we really wanted to do is make it so that people could experience it. They could turn it around. They could zoom into it like a web VR process.
I’m going to get that file back. I’m going to trial it out and see what it’s like. Now, when you’re working with 3-D objects, I asked Ada and she said, “What you want to do is you want to keep the polycount under 100,000 in total.” I don’t know what that means, but just that’s a tip, right, so someone says because that was a question the 3-D artist asked me. They said, “What polycount should it be?” I don’t know. What is a polycount? Under 100,000 is what you want. The other thing that the 3-D artist asked for was what file type did you need it in? For that, again, I have no idea, but you can work with objects so .obj or .gltf. Again, I have no idea what that means, but if you’re going to grab 3-D objects then use those ones as well.
That’s it for this week. Yeah, like I said, highly recommend. Go check out Ada.is and read about what Ada is talking about. Go use Aframe.io and just trial something. It’s pretty cool. People will be pretty impressed, and if you want to have a look at the little gallery that I built you can go to vr.Simplethin.gs/gallery.html. I’ll put links up in the show notes, and you can check that out. See where I work. That would be kind of cool, but that’s it for this week.
Next week I think … Is it next week? We’ve got a guest coming up which is super cool and very awesome. If it’s not next week it is the week after. Definitely the week after we have Una Kravets which is going to be super cool. She runs a podcast called Web Tools with another guest, and I’ve promised her that if she does a song at the beginning of theirs about what she’s going to talk about, so I’ve said that I will sing a song for Una when she comes on which will be an interesting way of going about it. I’m looking forward to that.
Yeah, until then let’s go for a streak of three, and I will see you next week. Until then stay responsive.
Cheers. Bye now.
