Remaking LOOP HERO's CRT Effect
ฝัง
- เผยแพร่เมื่อ 4 ก.ค. 2024
- In this shader case study we analyze and recreate the CRT effect from Loop Hero. CRT Shaders are an effective way to add a nostalgic feel to your pixel art and should be part of any technical artist's visual library.
Support me on Patreon!
/ acerola_t
Twitter: / acerola_t
Twitch: / acerola_t
Code: github.com/GarrettGunnell/CRT...
Join My Discord Server! / discord
Music:
Empty Ocean - Loop Hero OST
During The Test - Persona 3 OST
Afternoon Break - Persona 3 OST
Thanks for watching!
This video is dedicated to my friend, Alotryx.
#acerola #gamedev #graphics #unity #unity3d #madewithunity #indiedev #unity2d #tutorial #shader - วิทยาศาสตร์และเทคโนโลยี
I do not understand why seemingly every single adult programmer I've ever encountered on the internet has a picture of a tiny toddler anime girl as an avatar or randomly pop into their youtube tutorials. 6:42 The pattern is too common, there's some connection. Maybe when they were kids they were obsessed with pokemon and naruto and the anime girls on screen were their first love and that love never went away as they grew older or something. Because it freaks me out every time I see it, it's like someone pulling their pants down for a split second in the video revealing their darkest desire and I'm like woah what the hell. Besides that, the programming is interesting.
I think you're the weird one here actually
@@Acerola_t Maybe on programming discord channels and inside of FF14 it's considered normal. But trust me, you walk down the street in the real world, enter a construction site with a bag full of toddler pictures, they'll look at you weird.
And if they're pictures of cartoon children, they'll be even more confused. Don't you like Frank Frazetta, Tolkien, you know adult stuff. There's something about hardcore programmers, and I'm not only referring to you. Most of you seem to be running the same software.
Maybe if we force feed young males squeaky anime toddler girl entertainment for breakfast they'll grow up to become capable programmers.
@@DanIel-fl1vc no no I still think you're the weird one here
@@Acerola_t Yeah maybe I'm weird "here". Clearly most wanna be game developers are into my little pony tier toddler entertainment.
I think it's just a generation of sheltered boys that got stuck in middle school. When all the other kids were out going through rites of passage they sat at home with cartoony video games and movies.
These things later fueled their interest in programming and still does. It's their standard of the greatest art imaginable. Which is why they're blind when it comes to how others perceive their interest of what's CLEARLY cartoons of children.
Flashing a picture of Disney's Tarzan would still be weird but at least it's a badass guy fighting leopards, music's alright too. But a three year old child...
Hopefully you'll slowly ease off of it, I can't imagine it's healthy to have such proclivities. Especially when you grow older into your 50s and beyond.
ahah xD what a load of bs.. "..Disney's Tarzan.." nice, so Tony the tiger is fine.. wont be surprised if his son has a 3k$ cartoon dog suit. hilarious xD
The most important CRT effect was not the curvature or the metal grid, but the glow and blend effect of the phosphor layer. A single pixel would not be sharp as with LCD, but start as a round dot on the left side and have a smear on the right side due to the falling voltage of the electronbeam. This effect makes that near pixels blend into each other, making a smooth look. Pixel artists used this effect to show gradient effects of many colours, while in reality the colour palette was very limited on those early machines. One had to take into account the beam direction (always from left to right) and the horizontal frequency into account to reproduce that effect on an LCD/OLED screen Not sure what the math would look like, but it can't be that hard to figure out.
Yeah, especially for a pixel art game with low resolution and small color palette the smoothing effect was incredibly important. If you play any old game like that on a modern display it looks like crap.
The game Fight n rage I think actually does this round smearing effect on it's CRT effects shader and it looks amazing, would love to see @Acerola take a look at that game.
I like this type of video. I want to see more of it. Maybe you can show more of the coding side so us dummies who just started learning C++ can get a better grasp on how the math correlates.
There is zero c++ involved. I suggest reading the Book of Shaders articles online, this effect is super simple once you understand the basics of fragment shaders.
I personally wish more CRT shaders for games would emulate the color blending of old analog video signals, though I do kinda get why they don't between the way it may mess with certain visuals, the difficulties, and how much it might hurt performance.
I actually wrote a shader that reproduced the artefacts of the PAL TV system. It basically implemented the whole system on a small snippet for each pixel. Encoded the input, optionally added noise, then decoded it again. I have no illusions about it being fast, but it worked. Turning on the noise was just awful for performance.
I was literally just going to write a comment about that
@@Roxor128 At least if you just want to make old games look right again, performance isn't really much of a concern, unless your shader takes more time per frame than the game did back in the day. If you want to recreate the effect in a modern game with modern standards for frame rate and resolution, then it might be something to consider.
honestly such a good video, i could say a lot but i'll keep it brief: i want to see more!
Thanks Grochlin ;; need to stop by and see your progress on your racing game soon
Nice one 👍 Thanks for supplying the source code
No problem! I try to supply the source code for all my vids, even if it isn't written for general use.
Nice recreation! That being said, I still don't understand why one wouldn't want to warp the scanlines, is it to prevent some funky moire patterns or something?
Probably something like that yeah, I didn't actually try to see what warping the scanlines would look like.
🤔
I converted this effect into Shadertoy just to experiment around with it a little and I think the reason they didn't warp the scanlines is because the scanlines warp the 'wrong' way with this effect. The middle parts of the lines warp towards the middle of the screen instead of away from it as they would with an actual CRT. The effect is pretty subtle at low amounts of warp anyway, but I suppose straight across means they're closer to how they should be for a CRT than if they were slightly warped the wrong direction.
@@dranythYou could implement a different warp. Scanlines make more sense when they are warped too and they look better as well.
You deserve way more subscribers ! Looking forward for more content :D
Very cool video. I was seeing how far I could follow along with just the video but then got stumped why my image wasn't warped but just kind of scaled down. Then I looked at your code link and saw that to calculate the offset you swap the X and Y components of the UV before dividing ( uv.yx / _Curvature;) which I didn't realize from 2:02 . I was then able to adapt this to Godot. Thanks!
Very good. The effect has a good vibe.
Really good work, man. I'm impressed :)
Just found your channel, holy shit your content is so nice. It's the right mix of math, funny jokes and explanation.
I've been enjoying these videos
incredibly underrated channel, inspiring work as well. you make it all seem doable unlike most game making related content
good video! keep up the good work!
Thank you!
this is exactly the info i needed
I really like your videos, you explain all this display math so well!
Thanks!
Very interesting!
This is brilliant
Awesome video
I like these types of case study videos. I have let you know. - in an acerola voice cadence.
i like this kind of case style video, so i am letting you know
very cool. i've heard that some CRT shaders (notably crt-royale) go much further into actually emulating the physics of a CRT when generating their image. that could make for a cool video!
Super! please make more
I'm gonna call it here. I've been recommended quite a few of your videos and in the past few days have seen your subscriber count grow from 5k to 7.5k. I believe you have been blessed by the TH-cam algorithm gods. We will watch your career with great interest.gif
It's been pretty crazy yeah, thanks for watching!
@@Acerola_t dude, thanks for the amazing content!
yay "new" acerola video
Love it when you suddenly stumble upon one of those "creator who makes great content and cares about it" channels
i m not understading anything about sin ad shit but i m still watching this, it's interesting :D
i love case study. gimme all of it
Damn, how did he know I’m watching this in the future
Thank you very much for your sharing!
I want to get a closer understanding of "cubic function" (I have searched this but still don't understand why the value can be calculated by uv+offset*uv*uv as in the example code).
Is there any link or article about this?
I'm sure it was asked before but are those title-cards inspired by the Monogatari series? I've been binging your videos at I felt similar so I had to ask. Also thanks for the video :)
Yeah it's my favorite show
Hey Acerola, have you played Signalis? I think it's worth looking into as it has a lot of cool shaders and effects that might interest you. It also has a CRT effect.
I think it'd be super interesting if you did this same thing with the trippy background patterns in Balatro
muito bom o vídeo valeu
more video as this one pls.
If you have any game effects you'd like to see recreated let me know!
Finally, someone who knows what this game is
hey! thank you for this video! this is exactly what i would like to use for my upcoming game! however, i have a question i was hoping you could answer. in my case, im looking for a more pronounced effect, however im worried about the distortion making it hard to click buttons closer the the corners. do you know how to map the mouses position to the rounded crt effect?
Hey Acerola,
I'm using your shader and inverting the effect on the X axis to create kind of a helmet curvature. How do I ensure the mouse position for all elements in my straight UI properly maps to the new projection?
I exposed the two values in uv + uv * offset * offset. I'm getting good visual results by doing UV * UV * 0.6 * 0.5. Is this causing my problems with rayvasting?
Omg Alpha Centauri spotted
please study more cases. k thx
Just... How did you realize that they were using cos with sin here 6:22 ?
(awesome channel, i'm watching all your videos lol)
cause they oscillate in opposite directions
thanks for watching!
@@Acerola_t Oh, nice nice thx
Texture samplers have a parameter that tells them how to sample the texture outside the [0,1]² range, so having a branch to return black when you're outside that range is unnecessarily expensive, as long as you can set that parameter.
Sadly I'm using a lisp library to do this kinda stuff, so I don't know how you'd do it in C#, but I think looking for something like CLAMP_TO_BORDER should give you relevant results.
Maybe can use like this to avoid the branch:
```
half isBlack = uv.x = 1.0f || uv.y = 1.0f;
color = color * (1 - isBlack); // if (isBlack) color = 0;
```
I honestly have a lot of questions about that, but I wonder if it really has any practical effects. We don’t have branch prediction, and assuming that jumping to sampler instead of jumping over one instruction is quicker; disregarding the fact that seemingly for the sampler to actually have the same check is the only possible way it works, sounds quite controversial to me. I have a feeling that branching avoidance became a cargo cult. Though the comment above has a good idea anyway.
This is definitely a tiny nitpick but I feel if you're gonna do a CRT effect, the aspect ratio shouldn't be 16:9.
Either way, great video, if you do a follow up, definitely add that high-frequency hum that you can feel in the back of your skull!
lol the shader will work the same regardless of aspect ratio so no need to worry
@@Acerola_t, yeah, fair
Has anyone got this to work in URP?
Honestly, the grayscale every six lines looks better, imo
I use a pancake recipe from the same website that the chocolate chip cookies recipe. funny
What about the filters and effects options in Blasphemous?
I can check that out yeah
@@Acerola_t sweet! Thanks!
any chance a ctr effect like that would be able for obs?
i can't make it my self but asking won't hurt =w=
yeah you can write obs plugins that apply shaders to the output, maybe someday I'll do it but at least you know it's possible!
@@Acerola_t hehe glad to hear that~
And if ya someday would do it I'll be sure to be the first to jump ya~
so now how do this photoshop?
the best way to do it in photoshop would be to follow the same steps just with photoshop tooling to warp the edges and there's probably a crt filter for photoshop somewhere.
Is the background track from Breath of Fire 3?
Nope it's probably the one from Loop Hero
@@Acerola_t wrong! the first song thats played is loop hero, but Im 99.99% sure the song looping afterwards is from breath of fire 3.
btw I hate writing shaders but love your videos, perfect mix of comedy and information
@@caelrowley8001 I can assure you it's not breath of fire 3, all the music used is listed in the description.
Also thanks!
@@Acerola_t I stand corrected, the song that was confusing me was During the Test
any chance you could translate this into shader graph?
no I only write shader code I am not proficient in shader graph, sorry!
sin and cos for a 3-pixel pattern? Why not just use a 1x3 pixel texture?
because sampling a texture would be more expensive than computing a wave.
I was hoping for a Critical Race Theory effect! Still an awesome video
n n no you can't just understand everything like that 😟
How the FUCK did you just casually go "oh that must be a sinewave" and other things like that‽
trig functions are oscillators so when values are going back and forth it's probably a trig function
@@Acerola_t Thank you, that sounds so obvious said aloud
When adjusting the frequency of the sin wave, did I miss where we multiply by pi? (sin(uv.y * screenHeight * 2 * pi/3)) It would make sense to gloss over IMO, but I want to check theres no extra magic going on! love your videos
I didn't multiply by pi
@@Acerola_t oh ok, now I am confused! I'll have to look closer at the video. Since Sin(x) is periodic over 2pi, I would except the horizontal lines to "drift" and maybe lose definition every 30 pixels. Perhaps it's too small of an effect to notice, or just blends in nicely
Remember the part of the video where he discovers that the pattern seems to repeat once every 6 lines and "fixes" it by increasing the frequency by a factor of 2 to get a period of 3?
Obviously, he is applying the common technique of shader programming that is to ignore the math and do measurements by eye, and by those rules, you clearly get pi=3 and therefore any multiplication by pi becomes unnecessary.
@@kappascopezz5122 truth!! in the end it doesn't matter if you can't notice it even upon close inspection.