Hello, in this free jF video, we are going to look at implementing an ugly 3d. And in glyphic 3d, most likely you know what it is, if you don't know what it is, it's a way of doing 3d 3d as in what you would go to the cinema put some glasses on and have objects look more realistic in terms of depth, and illusion. So Anna gliffy is one of the many forms of 3d there are other 3d technologies as well. This is one of the more primitive technologies but it's easy to do without any extra hardware for your screen. You just do a purely in software and you just have glasses that can render or that can filter these two images that so I'm pretty sure you've seen these sort of images before the sort of video before it's quite big in the early 2000s. Or Remember, you could go and see the Spy Kids movie things cost by kids 3000 or Viking 3d and you Get a poster and some analytic 3d glasses very inexpensive.
So to implement this actually, before we do that, I would like to mention that we've added a bunch of objects already, nothing that we haven't already covered. It's just so the actual scene was a bit more fleshed out. So if I refresh, we have our head, but if we rotate round, got a cube there, got a cube there and got a school there. To give you a sense of how far these objects are. Let me zoom out and rotate. So we've got more of a bird's eye view.
As you can see, the head here is tiny compared to go and twice very far. Plus, the score is immensely far away. So let me zoom back in adequately, the head is tiny. So to implement 3d, first thing you need to do is add the ANA glyphic 3d JavaScript file. To do that, go to your free jazz master file. As you drop, make sure you're using the same version as you use for the free jazz for don't mix and match.
Go to examples, scroll down to the J s folder. And in there you want to go to Effect and a glyph effect. I just want to copy that. As usual, if you want to check out all the other different effects and just general functionality within free j s, go to the free js.org website. There's documentation and examples with sample code. And that will serve you well so just copy that.
Go to your project directory. I'm going to right click Show in Finder, paste it into here. And now before we actually start coding our world to be 3d we just need to include it so I'm gonna duplicate one of these lines. change this to an ugly effect. And now what we need to do is create an effect for our analysts. So anywhere after this window, if we just do VA effect equals new three dot, Ana glare effect and in here you specify the renderer which is what we created right there renderer.
And now we want now to do effect dot set size. And for this we just do window.in A with comma window.in height. It's essentially the same as what we've done right here. So it is that simple once you have done that, if you scroll down where we have this render method instead of doing renderer dot render scene camera, what you want to do is effect dot render. So we save that go back to our browser reload this page. As you can see, we now have an analytic effect for you had these are red and cyan, red and green or red and blue glasses you would actually be able to see free date that's it for creating a game with analytic 3d, very simple stuff or software base apart from the actual glasses.
You don't need anything. If you have any questions feel free to post them on our education platform sonar learning Dakota UK forward slash questions dot php and we will see you in the next video