Making an Inktober Shader

  Рет қаралды 91,238

Acerola

Acerola

Күн бұрын

In this Halloween special, we look at an effect I wrote that makes videos games look like ink drawings for Inktober.
Twitter: / acerola_t
Twitch: / acerola_t
Discord: / discord
Code: github.com/GarrettGunnell/Ink...
References:
en.wikipedia.org/wiki/Canny_e...
Music:
This Is Halloween - Kingdom Hearts 2 OST
Chapters:
00:00 Intro
00:26 The Plan
01:13 Edge Detection
05:09 Stippling
06:34 Improvements
07:58 Conclusion
Thanks for watching!
This video is dedicated to my friend, Alotryx.
also please subscribe haha please man please just subscribe dude please just like one sub I swear I'm not addicted please man please just one sub please
#acerola #gamedev #inktober #unity3d #unity2d #unity #madewithunity #indiedev #shader #postprocessing

Пікірлер: 95
@augustinehuizing6683
@augustinehuizing6683 Жыл бұрын
if the school printer was a shader
@adrianbik3366
@adrianbik3366 Жыл бұрын
Spot on Xd
@tomsom9994
@tomsom9994 8 ай бұрын
Real
@Yee_.
@Yee_. 8 ай бұрын
but every pixel costs 35 dolars
@UniversalMysteries343
@UniversalMysteries343 Жыл бұрын
"Please let me know what you think in the comments" I think more than 2 examples wouldn't kill ya
@shadow_xts
@shadow_xts Жыл бұрын
Great video, it's rare to see this kind of stuff on yt. Cool to have shared the code too! A sweet implementation would to have noise variation at runtime. In that regard blue noise is pretty much prohibitive, but I guess it could be possible to imagine an array of preprocessed seeds of blue noise to make up for the variation without having to compute calculations every frame.
@xYAuronYx
@xYAuronYx Жыл бұрын
hi, I'm newbie at graphics. what do you mean by prohibitive? isn't offsetting a blue noise texture enough to give you that variation?
@shadow_xts
@shadow_xts Жыл бұрын
@@xYAuronYx blue noise is notoriously expensive to compute and therefore not very suitable, if at all, for realtime. unless you'd compute it beforehand, then apply it to halftone your image. this is what is done here but on static images. if you want to do it over an animated image, the halftoning wouldn't budge; it would just be a static mask over the moving image. if you want to avoid the staticness you can either generate noise at runtime or prebake an array of different noise seeds that you will apply in turns over each frame. so it would look like it's moving-textures are expensive too but almost certainly less than computing blue noise. other types of noise, like real white noise, are pretty cheap but they won't give the same quiet and quaint effect.
@evannibbe9375
@evannibbe9375 Жыл бұрын
I think this would work well for an in-game map of the game world (from the perspective of a camera above the world). This would then give it a hand-drawn feel. Having the effect replace the game view camera in general would be a significant downgrade for playability.
@KarachoBolzen
@KarachoBolzen Жыл бұрын
I think that last point depends on the game you're shading, honestly. We've seen that it gets less playable if you apply this shader to a random game like journey or cyberpunk, but if you design the entire game knowing that it'll be run through this shader afterwards, you can make creative decisions that preserve clarity. Also, adding some color by means of cel shading or an equivalent alternative would help. There's already games that are hand drawn, like cuphead or neverending nightmares, and 3d games that are cel-shaded, like borderlands, so I believe with some extras this shader could fall into that same category, with the added benefit of actually making every frame look like a hand drawn panel of a comic book/manga, instead of looking like a collage of distinct pictures at best.
@myrealusername2193
@myrealusername2193 Жыл бұрын
@@KarachoBolzen journey could look really cool with this IMO, as long as the contrast was turned up a decent bit.
@Yay295
@Yay295 9 ай бұрын
@@KarachoBolzen Return of the Obra Dinn looks a bit like this shader.
@tjeepert9782
@tjeepert9782 11 ай бұрын
I think the shading would look a lot better(or at least, closer to what it's trying to do) if it were thin dark lines directly next to each other instead of random dots, because that's much more realistic I think
@velvetgrit6249
@velvetgrit6249 Жыл бұрын
Thanks for all the specific terms and including your development logic & studies leading to the final result. It's really helpful.
@zlebadev3940
@zlebadev3940 2 жыл бұрын
Wow! This is literally breathtaking! :D Keep it up! ^ - ^
@Acerola_t
@Acerola_t 2 жыл бұрын
thank you so much!
@coffeemakir1977
@coffeemakir1977 Жыл бұрын
I stumbled across these videos. They are a great perspective shift when thinking how tone/color and the like work. Really helps with art and graphic design too 👍
@JTShock
@JTShock 3 ай бұрын
Love this so much. You videos have genuinely got me interested in learning graphics programming. I love seeing all this math and logic coming together to make something really pretty.
@anderstaylor6694
@anderstaylor6694 5 ай бұрын
I'm a game designer and programmer, and after stumbling on your channel I feel really inspired to dip into graphics programming as well! All of your videos are so good!
@bezceljudzelzceljsh5799
@bezceljudzelzceljsh5799 6 ай бұрын
You have great videos, most people can't really explain the thought process behind why things are done in computer graphics and you do a really good job of it. Not overly explained, not inapplicable theory that just hovers in air, just essentials to get the point across.
@JadenGoter
@JadenGoter Жыл бұрын
This is sick! I'd love to see it in a fancy HDRP scene :D
@samueleslick
@samueleslick Жыл бұрын
Came back to watch this in October! I recently went through all your videos, I love your style :)
@Acerola_t
@Acerola_t Жыл бұрын
Thanks! I'll probably be releasing a video similar to this one within the next few videos since I've learned infinite since I made this video lol
@SuPeRg4meCrAfT
@SuPeRg4meCrAfT Жыл бұрын
This is great,i would've loved to see more examples of the result ,like applying it to a game or something
@Saturn2888
@Saturn2888 Жыл бұрын
Finally caught up on all your newer videos from the past 8 months. Excited to see your future HDR videos :D. Color and luminosity are super exciting to me right now because HDR is a whole 'nother can of worms. Since you keep dropping "numbers between 0 and 1" in other videos, and because I know this can unlock secret hidden HDR in older games, I'm super curious.
@Acerola_t
@Acerola_t Жыл бұрын
in the next video I go over how I did hdr injection for final fantasy xiv so i hope you like it!
@DavidRutten
@DavidRutten Жыл бұрын
Upvote from the Future.
@Maleriandro
@Maleriandro Жыл бұрын
It like Return of the Obra Dinn, i love it!
@blacklistnr1
@blacklistnr1 10 ай бұрын
Pretty cool! I was also curious how it looked like in motion. I know Obra Dinn faced a lot challenges achieving such a style.
@klikkolee
@klikkolee Жыл бұрын
The music really reminded me of the music of some parts of Return of The Obra Dinn -- which is very fitting given the game's art style
@SanJymy2
@SanJymy2 Жыл бұрын
The music is the Halloween Town world theme from Kingdom Hearts
@DrunkenUFOPilot
@DrunkenUFOPilot 6 ай бұрын
Transforming a photograph into artwork looking like ink or watercolor = a great way to spend plenty of time inventing filters! I have a method that involved, I never counted, maybe 60 to 100 steps, lots of parameters, and I've made prints that I've shown in art shows. So much room for variations, nuances!
@Mobin92
@Mobin92 Жыл бұрын
The blue noise pattern is too visible in the stippling.
@jonathanwilson8809
@jonathanwilson8809 Жыл бұрын
hidden gen of a KZfaq channel
@Nevetsieg
@Nevetsieg 5 ай бұрын
"Every one bow to the Pumpkin King!" Sorry Acerola, I can't help singing this song in my head while watching your video.
@lobsterboywonder
@lobsterboywonder Жыл бұрын
I fucking love your videos, I know nothing about what you are talking about but the way you combine subtle shit posts into your videos is really amazing. I kinda wish I had you for a professor or something in college.
@Acerola_t
@Acerola_t Жыл бұрын
Thanks! In the event all my career ambitions fail I will probably become a professor
@christophf8099
@christophf8099 Жыл бұрын
@@Acerola_t lmao, I almost spit out my drink right there haha
@notjordanza
@notjordanza Жыл бұрын
Watching your videos makes me realise that all the maths I was doing in my first two years of compsci wasnt a waste, which gives me mixed emotions lol
@dopeytree
@dopeytree 22 күн бұрын
This is so cool!
@_loss_
@_loss_ Жыл бұрын
great work
@TimWalton0
@TimWalton0 Жыл бұрын
I think this video deserves more views, so here is a comment to help the algorithm.
@Acerola_t
@Acerola_t Жыл бұрын
Thanks!
@vilkillian
@vilkillian Жыл бұрын
cant stop singing "this is aperture" with bg music
@theonetruefunkmaster
@theonetruefunkmaster 2 ай бұрын
Acerola? more like Inkerola
@tsraikage
@tsraikage 10 ай бұрын
can you include small gameplays too? i think it would be fun to see, instead of just a single picture. otherwise fantastic video
@2iinfinite
@2iinfinite Жыл бұрын
I’m just happy inkscape works
@kebman
@kebman Жыл бұрын
Hysteresis really freaked me out!
@CTSSTC
@CTSSTC 2 жыл бұрын
2:40 in and I notice the faint background music 👌proper mood; tis the season
@Acerola_t
@Acerola_t 2 жыл бұрын
I def made the music too quiet in this one lmao
@bimalpandey9736
@bimalpandey9736 Жыл бұрын
Where's the performance police?
@crunchy7200
@crunchy7200 Жыл бұрын
looks great on still images, but does it still work with a moving camera ?
@Acerola_t
@Acerola_t Жыл бұрын
Probably not very well lol, you'd do a different approach for a moving camera since in that context you'd have actual scene information and can use depth/normal info for edge detection rather than the image effect edge detection algorithm.
@crunchy7200
@crunchy7200 Жыл бұрын
​@@Acerola_t this, and from what I've seen, screenspace textures look pretty bad in motion, you would have to use worldspace projected noise textures like in borderlands or else it's nauseating to play.
@blackwarrior823
@blackwarrior823 Ай бұрын
That is really cool , but when I imported the packages the effect does not work. I look at the inspector panel the slots of images were empty , am i missing something or should I need to mess with post processing?? Plus: I'm getting some gradient loop error!
@euclois
@euclois 9 ай бұрын
can this be done on blender? the journey image looks amazing
@Acerola_t
@Acerola_t 9 ай бұрын
yeah the theory applies to blender, although blender isn't meant to be real time so you can use much higher fidelity techniques with it
@Mcbuzzerr
@Mcbuzzerr Жыл бұрын
I love watching these videos from the future
@CathodeRayKobold
@CathodeRayKobold Жыл бұрын
It looks good overall, but your noise texture is too uniform, too robotic. If you had an artist hand-draw different levels of stippling and then overlaid them, you might get something that looks more natural
@JibreelProductions
@JibreelProductions 4 ай бұрын
Trying to implement it, but tbh i'm kinda lost, you added the paper texture, but i don't see the ink texture, and also idk how to make it all into a material and when i add the script into an object it moves my camera and makes it go invisible xD. What am I doing right?
@Franky_PT
@Franky_PT Жыл бұрын
This would be very interesting if it was applied through a fragment shader in unity or opengl
@Acerola_t
@Acerola_t Жыл бұрын
It is applied through a fragment shader in unity, just applied to a png that's blitted to the screen in the Unity editor. I haven't tried it out on a real 3d scene though, maybe I'll revisit this effect and try and improve it for October this year.
@ShignBright
@ShignBright Жыл бұрын
@@Acerola_t I would love to see games in this style. A lot can be done with this!
@wChris_
@wChris_ Жыл бұрын
@@ShignBright take a look at 'Return of the Obra Dinn'!
@mark63424able
@mark63424able Жыл бұрын
Couldn't you use normals to determine which fragments are roughly perpendicular to the screen and regard them as edges?
@Acerola_t
@Acerola_t Жыл бұрын
If the effect were made for a 3d scene yes, but this effect was made to work on generic images like a photoshop effect.
@trainsfemme
@trainsfemme Жыл бұрын
Why didn't you use the depth pass to calculate edges?
@Acerola_t
@Acerola_t Жыл бұрын
Cause the algorithm is intended to run on images not 3d scenes therefore there is no depth.
@kebman
@kebman Жыл бұрын
3:48 cue Imperial March
@wChris_
@wChris_ Жыл бұрын
you should play, or at least take a look at: 'Obra Dinn' from the Pope (Lucas Pope)!
@6884
@6884 Жыл бұрын
omg please tell me that at 3:11 is not a SHIFT...
@jademonass2954
@jademonass2954 Жыл бұрын
reminds me of obra dinn
@ClarkPeppermint
@ClarkPeppermint Жыл бұрын
Can you tell me how to use this pls im new to unity
@user-bw2by9kd4o
@user-bw2by9kd4o 2 жыл бұрын
Amazing tutorial , how do i run the code?
@Acerola_t
@Acerola_t 2 жыл бұрын
I wouldnt recommend running it since it's kind of made for me, but if you download the code you can attach the c# script to the camera and fill out all the public variables and press play. I'd recommend just referencing the code if you want to use it yourself.
@user-bw2by9kd4o
@user-bw2by9kd4o 2 жыл бұрын
@@Acerola_t okay , thank you so much
@ernestosalvadorsolaresguer1017
@ernestosalvadorsolaresguer1017 Жыл бұрын
@@Acerola_t this is amazing, thanks, I downloaded the code but I'm not able to reproduce your results, any tips?
@user-fc3cz6nh5j
@user-fc3cz6nh5j 11 ай бұрын
How would one apply this to an image and what software would it need.
@Acerola_t
@Acerola_t 11 ай бұрын
I use Unity, unfortunately a good software for applying shaders to generic images doesn't really exist.
@DrunkenUFOPilot
@DrunkenUFOPilot 6 ай бұрын
I do a lot of creative image processing. There are a hundred approaches to this. For one-time work, I do things manually in GIMP. Anything GIMP can do, PS can do too, afik. One bad thing about manual image processing, doing things step by step is if after 50 steps you realize that a setting you used in step 5 should have been a little different, you may have to ^Z undo your way back, tweak that setting, then re-do the next 45 steps exactly the same. Better to build some sort of pipeline that automatically recalculates all follwing steps if you tweak one of the earlier steps, like how a spreadsheet works. For batch processing or ongoing jobs, I write code in Python or Julia. I have a kind of toolbag of routines for sharpening, edge detection, color adjustments etc. Easy to make a pipeline with adjustable parameters. If I need to do something tricky to code but easy to do in GIMP, I write a command line or GUI app in D, C++ or Vala code using GEGL, the core image processing code used in GIMP. Whatever I do manually, I can do this way too. For someone who doesn't mind writing some code but doesn't want to go deep with full-blown applications programming, there's a way to script GEGL operations inside GIMP, even with multi-branched pipelines, so whatever processing you do today you can save to re-use later. I might experiment in Blender where the input image is just a flat rectangle and processing is done with material nodes, but most of that is point operations, no blur or unsharp or median filters. But I can replace a still image with a video texture. There are some GUI apps that let you drag nodes around and wire them up in intricate ways, like the nodes in Blender or other 3D apps. TouchDesigner had something like that, and you could write custom shaders in code, but I haven't used it in a while. Unreal is the king of the graphics tool world, as it has everything. I'm not familiar with its image processing capabilities, if you want to do advanced algorithms but not be doing any 3D. Something I need to play with one of these days... For scientific work in astronomy, I write code in IDL, a cuss-worthy language based on a horrid mishmash of C, Fortran, BASIC, Matlab and outer space alien. But everyone's been pushing for more Python and somewhat also for Julia. Avoid IDL!
@antipainK
@antipainK Жыл бұрын
Why didn't you show it running on an actual video footage? Is the performance that awful?
@Acerola_t
@Acerola_t Жыл бұрын
Cause I didnt have a good scene to apply it to at the time, hence why it's intended as an image filter. No, the performance isnt that awful considering the canny edge detection filter is pretty much the first stage of FXAA.
@Jadinass
@Jadinass Жыл бұрын
Sir. Sir... Sir. Did you notice that the image of an arrow you are using is not actually transparent?
@Acerola_t
@Acerola_t Жыл бұрын
no way
@kebman
@kebman Жыл бұрын
Wouldn't the noise shift around on video? How do you keep the noise from shifting around?
@Acerola_t
@Acerola_t Жыл бұрын
This effect wasnt mean for video, just still images
@victorff111
@victorff111 Жыл бұрын
I still don't know how to make it .-.
@ieatthighs
@ieatthighs Жыл бұрын
nekopara killed me
@kireitonsi
@kireitonsi Жыл бұрын
POV: Return of the Obra Dinn
@Acerola_t
@Acerola_t Жыл бұрын
Return of the obra dinn looks much diff but yeah they do use blue noise for half of their dithering so the pattern is similar.
@kireitonsi
@kireitonsi Жыл бұрын
@@Acerola_t it does look different but it’s similar in the stylised shading
@azmyadzkiansyah279
@azmyadzkiansyah279 8 ай бұрын
You're making the kind of videos nobody else makes and I really love your content but for the love of god please normalize your audio. I practically get a jumpscare after turning up my volume too much
@Acerola_t
@Acerola_t 8 ай бұрын
yeah sorry these older videos arent as good
@Krilium
@Krilium Жыл бұрын
Makes an awesome shader but doesn’t show it in motion, or show it off in depth :’(( Gimme the cool footage nerd
@Acerola_t
@Acerola_t Жыл бұрын
It wasn't made to be used in motion, it was made to operate on still images so that I could use it for making assets.
This is the Kuwahara Filter
18:16
Acerola
Рет қаралды 400 М.
What Is 𝓖𝓸𝓸𝓬𝓱 Shading?
7:07
Acerola
Рет қаралды 85 М.
Increíble final 😱
00:37
Juan De Dios Pantoja 2
Рет қаралды 72 МЛН
When Steve And His Dog Don'T Give Away To Each Other 😂️
00:21
BigSchool
Рет қаралды 17 МЛН
How to bring sweets anywhere 😋🍰🍫
00:32
TooTool
Рет қаралды 44 МЛН
What's The Deal With Depth Of Field
14:36
Acerola
Рет қаралды 112 М.
How I (Almost) Won My First Game Jam
33:25
Acerola
Рет қаралды 42 М.
Coding Adventure: Boids
8:35
Sebastian Lague
Рет қаралды 1,5 МЛН
Painterly real-time rendering | Useless Game Dev
9:18
Useless Game Dev
Рет қаралды 51 М.
Fixing The Graphics Of Pokemon Legends: Arceus
10:17
Acerola
Рет қаралды 216 М.
Giving Personality to Procedural Animations using Math
15:30
t3ssel8r
Рет қаралды 2,4 МЛН
Game Dev Tutorials Are LYING To You
10:42
Acerola
Рет қаралды 327 М.
Pixel Art Animation. Reinvented - Astortion Devlog
4:41
aarthificial
Рет қаралды 2,1 МЛН
A new way to generate worlds (stitched WFC)
10:51
Watt Designs
Рет қаралды 507 М.
Making an Animation for my 3D Pixel Art Game
7:20
t3ssel8r
Рет қаралды 1,3 МЛН
Bardak ile Projektör Nasıl Yapılır?
0:19
Safak Novruz
Рет қаралды 6 МЛН
Урна с айфонами!
0:30
По ту сторону Гугла
Рет қаралды 6 МЛН
🔥Идеальный чехол для iPhone! 📱 #apple #iphone
0:36
Непробиваемый телевизор 🤯
0:23
FATA MORGANA
Рет қаралды 486 М.
📦Он вам не медведь! Обзор FlyingBear S1
18:26