Stylized Cartoon Shader In THREE.JS ( Full Explanation )

In this video I'll show you how to create 3 Different stylized objects in THREE.JS. Lets go 🔥
The Sketchfab Model:
sketchfab.com/3d-models/trandafir-weaponcraft-2023-bf26b804989f4f86adbe99de21274d6a
Artist:
sketchfab.com/einmeister5
Starter Files ( Code ) :
github.com/visionary-3d/stylized-shader-part1
Download Krita:
krita.org/en/download/krita-desktop/
References Used:
www.artstation.com/artwork/D3goA
doodles
www.artstation.com/artwork/D5OL3R
Chapters:
00:00 - Intro
00:23 - Project setup
01:06 - References
01:40 - How I arrived at the solution
04:48 - Stylized Torus Knot
12:07 - Stylized Sword Model
21:01 - Bonus Method
23:48 - Outro
--------------------
Visionary 3D:
Follow me:
x.com/visionary_3_d
Discord Community:
discord.gg/rARXSRX2pu
Shaders Crash Course:
kzbin.info/www/bejne/pXzFdJSgZq9pe6s
My Shaders Playlist:
kzbin.info/aero/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy
Three.js Boilerplate:
github.com/visionary-3d/three-boilerplate
#threejs
#3d
#3danimation
#glsl

[@ThePouetman]

Hey great video! It gave me some ideas, I'll definitely keep it in mind :) while you explained well how to do this, I feel like you didn't explain why you were doing it. What is the point of the 5/4/3 tone texture (you didn't even show them in the video)? Why do we need to remove the hierarchy from the sword in blender? What is the point of using another software to do the effect you did with the shader?

[@visionary_3_d]

Great Feedback! I do think you're right. Here's the answer to those questions: 1. 5/4/3 tone textures don't make a huge difference but it changes the gradient layers on the toon shader 2. The hierarchy was removed in blender so that we can easliy access the main mesh when you export the glb -> aka: gltf.scene.children[0] 3. That section is called "How I arrived at the solution". It shows how I got the idea of implementing something like solidify.

[@EinMeister]

I am glad you liked my sword :) Thank you for crediting.

[@MrBumbo90]

Love your channel man. It is like having a phd in shaders.

[@sampalacio]

Thanks!

[@manthrax69]

Good breakdown. ++

[@yoga1775]

Banger video. Would love to see some particle system breakdown and tutorial from you

[@visionary_3_d]

Thank You! Added that to my todo list.

[@taofeek-bakare]

I think it will be great to always include the repo of the completed works. Hopefully waiting

[@JohnScript]

Nice Job bro!!!. Just a little tip: If you wanna add a Pixel Art Effect in this setup, make this: 1- Reduce the size of the texture from the current size to a smaller one(512x512, 256x256, 124x124....). 2 - Change the filter in Blender from "Linear" to "Closest". 3 - Exports and it's done Cheers 🤟🤟

[@visionary_3_d]

Nice 👌 Thank you for sharing this info.

[@timetosleep8055]

If i create my own models in blender what would my workflow look like? Should i do basic texturing and baking in blender, the cartoonish filter through photoshop/krita and then the blackoutline with the help of shaders??

[@Joheungju]

Plz be my teacher,,,, your lesson is wonderful..!

[@visionary_3_d]

Yo. My face is covering the blender settings and I didn't fix that in editing because the blender part is just for representation. And it's not part of the actual tutorial. Checkout this shader playlist if you're interested: kzbin.info/aero/PLTEbuqk52pICikiHfD-a52dxEav5UqMLy

[@nishantmodi5451]

A great tutorial! But i was wondering, is it possible to create crosshatched shaders in threejs? That gives the models a manga kind of look

[@visionary_3_d]

Like this ? 😉 kzbin.info/www/bejne/oJ2uf4Kfp81pbKc

[@rithvik_]

is this like a sword from hell's paradise anime 😮

[@Lagooneration]

The whole time you were working on blender your face blocked the visuals of what you did, maybe keep in mind next time to keep moving your face where its not blocking the important contents of what your viewers need 👍