 Okay, today we're going to be writing some code that will detect whether WebGL is available on your system. If you enjoy my tutorials and would like to see more, please think about contributing to my Patreon account at patreon.com forward slash metal x 1000. Okay, what we're looking at right here is one of, from one of the very first tutorials, creates a basic scene and a basic plane. So when we run this code, this is what it looks like. Default plane had insane background colors, so it defaults to black with WebGL, and I didn't set any CSS, so we have the white border around there. Very, very simple code from the beginning of this series. But if I open up that, I'm running this on my desktop and right now with an ice weasel, which is basically Firefox. If I switch over to here, this is Midori, which apparently doesn't support WebGL. Now, there's going to be a few different reasons why using WebGL as a renderer may or may not work on your system. It may not work because it's not supported by the browser. This is the case with Internet Explorer, at least earlier versions of Internet Explorer. I'm not sure about the newest version. They might, I think they might be starting to implement it, maybe hopefully soon. Also, your hardware has to be supported. If there's certain, especially if you're working with Chrome, you know, they'll Chrome supports WebGL, but there's certain hardware that's blacklisted. You can go into the settings and enable WebGL and try to use it anyway, but it might crash. So if WebGL is not available, we could always switch over to using Canvas, which doesn't have hardware acceleration, but does have more, it's more, it's been around a little bit longer or accepted a little bit more than WebGL is currently. So there's a trade-off. Probably get better performance with WebGL, but you have a little more compatibility with Canvas. Those are just two options. There's actually a third with CSS that I haven't really messed with. So let's look again at the code. And right here is where we say we create our renderer, and we're saying this is new using the three JS library, their WebGL renderer. And as I showed in the pre-sutorial, if you want to do Canvas, you can say Canvas renderer here with the capital C. Again, that is just, that would make it use Canvas as the renderer, but we want to check, is WebGL available? So first thing we're going to do is right here, we're just going to add in an if statement. We're going to say ifDetector.WebGL. And at this point, we're calling from a Detector, yeah, no, I forgot a T, knew that didn't look right. We're calling this from a pre-made script, which isn't built into the main three JS script, but it comes with the package when you download it. It's under the examples folder. And real quick, I'm just going to copy this line. I have put it in this current directory that I'm working out of, and this should be a link in the description to all the scripts from this series. So follow that. That's one place you can get the script. Or if you download the full WebGL package, again, it's under the examples folder. And it's called DetectorJS, capital D. So that's what we're using right here. We're saying, hey, CheckWebGL, and the exclamation mark here says if it's not available. So this will happen if it's not available. What are we going to do if it's not available? We're going to, well, we could do a bunch of things, but the DetectorJS has a built-in function, Detector.addGetWebGLMessage. Now, if we save this and we go back to Ice Weasel here and hit F5, nothing changes. But if we go into Midori and hit F5, ah, now we get a message up on the screen. Your graphics card does not seem to support WebGL. Find out how to get it here, and you click on there, it brings to the website, gives more information. And that's nice. If you're going to require WebGL, because you need that hardware acceleration for what you're writing, this would be an option. Telling them what to do. Now the user has to go do something. Now, if you don't necessarily need the hardware's acceleration, you kind of want to use it, but you don't need it, well, we have another option here. Instead of doing this, what we'll do is we'll remove this from here, and we'll delete that. We're going to make a little bit more, we're going to say an if-else statement. One line each, although you could do more if you wanted. And right here, we're creating our renderer, right? So what I'm going to do is I'm just going to copy, paste that line up here. So here we're saying, we got rid of that exclamation mark. So we're saying, hey, if WebGL is available, well, then create our renderer using WebGL. Else, meaning it's not available, what we can do here is we'll just say the same thing, but instead of WebGL as our renderer, we'll say Canvas. So here, again, it's just saying, check, is WebGL available? Is it supported on this system, in this browser? If so, create our renderer object using WebGL, if not default to Canvas. And that's all we need to do. We'll save that, go back to ICUs, we'll hit F5, and you'll see nothing has changed because WebGL is supported. So it's going to use the WebGL renderer. If we come back into Midori here, which isn't supporting WebGL, and I hit F5, ah, hey, look, our plane appeared. Now you will notice that one has a white background where the other has a black background. I believe that this issue is just because I haven't set any colors for the background of the renderer. And one, if you don't set anything, the Canvas uses white, where WebGL uses black. So to avoid that, you'll want to use some CSS, which I've shown in previous tutorials, to set the background color, which is something you're probably going to do anyway. And if you're creating a game, you're probably going to have like a cube map to fill the sky or some sort of sky in there. You're probably going to be setting that stuff. But if you don't set anything, be aware that I think it's probably a Canvas versus WebGL option, not necessarily a browser. But I don't really know. I haven't looked into it. I just want you to be aware of that. Set the settings if you want to make sure that it's always the same. I've also noticed in some browsers, when you're using Canvas, because it's not really 3D when you're running with Canvas. It's really 2D, pretending to be 3D. You'll see here the plane is divided up, because you'll get the different polys showing, the polygon showing up. And again, that depends on the browser. I've seen that in some browsers and not others. So it's definitely, in this case, not displaying as well as the WebGL in Firefox or Ice Weasel. But it is working. And at the very least, you've got it working in a majority of browsers, just adding in this little section here. So originally, you just had this line saying, create this renderer. Here we're just saying, check. Can we create this renderer? If not, create this one. And a majority of browsers will allow Canvas. Canvas is a little more accepted at this point. Again, HTML5 is still in development at the point of time that I'm making this video. Hopefully it will see some more stabilization as far as standards in the near future, and more browsers supporting what those standards are once they're firmly set. So very simple. Again, we've added in this detector.js script, which you'll find inside the Web, or the 3JS package under Examples. Or if you follow the link in the descriptions to all these examples, I'll have it there. Once you import that, all you have to do is check WebGL. Is it available or not? If it is, do this. If it's not, do that. So thank you for watching. Please visit filmsbychris.com. That's Chris with the K. It should be a link in the description. Again, as well as a link to all the scripts in the series. And I thank you for watching. I hope that you have a great day. So if you've been following this series since the beginning, originally this was going to be a weekly topic every Friday. You may have noticed that there hasn't been a video for the last, I think, two Fridays. I'm on a new schedule that isn't exactly set yet. But it's going to be what videos I make are going to be decided in part by my Patreon viewers. So I plan on continuing this series. But how quickly and when it happens, all depends on what my supporters want to see. So if you head over onto patreon.com forward slash metal X1000, there should be a link in the description. You can come one of my supporters and you can be one of my patrons. And you will have a little more input and say on what videos are made. So I thank you for watching this. There will be more on this topic, but when and where depends on what my supporters want to see. Thank you for watching. And again, I hope that you have a great day.