Verge3D: The Ultimate Blender Web Engine

get ready to witness the power of blender packed into a web browser like never before this is verge 3d hey guys how's it going my name is brand I'm the host of Remington graphics today we're gonna be taking a look at an add-on for blender called verge 3d vers 3d allows you to create projects in blender and later export them to be used on your website or any other web-based application in this video I'm going to be going over the basics of Verge 3d and giving you everything you need to know in order to create your own projects with it we'll start off with the installation first open up your web browser and head over to soft eighth soft comm this is who created verge 3d to download it click the download verge 3d button in the upper right this will take you to a downloads page and then click the download verge 3d button which will start the download it is a 260 megabyte download so it's a little bit large and it'll probably take a few minutes to download while you're waiting you can go ahead and grab a cup of coffee or hot chocolate if you don't like coffee I don't like coffee anyway my download just finished so I'm gonna go ahead and open that up well exit out of Chrome because we won't be needing that and I'm going to extract the verge 3d file to a location that I'll remember I have a specific folder on my computer where I put all my add-ons and blender assets so I'll be putting it in that folder once it's done extracting we can exit out of everything else and open up blender so now that we have the files on our computer we need to enable verge 3d I'll start by clicking file in the upper left and coming down to the user Preferences option this opens up the user Preferences menu if you're not already in the file tab up top make sure you click on that then look down the list until you find scripts when you come to the scripts menu look all the way to the right and there should be a button that looks like a folder click that and then go ahead and navigate to that same folder where you saved the verge 3d files from before go so far as opening the verge 3d folder but don't open any of the files in there once you have the folder open you can go ahead and click accept now you can see that our directory has been copied right here we'll click Save user settings at the bottom of the window and then we can exit out a blender complete but we're gonna launch it right away again because we have to restart blender in order to get it to work now if I come up to file again go into the user Preferences menu and this time go to the add-ons tab at the very bottom of the categories list on the left there should be an option that says urge 3d and when we click that category we can see The Verge 3d add-on if the box to the left of the add-on is not already checked make sure you check it this is how you enable the add-on now we can click save user settings and our add-on is fully enabled to access the verge 3d engine we can come up to the top here where it says cycles render or maybe it says blender internal or blender render select verge 3d off that list now we're ready to start working one of the best things about verge 3d is that it has essentially zero learning curve when it comes to the actual building of a scene it functions off of blender so anything you create in a blender scene can be transferred over to a verge 3d scene making it super easy especially for those who are familiar with blender so for example if I wanted to view this scene we have open right now although it is basic I can just come down to the bottom here and click sneak-peek this opens up a web browser connected to the local port that verge 3d is being hosted on say I wanted to make the scene a little bit more complicated well I can add any shape I want in this case I'll add a monkey head or Suzanne is the monkey heads name in case you weren't familiar with that but I had that in blender and if I click sneak-peek again our web browser opens up and we can now see that we have a monkey head in our scene as well as our starter cube you can make these scenes just about as complicated as you want just keep in mind that the more faces you have in the scene the longer it'll take to load high poly count may also affect the framerate of the clients computer when they're trying to load it if they don't have adequate hardware but even then I haven't run into any issues with things unless I'm going into absolutely insane amounts of polygons so really Verge 3d is inclusive of just about anything you throughout it as long as it's reasonable perfect so now we know how to transfer a basic blender scene into Verge 3d but what about materials how do we add materials to something well fortunately that's also very easy with Verge 3d virtually is based off of the blender internal material creation system so anything you can create in the under internal system comes out in verge 3d just fine all right so without any teaching at all you already pretty much understand the concept behind verge 3d so let's go ahead and try and create something now I'm a big fan of drones I don't know why I just think they're one of the coolest pieces of new tech out there so I want to teach people how to fly a drone with verge 3d more specifically I want to teach them about the difference between pitch yaw and roll to do this I'm only going to need three different things one a model of a drone to some basic arrow models to demonstrate directions and three the puzzles feature of verge 3d the puzzles invert 3d is a form of visual programming that's really easy to use and allows you to do a lot of really amazing interactive things with your Verge 3d project will be looking into those more shortly here but for now let's go ahead and prep the drone model so for the sake of time I don't want to actually have to model a quadcopter myself so I headed over to sketchfab and downloaded an RC quadcopter model by a tool push a link to this project and the Creative Commons Attribution is available in the description once it's done downloading I'm gonna go ahead and open up the zip file it's in and extract the WRL file onto my desktop by default the WRL file type is not compatible with blender so we'll have to convert it into a bj file if you're on Windows 10 you can use the handy 3d builder application that's built into Windows 10 to convert it all you have to do is click these three little lines in the upper left click save as change the file name and then change it to an obj format if you're on any other sort of operating system there are plenty of online resources that allow you to convert WRL files into obj files with ease alternatively you can just find a different quadcopter model doesn't matter which one you use I just like this one I'll switch the rendering engine over to verge 3d delete everything in our startup scene and import our new drone oaj model from my desktop where I saved it it is a little bit big for the scene so I'm gonna scale it down a lot and rotate it until it's in the proper position which took a lot of tweaking because it was so out of scale but now I've got it in a pretty good situation to continue working with it so the second thing we is those arrow models that I mentioned earlier so I'm going to model those really quick it's a very basic model if you would like to follow along step by step and you want to use my arrow models there will be a link down in the description that you can download those from although if you want to make your own or do something completely different that's up to you there's nothing special about the models they're just models alright so now I'm going to duplicate this arrow model for each of the axes of rotation that our drone has we've already got pitched so we're gonna duplicate this and rotate it 90 degrees across the z-axis to give us roll and finally we'll duplicate another four yaw perfect so now I'm going to add colors to each of these in the materials menu to correspond with the axis that they're on so pitch is going to be green because it's on the y-axis roll is going to be red because it's on the x-axis and you all will be blue because it's on the z-axis I'm also going to scooch our y'all arrow up a bit because it's a little bit low in my opinion so before we can preview this in verge 3d we actually need to add a lamps or object is you know lit from an angle so I'm gonna add a Sun lamp and we also need to add a camera so I'm gonna add a camera really quick and these two things are necessary for Verge 3d to work properly once we have our camera in the scene and positioned we can go ahead and click the sneak peek button and we can see that we now see our model isn't that neat now by doing this I can see that there are some things I'm going to change for what I'm gonna change up the material colors of the drone because it's very gray and bland right now I'm gonna go for a black and blue vibe with it it with a little bit of white in there and I'm also gonna give it smooth shading so I did exactly that I changed it to black and then I also changed the shading to smooth and in the process I also noticed that the model was split up into a few different parts so I just joined these together to make it one big mesh I did leave the propeller separate though because I want to try and animate those for the final result these small cosmetic changes made our model look way better and I think it's time we do some basic animating we'll be using these animations to demonstrate the different directions that it rotates in in addition to the arrows it makes things a little bit easier for the learner to understand we'll start off by animating the propeller spin now each of these propellers has the same origin as the whole drone 3d model so I'm first going to set the origin of the propeller objects to its geometry that way we can animate them properly I can perform this action by pressing ctrl alt C and then selecting origin - geometry from the list I'll repeat this action with all four propellers and then we'll start animating the actual animation task of these propellers is very simple all I'm going to do is go to frame zero set a rotation keyframe then go to frame five rotate it across the z-axis 180 degrees and then add another rotation keyframe that's the entire animation for each propeller I'm going to repeat this for all four propellers as well and as you can see all four my propellers are now successfully animated so there's still two things we have to do from here for one we have to parent all the propellers to the drone that way when we move the drone the propellers move with it because we will be animating the drone and second we also need to change the interpolation of the propeller animation so to do this I'm just gonna split my window here open up the graph editor select everything well actually first I'm gonna make sure all for my propellers are selected then I'm going to select all the keyframes and press T then select linear off the list and this will give our keyframes a linear interpolation that way there is no smoothing going on all right up next we have to take into consideration some of bird's 3ds animation settings which are actually pretty useful we can access these by going up into the objects menu and scrolling down to the very bottom and you can see we have Verge 3d settings and these are already set up perfectly for what we want with our propellers for one that will auto start they'll repeat the animation over and over and they'll repeat infinitely which is what we want but not so much for the drone body since the animations for our drone are going to be responsive to the user's interactions we want to set this to only happen once that way it doesn't repeat itself over and over so let's start animating our drone to start off we're going to set a base keyframe at keyframes 0 then we'll go about 10 frames into the future and we'll rotate it forward on our y-axis in this case so the pitch 10 degrees well insert another keyframe then we'll go about 20 key frames into the future and rotate it backwards 10 degrees and rotate it backwards once again 10 degrees or just backwards 20 degrees so another keyframe 10 frames into the future and reset it back to its default position next I'm going to make a marker at the beginning by pressing M then ctrl M to name it and we'll name this pitch because that is what we are affecting now if we play our animation you can see that it rocks back and forth across the y-axis as though the pitch is changing and this is the desired effect I'm going for so I'm going to start with frame 40 this time and we're just going to do the same thing this time except for role 10 degrees 10 frames 20 degrees 20 frames 10 frames back to normal and I'll repeat this across the z-axis as well for yah and now if we hit play from the beginning we can see we have our pitch roll and yaw animations all working properly and as expected with some nice markers for naming I'm also going to shorten the time line to 120 frames because that's how long our animation actually takes if you have a longer animation or shorter animation that's up to you I'm not going to do anything else to fancy with the animation I think this is good so it's time to move on to puzzles which is my personal favorite part of this project now for all intents and purposes our blender file is still just a blender project and we can just preview it with Verge 3ds engine we need to actually convert it into a verge treaty project in order to use puzzles to do this we need to come down to the bottom here and click the app manager button this button opens up our browser and we can see a bunch of pre-made verge 3d projects meant for demo purposes in our case we aren't gonna be focusing so much on those were instead going to be creating our own to create our own verts 3d project we can come over to the right here and we can create a new project I'm going to name my project drone instructional demo and then I'm going to leave the rest of the settings the same upon clicking create app it brings us to a confirmation page and then we can go back to the main page by clicking the hyperlink on the screen in order to open our verge 3d app all we have to do is click the blender icon in the same row as our apps title and when it opens all we have is a cube and you may be thinking wait where did all my hard work go that's because this is a different file and all we need to do is transfer the files over since we aren't going to be needing any of the data in this blender file you can go ahead and delete all the objects in data one by one or if you're cool like me and have this awesome add-on called atom bomb you can get rid of all the data from your blender file with a click of a button you guys want to check out atom bomb there will be a link down in the description it's totally worth it next up we need to append our data from our other blend file to do this we're going to come up to file click append navigate to where our original file is saved mine was on my desktop and then we're going to import all the data that we had so in my case all I had was a bunch of objects in my scene so I'm going to import all of those if you made any other data in your blender file such as worlds or node groups I'd recommend importing those now as well otherwise you'll have to come back later and things might get a little bit messy and upon clicking append we can see that our objects have been successfully appended from the other file into this one and while I have the chance I'm also going to go through and rename all of my objects they have kind of vague names such as NURBS curve 0:01 and that's a little bit more vague than I'd like it to be so I'm going to rename all of them according to what they are this will help a lot with programming so I'd recommend you do this as well you can also save and close the blender version of this file because we won't be needing it anymore this next step is very important and you'll have to do it no matter what your project is so I'd recommend you pay very close attention to the next few steps in order to actually save and utilize our project we need to do two different things first we need to save it just like we would any other project press ctrl s or file save and second you need to click file come down to the export tab and then select merge 3d gltf file this is the file that The Verge 3d engine actually runs off of so it's very important than you export this otherwise your project won't update in your browser once you do this we can reopen Chrome either by clicking the app manager or if you left the window open from last time you can just click into it from there and we can click the little puzzles icon next to our app this opens up Verge 3ds puzzle editor and now we're ready to do some basic visual programming programming might sound a little bit intimidating to some especially those of you without much experience but Verge 3d makes it very easy with their puzzles so programming logic is very basic it takes input and it gives output in this case our program is going to take an input meaning we're going to click something in our scene and it's going to give output meaning it's going to show animation so in this case what I'm going to have it do is if I click the green arrow then it's going to play the pitch animation if I click the red arrow it's going to play the role animation and if I click the blue arrow it'll play the yaw animation I'm guessing this programming is going to be somewhat unfamiliar with some of you so I'm just going to go through it step by step explaining each thing that I do I'm going to start by coming up to the events category here and selecting this loop that says or I guess this event that says when clicked do this so basically what this is saying is one clicked will have a puzzle piece that plugs in here so it says when this object is clicked do and then whatever is in this slot right here so in this case we're going to say well we have to click the green arrow so I'm going to come over to the objects tab here and I'm going to actually it might not be it's a select sorry the selectors tab is what we want to go to and you can see we have this select an object piece right here and we can plug this in right here and you can see that it snaps together and makes a nice clicking noise as well and we can select whatever object we want so in this case this is the arrow for pitch arrow pitch as you can see that's why we had to rename things and it's already selected which is nice so what we wanted to do is play a specific part of the animation so we can come down to the animation tab we can select this play animation blank from 0 to 1000 with the reversed option and one finish do whatever well select this one and then we have to give it an animation to play the animation is in the selectors tab just like our object so you can see select an animation clip and we'll drag that into there and so you can see it's playing the animation of drom which is what we want it to play the other options are the propellers but we don't have any useful animations on the propellers other than the spinning one that they're already playing so we'll play the drone animation from one frame to another so let's go back to our blender project here select our drone and see where the pitch animation happens from and that happens between 0 and 40 so I'll go back into our editor here and changes from 0 to 40 now I'll click Save in the lower left to save our script and play now when I click the green arrow our animation plays and then stops we can do this as many times as we'd like so I'm going to replicate the same piece of code by selecting it actually I don't know if you can select multiple things oh yeah you can okay so if you select the biggest loop then press ctrl-c and ctrl-v you can duplicate all the code relating to that loop or that event which is really nice so now I want to do roll so roll is our next thing and roll takes place between 40 and 80 so we'll do 40 and 80 now if we save once again and click play now we can have our pitch and if we click the red it'll do roll and if we duplicate this one more time what you can do yaw which is 80 to 120 now once again if we click save play now we do pitch roll yaw just like that we can play any animation if we want to interrupt it we can't unfortunately but that's actually kind of nice in my opinion because then you have to play the animation all the way through but there you have it our script is more or less done now there are a couple other things that you can do with it actually there's sorry a lot of other things you can do with this actually so much so that I can't even go over in this video because that's just how programming is but there are plenty of demo files to investigate and plenty of other things you can play with with birds 3d to get the desired outcome that you would like now if we come into our app manager again we can actually launch our scene by clicking the little blue icon to the side and we get the full version of our application so you can see now all of our code is running just like we made it and it works just flawlessly now from here we can actually embed this into a website or into any other sort of web-based application so it's really great for educational content or if you want to do something like build your own ring I believe is one of the demos here yeah so like for this example you could if you own a jewelry company you can build your own rings with Verge 3d and have people customize them and see what they like and see what looks good to them it's got so much potential it just it's it's hard to wrap it all into one video because there's so much you can do there it really is no limit to it anyway that sums up just about everything for this video I hope you guys enjoyed and be sure to check out Virg 3d if it's something that interests you thank you all for watching and I'll see you guys next time adios [Music]

Channel: Remington Creative

Views: 49,951

Keywords: blender, cycles, tutorial, guide, how to, how-to, beginner, beginners, 3d, vfx, verge, verge3d, web, engine, realtime, program, programming, animate, animation, materials, internal, render, real, time, interactive, educational, education, visual

Id: K-YlwMlVV6A

Length: 20min 24sec (1224 seconds)

Published: Sun Jan 21 2018