How To Create 3D Interactive Web Experiences in Blender 2.80 & Verge3D

hey and welcome to another tutorial by city bouquets comm today we're gonna be making the interactive interior scene that you see in front of you using a blender and were 3d if you've never heard of earth 3d before it's a great tool that allows exporting blender projects to have app friendly format and adding functionality using a very easy to understand visual programming language called puzzles this video will show you the exact process of creating an interactive 3d interior scene we'll start by modeling lighting and shading the scene in blender then optimizing it so it can be displayed in real time in a web browser and making it interactive using versus wheedies puzzle editor and some basic JavaScript so let's open blender and make it happen when modeling and interior scene I always start with the floor I've already created a floor plan that I'm using is an empty image viewing the scene in orthographic view using a plane and some loop cuts you can add them by pressing ctrl or it's very easy to model the floor next we can create the walls and the ceiling by selecting all faces and then pressing E and 2.4 to extrude them by 2.4 meters because we want to add a different material to the floor and to the wall it might be a good idea to separates them which you can do by selecting the floor phases present P and clicking selection to create a baseboard of the wall you can select the bottom edges of the walls duplicate them by pressing shift D and also separate them from the wall then we can add some height to the baseboard by extruding the edges and add some sickness tweet using the solidify modifier next we can smoothen the edges by adding a bevel modifier to add the windows we first need to cut the holes into the wall which you can do by adding luke cuts and then deleting some faces then you can add a window by pressing shift a and going to mesh or Capac window I also did the same process for the door but I did not cut a space for the door since you can't open it in the final project most furniture models in the scene are Pavitra a company that makes very comfortable furniture you can download them from their website for free you can find 3d models of most of their products on each products page by going to information and then look at data then you can download a 3d s file sadly you can deport a 3ds file into a blender 2.8 yet but you can import it in blender 2.79 by going to file import 3d studio then append it from there the topology of the models is usually very bad since they are not designed for real-time rendering so we need to optimize them a bit first we want to get rid of the traced apology and convert it to cross by pressing alt J there will probably be some overlapping geometry but you can get rid of it by going to vertex and then clicking remove doubles now you should be able to remove some loops with edge select mode activated alt click any edge that's part of the loop you want to remove so the entire loop is selected if that's not possible the trace the COTS operation wasn't perfect and we have to do some manual cleanup which sucks but it's worth it when you've selected a loop press X and click dissolve edges so the loop will be deleted without leaving an empty space or just click ctrl X which does exactly the same under more organic models in my room this is the couch only I also added the CIMMYT modifier to reduce the number of vertices the object has you can try all three algorithms but I usually go if collapse and decrease the ratio to a point where the model still looks decent but also has a manageable amount of vertices in the kitchen I modeled most objects by myself to model the cabinet's you can just use some cubes and scale them on the XY and z axis because you can't open the drawers in the final product I obviously did not model the interior of them I created a countertop in the same way using a queue and the bevel modifier to create a sink we can add another view place it to everyone to sink to be and add some bevel to it to cut a hole into the countertop select the countertop add a boolean modifier with the operation set to difference and use the beveled cube we've created before as the object if you now apply the modifier and move the bevel cube out of the way you'll see that there is a hole in the countertop then I use the bottom half of the bellow cube as the actual sink itself creating the faucet was also quite straightforward to model it we can start with a circle and then extrude and scale the edges to our liking you might notice that it's quite hard to create a good looking curve but just using extrude but there's a nice tool called bridge edge loops which you can use to connect multiple loops go to edges bridge edge loops and increase the number of cuts to get a smooth curve to model the handles you can start with a plane as some Lucas and extrude them just like we did at the beginning with the floor rental balls I've also added a bevel modifier here to bevel the edges which has making the 3d model look more realistic when I rendered to create lighting I used an in and map from hgri Haven a website that offers 3/8 your eyes since you can't really enter a realistic-looking interior in real time in a web browser we have to bake the lighting into texture maps but before we can bake the light we need to unwrap all objects it would be a real pain to do that for every single object in the scene so we're going to join them together as one object now we can go to edit mode select all faces press you and click on smart UV project to automatically unwrap the entire mesh then I scaled down the URIs for the areas that he won't see in the final product anyway for instance the bottom of the couch and so on I also recommend scaling down the UVs of the ceiling since I don't expect the user of the product to look at the ceiling very closely so we don't need a lot of detail there then you can select all the use and go to URIs pack islands to automatically tidy up the uese before we can start baking we need to create a new material that we want to bake select one of the objects open the shade your editor and to be able to edit the object's material sent a shader type to object then we can create a new material by clicking on this button let's call it base material by default it will add a principal shader let's elite that and add a diffuse shader instead because we only want to bake shadows next open the image editor and create a new texture set a resolution to 4096 by 4096 pixels and make sure you've checked first two-bit float so we can save values greater than 1 then click OK in order to bake onto this texture map need to add this image as an image node to our base material so the blender knows - which texture it should bake the light then - finally bake it we can go to the render tab scroll down to bake set a baked type - combined and a margin to about 4 pixels then hit bake after baking is done you will probably see some blond highlights that's because by default filmic doesn't affect textures in order to make filmic effects this texture you can press n to bring up the properties region and then activate the box next to view s render this way the texture will be affected by all changes you do in the color management section in the render tab of the properties editor then we can export the texture by going to image save as or hitting shift s certified to PNG and to call it f 216 and save it wherever you want next we need to denies the texture I use affinity photo to do this but feel free to use any image editing software you want then drag and drop the texture into affinity photo to deny the texture we can click the sphere icon here and choose the noise filter from the list a choice of a list until you're happy with the result and then close the window next open the export settings by going to file export because the browser needs to download all textures never seen when loading it want the file size of the image to be as small as possible select jpg as file format and set the quality to about 18 so we have nice balance between quality and speed hit export and save it to your computer next we're going to set up 3d scene and create the materials to download verse lady head over to soft eight softer calm click at verse three D select verse we defer blender and downloaded quick note here verse 3d is free for evaluation purposes only if you want to use it in a real project you have to buy it unpack the zip file to a directory of your choice then open blender and go to user preferences go to file tab find the scripts field and select the directory where you unpacked were 3d then save the user settings close and restart blender then go to the add-ons tab search reverse 3d and activated if you've done everything correctly a sneak-peek and the app manager button should appear in order to create a new verse vdf need to open the app manager by pressing this button then enter our name and press create new app after you've created the app the peers in the list of projects by clicking the blue icon next to it you can run the full application in the browser by clicking the green icon you can run a 3d scene only without a user interface by clicking on the pulses icon you can enter the puzzle editor by clicking on the blender icon you can open the senior blender by clicking the world icon you can publish your app on the web so let's open the file in blender and start working you'll notice that there are some default objects in the scene by clicking sneak-peek you can preview the scene in the browser if you want to run scene from the verse 3d app manager you first need to export it as a gltf file you can do this by going to file export verse Reedy gltf then click the blue icon to see the application in the browser next we want to import a senior's created before into this planned file we can do this by going to file app and navigating to your older bland file and then selecting all objects in the object folder open the shader editor and replace the diffuse shader that the object currently has of an emission shader also make sure the viewport shading is set we rendered so we'll get an accurate representation of what the material looks like next we want to add our baked light into the material press shift a go to texture image texture and add an image node next we're going to connect the image node to the mission node and voila we've created our base material then we're going to separate all object that should have a unique material example I want all the chair frames to have the same material at the same time so I'm going to separate them from the current mesh you could use material slots to use different materials in different parts of an object but separating them makes programming later much easier speaking of making programming easier we should probably also rename our objects using unique file names so we won't have to deal with 20 different objects that are all named cube or plane next we're going to take care of the couch material in order to only change the couch the material without changing every material in the scene we need to press a small number next to the name of the material this way you will duplicate the current material only next we can add a mix RGB node and drop it between the image texture and the emission shader if you set the blend tab to multiply and the factor eight one you can colorize the material with the bottom input I want the couch to look more like actual fabric so let's search for some free fabric textures online I hope they'll have a few this one looks promising let's just download the base color map since we want our application to load very fast remember every texture in our scene has to be downloaded by the users browser and we're going to change the color in blender anyway let's make this texture grayscale open your favorite image editing software in my case it's affinity photo again and import the image to make it grayscale we can go to document color format grayscale next we can open the export menu pressing command alt shift as if you're on Mac or ctrl alt shift as if you're on Windows set the resolution to about 512 by 512 pixels and the quality to about 18 and export it as a JPEG of course you can also choose a different resolution make sure it's power of 2 otherwise very diva of scale the texture down then import the image as an image texture to blender and mix it with the previous notes using the mix RGB node set multiply again now you'll see that the texture is mixed with the material but the scale is probably much too big we can easily fix this by adding a mapping and a texture coordinate node connect the UV of the texture coordinate node to the mapping node then connect a vector of the mapping node to the vector of the image node by the way if you have the node Wrangler add-on enabled you can do this in no time by selecting the image and then hitting ctrl T then adjust the x and y scale until the scale looks realistic we might also want to add a color ramp node after the fabric texture to make a material a bit brighter next we're going to rename the material duplicated a bunch of times and create a few variations that's basically the workflow for every material in the scene to summit heroes I've also added a bit of gloss using a glossy note most textures for example the floor textures are from CG bouquets to come I also recommend searching occo textures great site with tons of good textures the table material for instance has been created with the texture of this site now we can start making the scene interactive before we can start using the puzzles we need to export the scene as a gltf if you haven't done this yet go to file export verse 3d gltf then open the app manager and click the puzzles icon now this is the puzzles editor there are two tabs the init tab and the main tab in the main tab you create scripts that effect of 3d objects in the scene like changing the materials and so on in the init tab you can create scripts that don't affect the objects in 3d scene like changing the loading icon' we're not going to use the init tab in this tutorial it's actually quite simple to create a script using puzzles for instance if you want to open a web page as soon as the application is loaded we can just use this open web page block if you want to open the web page only when a specific object is clicked for instance the carpet we can add the event click event block which will trigger the blocks that are inside it and add a selector to select your carpet then we can put the open web page block inside the event look now the web page only opens when you click the carpet obviously that's not what you want but I hope it helps to demonstrate other puzzles work what you do want however is for the objects to display this kind of highlight or this outline that is saw in the preview and the user hovers over them in order to do that we can use the outline enabled block which can find in a main tab in the objects category now by default this block is grayed out because we didn't enable the outline effect in our blend file we can change this by going back to our blend file then going to the render tab in the properties editor and scrolling down to reverse 3d settings here you can enable outlines and also change few settings I'm not going to change anything because I quite like the default style next we'll need to react sport it go back to the puzzles editor and you reload the page so we can use outline enable block refers gonna add the effect to one object only the couch now you should be able to direct the outline enable block into the verse space and actually use it we want the objects to be highlighted only and you hover over them to do this we need an event block so let's add it even hover the event block then we will select the couch using a selector block and move the outline in a block into the first slot of Devon look we also want the outside to be disabled when the user isn't hovering over the object anymore so let's copy and paste our outline enabled lockdown and set it to disabled let's check if it works and it doesn't because after every change we need to save the scripts using this button and run the application using this button now it does work next we want the camera to fly to an object when you click on it to do this we can use the trained camera block in the camera category this blocks makes the camera fly to the position of an object and point it to another object the cool thing is it doesn't have to be a mesh object it can also be a empty object if you've never used empty objects before they are basically just objects without actual geometry so the user won't see them when the scene is displayed in the browser you can add empty objects in blender by pressing shift a empty and then choose any objects you like I want the camera to be at this place and face into this direction of the user clicks the couch so I'm going to add one empty object here and not end another on here next we need to really export the scene so you can use the empty objects in the puzzles editor then we can place a tween camera block into a van clicked block save the scripts around the application and see if it works it does great now we can repeat this process for every piece of furniture in scene next we're going to user interface on top of it I'm not going to explain every bit of it if you have some problems following along you can download the finish scene after watching the video and take a closer look at it or just ask in the comment section some HTML and CSS knowledge probably is required to understand this part if you check the folder of your project you'll see that verse 3d has created a few files for us an HTML file which actually is open when you press the blue button in the app manager a JavaScript file where we can add more functionality and the CSS file can style the HTML elements the background of the application is just the death if the position set to absolute and the top set to 0 the height is set to a hundred percent so it covers the entire page from top to bottom and the width is set to 25% I've also added some padding so the elements inside a div have some room to brief to separate the user interface a bit from the 3d scene I've also added a box shadow with some blur the most important attribute though is to see index which I've set to 1 to see index basically defines when an element is rendered the greater is the index the later the element is rendered the 3d scene has seen index of zero so we've said the scene the X of the user interface to anything greater than zero it will be displayed on top of the 3d scene which is what we want the categories are just some headers the change occurs due to a pointer when hovering over them the elements where you can change the material or just add if after this place at a grid the name as the first element and to SVG's as the second and the third elements now to make this buttons work we need to use some JavaScript because we need the buttons of the interface to communicate if the objects in the 3d scene it is not possible to do this with the puzzles editor only if you open the J's file which was automatically generated when creating the project through the app manager you'll see a bunch of code which is already there the part that interests us starts on line 169 here we can define our own functions which we then can call from the puzzles editor example when a couch is clicked we want the camera to fly to the living area hide the categories and show only the controls for the living room and to go back button so in JavaScript we're going to create a function that sets the display of the categories and the controls of all other areas to none in the display of delivering room controls to block then in the puzzles editor we're going to call this function when the object is clicked and also added theme camera block to move the camera next we want the material to change when you click on an arrow button in order to do that you first need to define which material belongs to which object I can do that by using lists a list is always stored as a variable so let's go to the variables category and create a new one and first create a list of couch materials called something like couch materials then we can set a variable to a list of materials if you want to add more than three materials to a list you can add more elements by clicking the small blue icon and adding a few more items to the block now we can add the materials to the list using the material selectors you'll notice that there's only one material for the couch even though we've created multiple ones that's because verse radio only exports materials that are actually used by an object in blender we can easily fix that by adding a plane for each unused material and scene and adding their unused materials to them if we then really export the scene and reload the puzzles editor the materials will show up now we'll need to figure out how to program it so that if we click the right arrow the software will change the next material on the list and if we press the left arrow it will change for the previous material the solution I've come up is relatively simple first need to create a new variable let's call a couch material change and set it to a number which is divisible by the number of materials in the list for instance 500 then to make the material change when I click the right arrow need to add an event listener to the java script which reacts when the arrow is clicked when the event listener reacts it's called the function called couch next because you want the couch to switch to the next material in the list the name obviously doesn't matter but they make sense to name it something meaningful then and the couch next function is called a script in the pastas editor gets triggered and adds one to the couch material change variable then the next block takes the result of the remainder of couch material change divided by the lengths of couch materials aka the number of couch materials chooses the material in the list with number of the result and applies it to the object then I did the same for the left button but reduced the cow material change variable by one each time the function is called instead of adding one so that's pretty much it the only thing left to do is maybe make some color adjustment which you can do by using the post processing block thanks a lot for watching I really hope you've learned something in this tutorial you can download the entire project on the blog post and CG book has to come if you're watching on YouTube there's a link to it in the video description also if you want to buy a verse 3d you can get a five percent off using the coupon code below the video [Music] [Music]

Channel: Dorian Zgraggen

Views: 46,616

Keywords: cgbookcase.com, cg bookcase, cgbookcase, verge 3d tutorial, blender webgl export, verge 3d introduction, verge 3d workflow, blender 2.8 beta, blender gltf, cc0textures, cc0 textures, real-time rendering, web browser pbr, blend4web, blend4web tutorial, tutorial, guide, howto, web, engine, realtime, interactive 3d, verge 3d puzzles, verge 3d javascript, verge 3d example, architecture walkthrough tutorial, blender interior render tutorial, blender achviz, free pbr textures

Id: U6aGboR_sHE

Length: 28min 4sec (1684 seconds)

Published: Fri Jan 04 2019