 Hello, everyone. I guess I'll get started now. For anyone who's coming in here to the print schedule, we were a last minute replacement for White House.gov. So if you are coming in for that, don't leave, because I'm going to be talking a little bit about open government, but also other cool 3D things. So we're going to talk to you today about how you can use this X3D and X3D graphics to add interactive 3D content to your Drupal site. And I'm going to use an example of the NIH 3D print exchange. So my name is Megan Coakley. I am an analyst at the Bioinformatics and Computational Biosciences Branch of the Office of Cyber Infrastructure and Computational Biology, which is really just a fancy name for being the scientific arm of the IT department of the National Institute of Biology and Infectious Diseases. And then my co-presenter here, Leonard Daley, is the president of Daily Realism and is a board member on the Web3D consortium, which we're also a part of at NIH. So because this is in the showcase track, I'm going to talk about a couple different things involving Drupal. Just some unique stuff that we did with the site. I don't want to get into too much of our scientific stuff, but if you are a science geek, hopefully, like me, hopefully, you'll get some good stuff out of it. So oh, sorry. OK, so before I launch into that, I just want to talk a little bit about 3D printing itself, just so you have a context for where I'm going with this. So 3D printing, if you're not familiar with it, it's a means of fabrication that involves putting down layer, fabricating objects layer by layer in 3D. And it's being, typically, it evolved from industry and manufacturing and rapid prototyping. It's kind of an old technology. It's been around for 20, 30 years or so, but it's only now becoming mainstream. You can print in all different kinds of materials. There's amazing uses for it. And it's kind of right now that it's moving into the biosciences and medicine being used in things like 3D printable prosthetics, surgical planning, printing out 3D prints for surgical planning, bioprinting is now the thing. And then it's great as a scientific visualization tool. And that's what we do at my institute. So talking about 3D visualization and why you're all here, a lot of what I'm going to be saying is using scientific data as our reference point, because that's where I'm coming from. But all of the concepts and methods here can be applied in any way, and of course, with the Drupal specs. So we know that a picture is worth 1,000 words. And I could spend far more than 1,000 words telling you about this molecular structure, which is hemagglutinin or receptor on the influenza virus. But there's only so much information you can gather from that. So here's the same model, a digital 3D, and then a 3D print. So there's much more to be gained from that. This model, actually, that 3D print itself kind of was a critical turning point in a breakthrough discovery for researchers at NIAD, who it was a discovery that's leading towards a universal flu vaccine. So these can be really impactful in helping people. When you get the physical object in your hands, there's things that you can see. So we had great things happening at NIH, but how can we help the public benefit from that? So we created the NIH 3D print exchange, which is the site built in Drupal. And there are many kind of repositories to get 3D prints, like there's iPhone covers, gadgets, widgets, things like that. But we wanted to be able to share things that are bioscientific and medical and that are accurate, and there's not a lot of that out there. So, and even to make those models requires a lot of, experience a lot of advanced software for anyone who's familiar with 3D graphics, and hopefully many of you are, it's not that easy, and particularly make something that's watertight in a 3D principal format that is compatible with a 3D printer. So the exchange was kind of our way of narrowing that knowledge gap. It's open and interactive, you can download anything, you can upload stuff, it's been a great resource. And the opportunity to do that, getting to the government part, was through the HHSID Lab. So NIH is under Department of Health and Human Services. We got some seed funding from them, and it was great because they encouraged us to use lean and agile development methods, which was a major change from the typical waterfall and enterprise performance life cycle stages, that kind of thing that we were used to. So that was really cool, and it's really transformed how we work. So if you're in government and you haven't gone that way, I would highly recommend that. So, and then a major part, so this was sort of our timeline. We actually had a public Drupal site up in less than eight months, and we actually launched the site, a public beta in April after starting development in November of 2013, launched in April, 2014, and then the public version, the initial public release was available in June, 2014. But so the government, if you're not familiar with that, it's Drupal's being widely used in government. I think it's great because it's all open source, there's things that we can share. It was HHS that suggested that we use that, and hopefully bringing this open source stuff is saving us all a lot of taxpayer dollars. So OCRCB, the Office of Cyber Infrastructure where I am, we have a lot of really talented developers and administrators, but we didn't have any experience with Drupal. So as a beginner, anyone, I don't know if you felt this way, but it's kind of a weird beast. Up until this project, we have worked almost exclusively in SharePoint for our internet, intranet, all our collaborative administration websites. So we had this really tight timeline. We were working in a completely new CMS. We had abandoned waterfall and we're doing this completely new development technique, and it was pretty crazy, but it was a great learning experience. But one of our developers one day asked us for the project requirements, and we said we don't know them yet, because there's never been a resource like this, and he was kind of, oh my God, you're breaking all the rules, you're making changes on production, what are you doing? But breaking those rules, we were able to launch at the White Housemaker Fair last June. So that was kind of a big, and in 11 months since that public launch, we have over 30,000, as of, yeah, I guess as of last month, we had over 30,000 unique site visitors, over 2,000 registered users, and over 5,000 downloadable 3D models, 3D files that are compatible with 3D printers. So it's a community-driven database, so it's not just government stuff. Anyone can go there as a registered user, you can upload that file, medical models, labware, chemicals, molecules, anything related to science and medicine. So there's two main, so getting into the visualization part, there's two main file types used in 3D printing, serial lithography, which only, it doesn't have any color information, and then the virtual reality modeling language, VRML or Vermal, and that does contain color. So because 3D printing has been mostly about functionality, this color aspect hasn't really been that important. So there are 3D graphics visualizers on the web, and even some in Drupal, but we didn't really feel like they met all the requirements for us in being able to display these color models in a really nice, accurate way, and they're kind of big files, what's something that's robust and fast. So, but the color is essential in getting that extra information. So here's an example of what these standard, this is actually, this is NASA's website, so this is the now-famous wrench that they sent up to the space station that was printed there, and they actually streamed their 3D graphics from Git. So Git has a 3D viewer, and you can flip that around, turn it around, because if you're gonna print something in 3D, you wanna visualize it first. So what we did, because we wanted color and we wanted something different and new, we turned to the X3D file format, and Leonard's gonna kind of go into more of the technical specs on that, but it's a royalty-free open standard file format, and it's actually a more mature, evolution of vermal, but it's not, it's actually not 3D, 3D prints are compatible, there's just STL and vermal mainly, but it's really easy, it runs in JavaScript and WebGL, so it will work on virtually any browser, and it's just kind of really simple, lightweight. So I'm going to actually do a live demo because it would just kind of go to, just seemed a bit easier. All right, so here's the site, this is where you can go and search and filter and look at all these things. See, bring this in. So this was actually just downloaded last night or earlier today. So here's the preview image. I can click 3D here, and I'll get, this is all, doing this as part of the module, so the great thing about X3D is it has this compressed binary format that it allows to do this progressive loading, so you're not just sitting there waiting at a white screen and that's a new implementation to the site as of just a couple months ago, and it's really enhanced the user experience. So you can, in our little, it's just an iframe there, and then you can launch a full-screen viewer, and again, so you get that faster loading, and you can kind of go in and play around with it, it's just a nice, whether you're gonna actually have content like this that your user is gonna interact with, you can have sort of a running animation, it's just one of those things to add a little bit of novelty, it doesn't have to be too flashy, so it's just kind of a nice thing that we added. So thank you, I figured that was gonna be a lot easier to do a live demo. I was a bit risky with the wireless, but it's been good so far. All right, so as I mentioned, X3D is not actually printable, and when people are uploading stuff, they're uploading an STL or a vermal. So we actually turned Drupal from a content management system into a content creation system, and this is our really kind of the part that we were excited about that was really novel. So these pipelines work, it's just a Python script that calls on a workflow to convert either the STL or the vermal to an X3D format and then it generates the PNG preview. It's totally simple, it's done in Blender, which is an open source version of Maya, which is a 3D graphics application. So the other part of this, as I said, they're difficult to create. So how can we make this easier for people? So we made these create tools where you can click on this and upload your raw data so you could go on there for instance, get your CT scan from your doctor and actually upload that to the site and you can get out, you know, you can see the bones of it and print them if you wanted to. So it's kind of a cool thing. And so it takes a couple different, 35 different file formats that range from microscopy image docs, protein structure data. So I won't get into this too much, but as an example, this is a protein, 3D protein structure data, which is essentially just a point cloud. It's just GPS coordinates for atoms. And we have the more sophisticated workflow that converts all of this into the 3D principle format. And again, this was something our developers hadn't worked with Drupal. He's a Jedi master, he's awesome. And he said, you know, he was a little scared of Drupal at first. And then he said, wow, this thing is really amazingly scripted of all, that you can do so much more with it outside of just, you know, managing content. You can do all these incredible things and you could apply this, I'm sure, to many other types of file conversions or I don't know how many people are integrating these kind of back-end workflows, but it uses all open source applications. So that's what you get out of it with the protein structures. So it's actually from that one data file, we're creating 24 completely new data files. So for instance, this pipeline spits out six vermal in color, two STL, you have eight X3D for display and then eight PNGs for the previews. So we have a lot of memory storage there. So we did this and the idea is that you can do this too. So actually here we go. So the X3DOM module that we built, so this kind of went into, that viewer went into a custom module that we had that was sort of our giant thing that runs all these workflows and we took that out, put a scaled down version, it's in Sandbox now and what it does is it just gives you a media image type in your content type. You have a field for X3D file and then you can pick this X3D interactive viewer and actually I don't know if Jamie is here, we had a buff yesterday and he actually uploaded the module and got it working while we were right there. So and if you need X3D files to practice with, we of course have loads on the site. So it's in Sandbox but hopefully it'll be approved soon and I certainly encourage everyone to try it out. So I'm gonna go to Leonard, I'll go to you now and he'll tell you more about the standard. So as we're doing these switches, if anybody has any questions here for Megan, come up to the microphone up there so we can capture it on the recordings. We can take a couple of questions now if you have any. Also for those people in the back, you may wanna move forward. Some of the slides may have content that gets a little small, not that it's critical that you see it right now, you can always capture the video and the slides are online. There we go. Complete with sound effects. So these are also slides I presented at the baffle yesterday. We're gonna skip it, it's one combined deck. So the slides we skipped will be the more technical nature and dealing with more code and this is more of the presentation of capabilities of X3D. So this is a complete overview of the slide set. We will be touching on about half of the topics. First off, what is X3D? And this is not gonna be a course on how you create X3D that's fairly involved. There are quite a number of content tools such as Maya and Blender, which will create X3D. Also most of the CAD tools will output X3D or Virmul and do that so you're not needing to do this by hand. It's a rather extensive process. But when you're done, you do create scenes that are fully animated involving rich media. In this case, it doesn't have audio but it's fairly simple to add. This one has an animated camera but with the controls over here in the top left, you can switch to a camera that is user controllable. This particular scene is nice because it's very visually rich and it will play for itself and it loops around so you don't need to continually interact with it. The top left, there's a counter showing the resources that are coming down. This is a live demo going on for a very slow internet right now so we may not see the whole thing. But this is linked from the slide so you can get to it. These examples were all done by the developers of X3DOM, which is a library produced by Fraunhofer and we'll put this up later because it'll take too long. Web3D consortium is the developer as a standards development organization for the X3D standard. X3D is an ISO royalty free open standard. It's usable by anybody without the need to pay for royalties to, for any purpose involved in that. It will run in browsers as you saw with that example. It also runs in standalone systems and in plugins. It runs on phones, tablets, desktops, laptops and cave environments and pretty much anything that can handle a WebGL or direct X type interface. Web3D consortium, talked about that. Their site is one of the example sites that I'll use for showing a simple plugin. X3DOM is X3D plus HTML5 plus JavaScript. It all runs in the browser, on the phones. If you have any phone you can go to these slides and pick up most of the examples. The really big ones like the cathedral take a lot longer and may crash your phone depending upon the particular sophistication or capacity of the phone. So the integration into HTML is fairly easy. It requires one external JavaScript and one external CSS and some code. See it there? And it just runs right in there. And this simple example of a box that's user-controllable in terms of orientation. Anybody who attended the AngularJS talked just before lunch. They did talk about cores. I am not going to go into the details. There's details in the slides here for reference. You need to pull out the stuff but it has the same issues that Angular does. So we'll cover three integration methods. Megan talked about one which is the Drupal module. This is in Sandbox. Not quite ready for production yet but just about to be. There's the old traditional iframe method which brings in anything external to the page just drops it into a box you identify. And that's the case of this globe here. And this is just a screen capture but in the website you can manipulate the globe. It also goes to a separate application where you can get the current weather for any point on the earth. The partial integration we'll spend most of the rest of the time on is involving moving the models so that they're visualized on a phone. And the neat thing about that is that the phone there also can track motion. So as you reorient the phone either by looking up, down, left, right you can see different parts of the model. And we have to do this one. This model was loaded up yesterday, day before. It's the flu virus. It's available. Here's the URL. There's 15 to 20 models there. Many from the NIH. There's also another set of collections of museum, scanned museum objects. They're all visualizing on the phone. And then through another switch which you see over here in the stereo view on the phone or actually in an A environment it will go and you'll see it go into split screen mode. And then using the very expensive device called Google Cardboard. And this runs between five and $15 depending upon the particular model. You will see this in stereo. If you remember the old ViewMaster slides where you click through and you got a pair of like seven different views. This is essentially what this device is. But because you plug your phone right here you get the full interaction that you would with the phone. So it rotates the model. You see it in stereoscopic views. Some models like the flu virus which are particularly round. You see the details. Other models that have large extents in one direction but not necessarily the other one will have a very pronounced 3D effect. And after the talk today people can come up and use this and check it out with their phone and look at the various models. So we're running early here. And I've pretty much finished my talk of the slides. So going back and picking up what we covered about the three integration methods. The inlines with the iframe, a partial integration method into Drupal content. And you get the stereo viewing and also the NIH Drupal module. Plus then the NIH workflow Drupal as a content development system, content creation system. Are there any questions? Overall I'll just, I won't go back to, see if I can go back to the questions. So essentially the crux of this is that everything is done open source. Which I know being the Drupal community you would all appreciate. It's all really simple and I think you can see that there's the opportunity there to provide a lot of rich content for your user base. And as well all of this openness means open government. So that's kind of exciting. We actually, on our developer page you'll find links to. We built an API actually with Squishy Media. Greg Lunche was here earlier. He's a Squishy Media. He was involved in organizing the conference. And we got a lot of help from 18F which is part of the GSA to get this API out there and just see what people are gonna do with it. And we're kind of excited to see what they'll do with that. The code for our pipelines is gonna be up on GitHub soon. And then we will, and then there's the module. So we're really trying to put this out there. And actually the entire site because it's in Drupal is completely transferable. So my goal was kind of all right well let's get a 3dprint.nist.gov and a 3dprint.rme.mil and see how it goes from there. So getting more return on your taxpayer dollars. And one of our things we are excited about is we were written up, if anyone is aware of Ken Lane, the API evangelist gave us some great praise for mainly for Squishy Media for making just a great really easy to use API. So again we'll have the slides up and there'll be links to the Sandbox. You can just search Sandbox X3DOM and you'll find it there. I encourage you try it out. And as I said hopefully that'll be approved but it is working now. So we had someone test it yesterday here. They had it set up, run in really quickly. So we've got a small team that's around from a couple different institutes beyond mine at NIH. We've really reached out to a lot of, there's so many people that we would have to think for this but sort of that theme was getting, reaching out to sort of getting people to help you think outside the box. And so there's our final thanks. And if anyone has any questions, certainly or come on up and try the Google Cardboard. This place to start is realism.com slash models or there's a menu item. Well as long as it should display in here. Maybe you have to unlock it. Yeah, if you have unlocked it. Yeah. Okay, yeah, okay, so that should be close to the screen. No, it doesn't go full screen. There's two links there. The picture takes you to model. There's also next to it, a model and a stereo link. Here's the influenza for everybody who wants to take a look. That's influenza right there. I'm sure you should in there. Going full screen. You take it out of the case. It's just a little bit too thick for it to fit in. You have to turn around completely side by side. Side by side. Some phones. It isn't quite. Yes. It isn't. What kind of, oh, you don't have a kind of browser. This thing here, it's not the stereo view. So this is the regular model view. And then the other way around. Oh no. Well, that's. While it's downloading, you can see it counting down there. So this is another biologic model. Oh yeah. This is yours, it's ready to move. You may be seeing that the picture's for the phone. It worked too well. Yeah, let's hold it. Yeah, so this was made last year and the phones that designed for this were phones that were a little bit smaller than they got. It's real simple because the Oculus Rift was selling for like $1,500. And this is, and so if you wanted to illustrate this and you want to take it to Asia or Africa, you can't take a breath because they're too expensive. You can't. But this one, yeah, okay. They're not cheap by their economic standards, but they're easy to take. They fold up flat like a CD mailing box. Yeah. Or you can ship it easily. It ships in a nice box. You don't need a special packing. You know, it's its own packing. Yeah. You know, the only really damaged, oh, I lost that already, is the lenses. Yeah. Well, it folds up. There's some glue tape here, so I can't unfold it. But in the, no, velcro on top, but there's actually double stick tape. When you get it, it's a box about this size about that thick. And really light. So, and it's, yeah, and so it makes it very easy. And if you need for education purposes, for medical purposes, everybody's got a phone. And to run a Rift, you need a computer, a laptop or a desktop, you know, pretty big one, too. So it's a major effort, whereas this is very easy to do. And we can take it to shows like this, and if we lose it, yeah. It's unfortunate, but you're not losing a major thing. Yeah. So that makes it really nice. The pattern for this is available for free online. Yeah. No, no, the pattern is like Google. I need to put some links on it, yeah. But I do have some links on the realism site from a couple of blog posts about that, but I should, some engineers at Google. So that's why I get nicknamed Google Cardboard, but there's also Dodo, yeah. Dodo case makes it, makes one, Samsung has a Gear VR, which is all, those, these are essentially the same. Really simple design. And to go, it's like they talk to IKEA to go from their flat package to the final. And it's not even difficult to put together. It's not too complex. Do you have a card? South Korea? Yeah. You, Han, how's that come? The web 3D consortium has a Korea chapter. Yes. Yeah, I'll be around. I, we just have to leave this room because there's another presentation here, but we'll be around both Megan and I will be around for, oh, okay, so the, the printed presentation. It's great, yeah, I'm gonna work it out. It works really well. And actually, it's Google really sticking up.