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 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.
Reminds me of back in university when a class was so boring, we instead huddled together to make a video filter that recreates the Predator thermal vision effect. :D
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!
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
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 👍
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.
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.
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.
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.
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.
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!
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.
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.
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
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.
@@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.
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.
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!
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.
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!
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?
There is a link to this github repository in the description. I'm not sure about it, but I think Assets/Ink.shader works by itself, so just copy (if it dont work download the whole repo).
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
if the school printer was a shader
Spot on Xd
Real
but every pixel costs 35 dolars
Fr
"Please let me know what you think in the comments"
I think more than 2 examples wouldn't kill ya
lmfao
Bro spent 9 mins taking about edging and I’m here for it.
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.
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?
@@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.
Wow! This is literally breathtaking! :D
Keep it up! ^ - ^
thank you so much!
Reminds me of back in university when a class was so boring, we instead huddled together to make a video filter that recreates the Predator thermal vision effect. :D
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!
Thanks for all the specific terms and including your development logic & studies leading to the final result. It's really helpful.
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
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 👍
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.
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.
@@KarachoBolzen journey could look really cool with this IMO, as long as the contrast was turned up a decent bit.
@@KarachoBolzen Return of the Obra Dinn looks a bit like this shader.
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.
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.
in the next video I go over how I did hdr injection for final fantasy xiv so i hope you like it!
This is sick! I'd love to see it in a fancy HDRP scene :D
This is cool, I think I'll implement it in an STL viewer I wrote a while back.
Came back to watch this in October! I recently went through all your videos, I love your style :)
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
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
The music is the Halloween Town world theme from Kingdom Hearts
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.
It is extremely interesting! Thank you for showing your whole process, it really helps !
This is great,i would've loved to see more examples of the result ,like applying it to a game or something
It like Return of the Obra Dinn, i love it!
Pretty cool! I was also curious how it looked like in motion. I know Obra Dinn faced a lot challenges achieving such a style.
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!
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.
Thanks! In the event all my career ambitions fail I will probably become a professor
@@Acerola_t lmao, I almost spit out my drink right there haha
Upvote from the Future.
I think this video deserves more views, so here is a comment to help the algorithm.
Thanks!
this looks sick!
hidden gen of a TH-cam channel
"Every one bow to the Pumpkin King!" Sorry Acerola, I can't help singing this song in my head while watching your video.
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
I guess it’s a challenge, but wouldn’t it be more practical to use the whole palette of shaders? The Vertex, Fragment and the Screen combined?
Babe, new acerola video is out.
School printers:
“Look what they need to mimic a fraction of our power.”
This is so cool!
cant stop singing "this is aperture" with bg music
great work
I’m just happy inkscape works
This would be very interesting if it was applied through a fragment shader in unity or opengl
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.
@@Acerola_t I would love to see games in this style. A lot can be done with this!
@@ShignBright take a look at 'Return of the Obra Dinn'!
Hysteresis really freaked me out!
2:40 in and I notice the faint background music 👌proper mood; tis the season
I def made the music too quiet in this one lmao
love it !! :D
The blue noise pattern is too visible in the stippling.
I love watching these videos from the future
can you include small gameplays too? i think it would be fun to see, instead of just a single picture. otherwise fantastic video
Acerola? more like Inkerola
Acerola sounds so frustrated from mid video on
Great vid
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
looks great on still images, but does it still work with a moving camera ?
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.
@@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.
Where's the performance police?
reminds me of obra dinn
Bro really yapped about edging for eight minutes straight
can this be done on blender? the journey image looks amazing
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
3:48 cue Imperial March
Why didn't you use the depth pass to calculate edges?
Cause the algorithm is intended to run on images not 3d scenes therefore there is no depth.
Couldn't you use normals to determine which fragments are roughly perpendicular to the screen and regard them as edges?
If the effect were made for a 3d scene yes, but this effect was made to work on generic images like a photoshop effect.
Amazing tutorial , how do i run the code?
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.
@@Acerola_t okay , thank you so much
@@Acerola_t this is amazing, thanks, I downloaded the code but I'm not able to reproduce your results, any tips?
you should play, or at least take a look at: 'Obra Dinn' from the Pope (Lucas Pope)!
How would one apply this to an image and what software would it need.
I use Unity, unfortunately a good software for applying shaders to generic images doesn't really exist.
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!
would it work in maya autodesk's arnold?
POV: Return of the Obra Dinn
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.
@@Acerola_t it does look different but it’s similar in the stylised shading
I still don't know how to make it .-.
i downloaded the project from the git how do i get this to work. what do I use for the Ink Texture?
Why didn't you show it running on an actual video footage? Is the performance that awful?
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.
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!
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?
Can you tell me how to use this pls im new to unity
omg please tell me that at 3:11 is not a SHIFT...
Can someone please tell me how to apply the code into Unity. I am a total beginner. Thanks.
There is a link to this github repository in the description. I'm not sure about it, but I think Assets/Ink.shader works by itself, so just copy (if it dont work download the whole repo).
Sir. Sir... Sir. Did you notice that the image of an arrow you are using is not actually transparent?
no way
Wouldn't the noise shift around on video? How do you keep the noise from shifting around?
This effect wasnt mean for video, just still images
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
yeah sorry these older videos arent as good
Makes an awesome shader but doesn’t show it in motion, or show it off in depth :’((
Gimme the cool footage nerd
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.