Stylized Cartoon Shader In THREE.JS ( Full Explanation )

hey guys today we're going to be taking a look at how you can create these stylized cartoonish shaders in 3GS now before we get started keep in mind that there are a ton of different art styles which you can go for and also there are a ton of different techniques which you can go for uh in this video I'm gonna try to show you one of the most simplest uh techniques available so with that being said let's get started so here inside vs code I have this repo and if I click on this RC folder app.js is where the main stuff happens now you need to scroll down until we find this mesh setup part which is the main part of our app and here we create a geometry a material um and we create a mesh and we add that mesh to the scene in this case we're creating a Taurus nut geometry so you add that Taurus to the scene and there's also this add model function which we're going to use later um but yeah if you run this with npm starts you're gonna get this scene right here a blue boring Taurus okay so how can we make this look cool now I'm going to show you some reference images uh to to really think about what we're dealing with today uh if you look at these references you can see all of them pretty much have a black outline around them so every mesh has a black outline and if you look into the shading of of the mesh the shading looks really flat and 2D looking so that's the effect that we're kind of going for so to implement these uh I'm gonna hop into blender to show you how we can actually do this so I'm going to go into blender I have a blank scene opened and if I press shift a I can add a mesh let's add a monkey I'm going to add some subdivisions to this monkey with Ctrl three uh and that's gonna uh subdivide this monkey three times and I can right click and press shade smooth to make this monkey smooth and make sure you're in uh the render view um tab which is the third ball from the top and uh let's apply this modifier so uh we we can apply the subdivision modifier with click on Arrow and pressing apply so okay we have this monkey now let's go into the material properties Tab and let's click on this plus icon twice now keep in mind that I'm using blender only to show you uh what we're going to do in 3GS we're not going to use any of the missions here in 3GS so uh click on the first one click new and we're going to have a principal bsdf if we click on the second one we can also click new but this time we're going to switch to principal bsdf to animation and change the color of this to Black okay now we have a black material with a white material and let's click on this icon and go into the modifier tab um so you click add modifier and add a solidify so let's find it solidify and what this modifier does is that if you reduce the amount of thickness it's actually gonna add thickness to to the geometry it's pretty cool um now we're going to implement this exact same functionality in a Shader so let's set the thickness here to point zero one minus 0.01 and let's go into the normals flip the normals and go back into the materials section and in the settings tab here uh click on back face calling that's really important we're going to go back here and uh the reason I'm showing you all of this is because we're going to do the exact same thing in in three just it's just a different way of showing you uh in blender so uh here on the materials section uh we're gonna click on this material offset and here this is actually set to zero if we go into this tab the first material here is uh has an index of zero and the second one has an index of one so let's go back here into the modifier Tab and click on this icon um to make this one and you can now see that we have a black ass line so we we went through a couple of steps the first one was uh adding creating a new material uh making sure it is black um turning on back face calling and uh adding a solidifier to that geometry and um making sure the normals are flipped and then uh after that uh we have our nice render with a black house line so let's implement the same thing in three just so I'm going to go back into my scene and I'm gonna create uh a new function call it a solidify so this is going to solidify um the mesh that we have so let's pass in mesh and let's call it here so we're going to call solidify um mesh let's store what this returns in an as line variable and this is going to return a new mesh so let's get started so the first thing that we need is we need the geometry of this mesh so let's call this geometry mesh.geometry and uh we need a new material now so let's create a new Shader material so material equals new three dot shooter material here it is and here we need to add a Vertex Shader and a fragment shooter I'm going to write them here because I'm going to show you a little trick you can use with cheaters in JavaScript so uh I'm gonna add the glsl function behind it to get syntax highlighting and I'm gonna write a quick little vertex Shader here so void main GL uh position is equals to a projection Matrix Matrix multiply by model view Matrix multiplied by Vic 4 of position and one and that's gonna be it um the fragments here is also going to be very simple so fragment Shader and yellow cell add a comment with Ctrl shift a and uh come in here and the fragment share is a little bit simpler so void Main that geofrac color is going to be equals to vic4 and we're going to turn this to Red so a red color just like that and yeah that's the Shader um so yeah let's uh test this so uh in order to test this we're gonna um we're gonna create a new mesh here const mesh equals let's call this outline calls outline equals new three dot mesh passing the geometry pass in the material and add it to the scene very simple outline now uh we're probably not going to see it because we have our Taurus let's comment that out and here we're getting an error mesh is not defined uh why is that all right so here uh we need to pass in towards instead of mesh sorry so uh when you do that you're gonna get this red um red Taurus nuts which is what we want but here uh instead of only rendering this we want the tours to be rendered but we want this to act as an outline and this is going to intersect badly because uh there are right now on top of each other so in order to fix this we're gonna do what we did in blender so let me fix this uh here and add in a new um property called its side uh on the sugar material and you can set this to three dot backside uh with that you're gonna fix the issue but you're gonna not be able to see the mesh because uh because the the sizes are the same so one thing you could do is you could um take the scale of this and increase it so set scalar uh set it to 1.1 and this is going to give you a black a red outline and this works fine but there's an actual problem with this approach and that is uh you can actually see the thickness is different uh across the entire mess so the thickness here is um is less than the thickness here and that's a huge problem so in order to fix that we're gonna do this entirely on the vertex View so come to this vertex here and we're going to create a new position new position and it's going to be position plus normal times the factor that we want and this Factor can be a constant like thickness we're going to set it to point zero point [Music] um 0.02 is fine and let's use this JavaScript technique you can add a dollar sign and brackets to use the JavaScript variable and do it like that just like that you now have a new position uh with displaced um vertex now you need to use this so instead of position click uh change this to new position all right with that you're gonna get a red outline but this time this is much better because this is actually acting exactly like to solidify uh it's adding an outline um with the same thickness all around your object which is fantastic let's change the color of this to Black because that's what we want and we are done with the outline um it's looking perfect but as you can see this is still not looking very good because we have a 3D shading on our object in order to fix that three just provides a really nice uh class called mesh tune material and uh in order for this to work um if you just add it like this it's going to be really bad but um you can add a gradient map and this gradient map is going to be a texture that we're going to use today so I'm just going to show you how you can set it up so create a new texture new three dot texture loader dot load async uh we need to use a weight now here make sure this is async and um load async and we need to actually Define a path now so here at the top I have this tune um tone which comes from um images textures five tone four tone and three tone you can use all of those I'm going to use three tone so that's gonna be that and now what we need to do is we need to go to texture here and load this all right we now have the texture loaded what we need to do is we need to set the text a gradient map to texture but this is not going to work because um because we need to actually set a really important settings uh on this texture so say texture Min filter equals texture dot Mac filter and uh set this to three dot nearest filter all right this is a really important line and with that you're gonna get this cartoonish effect which works with lights and things like that now this is a really interesting helpful class that we just provides but we're gonna go further than this so what if you have a glb model and you want to make that stylized and cartoonish that's where we want to actually use this add model function so let's comment this out add Taurus let's comment it out and and I'm going to show you what model we're going to use so I'm going to go into the next tab we're going to use this model from sketchfap the link of this will be in the description this is uh such a beautiful model um I'll create it goes to this artist uh link of course in the description link to his page and you need to download this model so download the model and one thing about this model is that it already looks cartoonish but the method that I'm going to show you is also going to work for uh realistic textures so with that uh you can download it I already have it downloaded here in the models folder uh so we have the sword.glb but we are not done yet so uh you need to actually open up blender and let's delete Suzanne and uh what you need to do is go into file uh import and import this glcf model because we're going to modify it okay so with the model loaded I'm gonna go here into the scene collection uh Tab and uh here you uh actually need to open these um drop downs until we get to this final mesh let's call this final mesh sort just to keep in mind this exists now what we want to do is we want to get rid of this um weird parent uh parents that this model has so click on X and this is going to remove the parents select the parent click on X do that a couple of times until you reach sort so when you reach sword uh you're gonna only have this mesh now we actually messed up the rotation of the mesh so uh let's click on r um press minus 90 and press y to make sure this rotates around the y-axis all right uh now it's going to be fixed press Ctrl a to apply all transforms and with that we're gonna have our mesh let's export this as a gltf so go to export gltf and Export it into our project file all right so now I have it exported into the sort glb uh in the models folder and here at the top I import that so um import sword model from Models sword.glb but we need to actually load this so um this add model function does exactly that with uh some other things as well one of the other things it does is that it also loads an hdri and sets the model does material environments map to the cube render target.texture this is going to apply the hdri basically we're going to have some nice hdri laying um on our model so uh click on this add model and uncomment it uh let's make sure we have enough space here and you're going to get this uh which is our model but this doesn't actually look very good um we're gonna make this cartoonish now so what you would need to do is you need to go into blender and we need to select this object go into the shading Tab and here is the interesting part of all of this so zoom in on this node Shader Tab and here you can see we have the space color node which goes into the base color and we have this specular tint node which goes into the specular tint and a mission and we also have this extra note here which I don't know why it is it exists but okay now what we need to do is we need to actually get rid of every single map um besides base color so we need to actually remove this specular tint select it and press delete and we're going to only now have our base color map now you can see the base color map if I select this uh you can see it's here we have a nice texture here what you would need to do is unpack uh this item now in order to do that you need to actually press Ctrl s and save this somewhere where I have this blender file saved is actually here in the models I have this sword dot blend all right so save it there and uh on person pack click on the first item and it's going to unpack the textures for you so here we have the textures now open up this image and this is actually the texture that we're going to be modifying so in order for this to work uh you need to actually modify the texture so let's copy this uh anyway duplicate it and let's paste it again let's rename this to image to it's going to be called anything let's call this image one the first one just so we know what we're doing and we're going to modify this image too now for this you need a software called krita and you can download the software from the link in the description uh it's free you can download it and open this image to with krita all right so here inside Creator I have this image opened which is our texture and we need to apply a cartoonish filter to this now so going to filter go into start gimmick and here you have several tabs here but uh what we need is the artistic tab so press on that and go into cartoon when you select this uh this is set to full this preview type I'm going to set it to forward horizontal because we can see the original texture and the cartoonish filter applied to it so what we need to do now is we need to adjust these parameters however we like and it's going to change the final look of things um I guess my settings are already pretty good because I've done this before so you can copy my settings so smoothness is set to 4.3 uh sharpening is set to 135 Edge threshold is set to 16. Edge thickness is set 2.5 color strength is set to 1 and this final one is set to 51. and this is just a matter of preference whenever you're happy with your parameters you can click OK let's go on apply that filter to your texture now in krita when you press Ctrl s it's going to save this exact same image at its place so press Ctrl s and select the quality make sure it's 100 and press ok now it's going to rewrite uh this part let me delete this extra file that doesn't matter uh so it's going to rewrite this image to file and we have or image two now now in blender we need to actually use this uh second um modified texture so in order to do that we're gonna press on this open image button which is in our base color node click on that and select image two when you do that it's going to be applied now and we have this cool cartoonish effect now which is already visible in blender but export this glb file again so I'm going to export it replace it with sort um let's make sure we we have everything selected include selected objects and Export glcf all right um now we're going to have that load as our model and if we check out our scene you're going to see that we have this nice shading now which is actually only our base color now we can use the previous Shader that we had um the previous solidify thing again uh because it's a it's a function that creates an ass line so here where it says uh model does material and map uh we're gonna create a new line after that and let's do solidify uh and let's call that on the model and it's going to add um a solidified version of the black outline to our model and where our model loads you can see we get this outline effects now now the excellent effect works best if you make it really small so we're going to set this to 0.01 and with that you can wait for the model to load and when it loads here it is we have the subtle outline black outline effect and it's already looks pretty cool in my opinion but we're going to take this one step further now krita is an absolutely fantastic software I use it a lot but uh the cartoon filter of Photoshop is actually better so Photoshop is like you need to pay for it uh it's not free but uh in my opinion um with the functionality it has it's it's definitely worth it to purchase Photoshop but okay this isn't this is not sponsored or anything uh this is just my preference so we're going to open up the same base texture with Photoshop this time so click on image one copy paste it again and it's going to be a duplicate of the first uh image again and change this to image three now uh open this with Photoshop and when you have this image opened in Photoshop you can create a new layer with Ctrl J and select filter go into filter gallery and uh under the artistic tab you can select cut out and it's going to give us this cut out effect now what we need to do is we need to uh modify the the parameters here so you can see we have number of levels it's going to Define how much cut out levels we have so I'm going to set it to Max which is eight uh its Simplicity is actually a really important one uh in my opinion the simpler The Edge the better it actually looks um so you need to find a balance here so I'm going to set mine to uh I'm going to set mine to six and Edge Fidelity in my opinion needs to be set to the minimum value so one click on okay and uh the image that you get is a simplified super simplified version of the original texture but but this actually looks really nice on the model and uh in my opinion it's one of the best ways that you can make something stylized and cartooning and okay now we can export this so go into file save as and Export this into our project file all right so I'm back in blender and I can open file again and this time uh press uh image3.png which is the image I exported from Photoshop already you can see we get a pretty cool effect with this Photoshop uh filter um we get some artifacts with um the flowers but uh if you know what you're doing with Photoshop you can actually fix that but not I'm not going to get into that in this video so what we would need to do now is you need to export this again so make sure to export this as sort replace the file and back in our scene you can actually see that we have this nice um texture now with the house line and everything and yeah uh that's that's the effect that I wanted to show you uh you now know three different types of stylized uh shears so the first one is to share that three just uses which is the cartoon uh material machine tune material uh which you can change the gradients map of and now you also know how to apply a cartoon filter in krita and also in Photoshop so each one of those cartoon filters gives you a slightly different result and I personally like the Photoshop one better but yeah it's just a matter of preference at this point uh so that's gonna be it for this video guys I really hope you enjoyed this one so yeah that's gonna be it for this video um leave a comment down below and let me know if you liked it or not if you know any other um techniques uh share them with me in the comments and I'll make sure to make a video about them in the future and again all the credit goes to the artist that actually created this model I'm gonna put a link to his profile page in the description and yeah with that being said you can watch two of my videos here on YouTube now if you want to and with that I'll see you guys next time

Channel: Visionary 3D

Views: 4,643

Keywords: shader, game development, three.js stylized, threejs stylized render, threejs tutorial, shader tutorial, outline shader tutorial three js, cartoon shader three, toon shader threejs, cartoonish textures three.js, threejs, three.js, threejs game, threejs shaders, web game dev, stylized, stylized effect shader, arcane style shader threejs, arcane shader, threejs course, webgl, webgl shader, webgl stylized shader, 3d shader, stylized 3D render

Id: V5UllFImvoE

Length: 24min 58sec (1498 seconds)

Published: Mon May 08 2023