Making an Inktober Shader

Ғылым және технология

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

    9 ай бұрын

    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.

  • @tjeepert9782
    @tjeepert9782 Жыл бұрын

    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

  • @zlebadev3940
    @zlebadev39402 жыл бұрын

    Wow! This is literally breathtaking! :D Keep it up! ^ - ^

  • @Acerola_t

    @Acerola_t

    2 жыл бұрын

    thank you so much!

  • @velvetgrit6249
    @velvetgrit6249 Жыл бұрын

    Thanks for all the specific terms and including your development logic & studies leading to the final result. It's really helpful.

  • @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

    10 ай бұрын

    @@KarachoBolzen Return of the Obra Dinn looks a bit like this shader.

  • @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 👍

  • @anderstaylor6694
    @anderstaylor66945 ай бұрын

    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
    @bezceljudzelzceljsh57996 ай бұрын

    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.

  • @JTShock
    @JTShock4 ай бұрын

    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.

  • @DavidRutten
    @DavidRutten Жыл бұрын

    Upvote from the Future.

  • @Maleriandro
    @Maleriandro Жыл бұрын

    It like Return of the Obra Dinn, i love it!

  • @JadenGoter
    @JadenGoter Жыл бұрын

    This is sick! I'd love to see it in a fancy HDRP scene :D

  • @SuPeRg4meCrAfT
    @SuPeRg4meCrAfT Жыл бұрын

    This is great,i would've loved to see more examples of the result ,like applying it to a game or something

  • @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

  • @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!

  • @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

  • @dopeytree
    @dopeytreeАй бұрын

    This is so cool!

  • @blacklistnr1
    @blacklistnr111 ай бұрын

    Pretty cool! I was also curious how it looked like in motion. I know Obra Dinn faced a lot challenges achieving such a style.

  • @TimWalton0
    @TimWalton0 Жыл бұрын

    I think this video deserves more views, so here is a comment to help the algorithm.

  • @Acerola_t

    @Acerola_t

    Жыл бұрын

    Thanks!

  • @Mobin92
    @Mobin92 Жыл бұрын

    The blue noise pattern is too visible in the stippling.

  • @_loss_
    @_loss_ Жыл бұрын

    great work

  • @DrunkenUFOPilot
    @DrunkenUFOPilot6 ай бұрын

    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!

  • @jonathanwilson8809
    @jonathanwilson8809 Жыл бұрын

    hidden gen of a KZread channel

  • @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

  • @Nevetsieg
    @Nevetsieg5 ай бұрын

    "Every one bow to the Pumpkin King!" Sorry Acerola, I can't help singing this song in my head while watching your video.

  • @vilkillian
    @vilkillian Жыл бұрын

    cant stop singing "this is aperture" with bg music

  • @2iinfinite
    @2iinfinite Жыл бұрын

    I’m just happy inkscape works

  • @CTSSTC
    @CTSSTC2 жыл бұрын

    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

  • @kebman
    @kebman Жыл бұрын

    Hysteresis really freaked me out!

  • @bimalpandey9736
    @bimalpandey9736 Жыл бұрын

    Where's the performance police?

  • @theonetruefunkmaster
    @theonetruefunkmaster2 ай бұрын

    Acerola? more like Inkerola

  • @tsraikage
    @tsraikage11 ай бұрын

    can you include small gameplays too? i think it would be fun to see, instead of just a single picture. otherwise fantastic video

  • @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.

  • @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'!

  • @Mcbuzzerr
    @Mcbuzzerr Жыл бұрын

    I love watching these videos from the future

  • @jademonass2954
    @jademonass2954 Жыл бұрын

    reminds me of obra dinn

  • @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.

  • @euclois
    @euclois10 ай бұрын

    can this be done on blender? the journey image looks amazing

  • @Acerola_t

    @Acerola_t

    10 ай бұрын

    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

  • @kebman
    @kebman Жыл бұрын

    3:48 cue Imperial March

  • @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

  • @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.

  • @ClarkPeppermint
    @ClarkPeppermint Жыл бұрын

    Can you tell me how to use this pls im new to unity

  • @wChris_
    @wChris_ Жыл бұрын

    you should play, or at least take a look at: 'Obra Dinn' from the Pope (Lucas Pope)!

  • @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!

  • @6884
    @6884 Жыл бұрын

    omg please tell me that at 3:11 is not a SHIFT...

  • @JibreelProductions
    @JibreelProductions5 ай бұрын

    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?

  • @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.

  • @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

  • @user-bw2by9kd4o
    @user-bw2by9kd4o2 жыл бұрын

    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-fc3cz6nh5j11 ай бұрын

    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!

  • @ieatthighs
    @ieatthighs Жыл бұрын

    nekopara killed me

  • @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

  • @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

  • @victorff111
    @victorff111 Жыл бұрын

    I still don't know how to make it .-.

  • @azmyadzkiansyah279
    @azmyadzkiansyah2799 ай бұрын

    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

    9 ай бұрын

    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.

Келесі