Crafting a Better Shader for Pixel Art Upscaling
HTML-код
- Опубликовано: 1 авг 2024
- In this episode, we explore a subject that was only tangentially related to my game project: rendering pixel art with anti-aliasing. Applications for this technique range from anti-aliasing for pixel-art textures in low-poly games like Minecraft, to games that primarily feature pixel art sprites in 3D environments, like Octopath Traveler. This video was submitted as an entry to the #SoME3 competition.
Check out some extra discussion of the topics covered here over on Patreon:
/ 83276362
Timestamps:
00:00 The aliasing problem
01:18 An existing solution
01:41 Background knowledge
02:49 First shader
03:42 Distortion
04:17 Box filter
06:07 The problem
07:12 The solution
08:31 Final shader
10:27 Transparency
11:24 Gameplay
Music:
lofi geek - give me
lofi geek - souls
lofi geek - real
lofi geek - two lifes
lofi geek - lights 
Наука
The quality and clarity of this video is surprising. You are both a great programmer and educator
and animator
Saying to somebody, "I'm surprised you did so well" is actually kinda' insulting, no matter how good the intent.
no harm no foul
Fascinating video! I'm currently using the naïve method of first scaling up by the floored ratio using nearest neighbor and then scaling up the result with bilinear filtering. I need to give your method a try.
yo ty for the motion-canvas it made those code animations so painless (unlike almost everything else about making this video lmao)
I was literally thinking about you throughout this entire video, I even considered reaching out to you about this video as I would love to see you implement something like this in your own game so this is great to hear.
i mix you two guys up constantly
@@clankfish😂 same
@@t3ssel8r BROOO I WAITED FOR 2 YEARS U STILL DIDNT GIVE OUT UR 3D TO 2D ART MAKERRR. PLSS MAKE IT AVAILABLE TO BE DOWNLOADED.
I didn't understand a single thing but it was fun to watch
동감한다
@@JJalmanke
я не говорю по-китайски
@@MercurySteel I think he he said that he agrees
T'as pas tord
@@ciso booga wooga ooga
I love learning about all of the difficulties that are hiding just beneath the surface of things we encounter in everyday life. Thanks!
After discovering this channel, I binged the content so hard. Concise explanations, logical flow through the explanations, high production quality, practical applications of concepts... These videos are just superb from both an educational and entertainment perspective. Kudos!
always love a nonbullshit full explenation of a system!
explanation*
@@Jake28 um, comments already hearted so ummmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm 💀
@@snesmocha just let people discover the correction in the replies on their own
@@Jake28I return to this comment 10 months later and am just face palming rn 😂
This might have been the first complex shader video that I've seen that I was able to follow each step of. Really great vid!
Your overview of these mechanics have been very helpful and pretty insightful for my own projects. You are truly brilliant! Thanks for putting out such a wonderful content :)
Been waiting for a new upload from you! Last video was a treat! Keep it up, both your game and yout videos!!
I have been watching youtube videos for about 10 years or so and this is no joke the very best one I have ever seen. The amount of work you must have put into this seems so much! Congratulations!
the animations in this video are seriously jaw-dropping. such a high quality work, very easy to understand and follow, well done!
Never thought of using bilinear sampling as box average. Love your videos, they are unique that you deep dive into heavy math and technical details about niche problems while keeping it extremely approachable and entertaining! Visualizations are well made
The amount of work you put in this video to teach us something that should be so hard to grasp is insane. As a RUclipsr myself, I see all the work there is behind this video and it makes me even more grateful.
As usual Tim Soret's recommendations are dope.
I've always loved how your videos explain topics in detail while making good use of visual demonstration. Where I would have been stuck on how perspective effects anti-aliasing, I understood in seconds with the warped quadrilaterals.
Dicovered this channel with the absolutely brilliant animation with math video, and it just keeps on providing cool, informative and very well made videos
always a good day when this guy uploads. keep up the videos, you have a talent for explaining these concepts in such a concise way!
Congratulations on the #some3 win!
Awesome! Always a treat when you upload! love the detail and editing that goes into these explanations. I could imagine this'll help a lot of people.
I love learning about technical details like this. Excellently presented.
Also, looks like a lot of work got done on the gameplay and such, which is looking very exciting!
Amazing vid and your game at the end looks sick, can't wait for the next update on that project. Keep up the stellar work!
I really appreciate the way you go into great detail about technical aspects that might not seem as important in the grand scheme of things - really perfecting them. I'm sure when this all culminates into your game, you will be able to feel that extra layer of polish. Looking forward to disecting this when I get my hands on it! Great work as always. :^)
Your video editing, the way how you explain things and subjects are pretty impressive. You are very talented man!
BABE WAKE UP, t3ssel8r UPLOADED A NEW VIDEO!!!
Man, you are on some big brain stuff. Amazing results for next level pixel art!
Holy... I started re-watching your older videos yesterday, wondering when you'd post a new one because it had been a while and just woke up today to this *GIFT*.
Love your content and one of my wish is to develop the skill set to do something similar to what you do.
Thank you for the video.
Wow, this was a phenomenal video! Seeing how far your game has developed over the past few years has been great, but these explanations are something in a league of their own. Excellent job!
Keep it up! Love how much your content has grown, from the twitter gifs to here, it's great
absolutely incredible. you have a gift for this. amazing visualizations
I am so happy to see you come back! Your videos are really hard but very useful!
no video in 10 months, I randomly check out this channel and here you are.
I just realised that this is probably how all 3D texture editors work, like blender textured view and substance etc. At least it has the same effect.
The effect it has on your game is perfect!
THIS GUY IS SO FREAKING SMART DAM
You're back! I'm going to have to try this for one of my projects.
I cant tell you how exciting it is to get another video from you! Leaving another comment after watching. :)
I really love watching your videos. Keep up the great work! Can't wait to see more.
Excellent presentation. Very clear, very easy to understand, and absolutely zero frills. This is fantastic content.
Love how in-depth you go in these videos
Wow! I made a similar implementation when trying to make multi-colored SDFs, and while I directly went with the fwidth() approach, I hadn't considered updating the uv gradients nor the sampling window!
Also having the explanation as to why this works in the first place was amazing! Thank you so much for these videos!
I'm absolutely floored by the quality, skill, and knowledge on display here.
Please never stop doing this so high quality explanatory videos, I'm just amazed
You are such an incredible creator and thinker. Just so deeply impressed 🙇♂
This was a game changer. I am working in Godot and with a simple translation this shader is working better than any other option, including heartbeasts jitter-free scaling shader. This is perfectly upscaling my 720p pixel art to 1080p.
been watching this series since day 1 and i cant wait to see the final product i love every video
This is cool! I've been stuck on working with OpenGL stencil buffers to achieve something similar to octopath, but its inspiring to see progress in this art style
I'm probably never going to use this specific type of shader ever, but the quality of the video was so good and the production value felt so high that I feel you earned a sub regardless. Incredible video
That video is fully amazing, loved every second and stored as a reference.
So happy you are back!
My guy, your videos are amazingly helpful and well done
Great video, really stellar visualizations
I think this will be very useful for my rendering engine. thank you for the amazing explanation
Great approach, and easy to understand.
glad to see you dev blossom, been subbed
The amount of math that goes into just 5 lines of shader code is crazy. It feels satisfying.
bro you are amazing, your are the one that inspired me to build my game in similar style to yours . keep going bro 🖤
As a digital artist, I understand this concept intuitively, but not mathematically. Fantastic explanation, I'm sure.
I love your art style for your own game! I want to play it!
such a high quality video, love it!
Maaaan instant subscribe to your patreon, wish you good luck with your project!
Don't forget to add some content before release (weapons, abilities, enemies), this beatiful game must be played by a lot of people))
good to see you again!
It looks really good. I really like this style
Wooww tu contenido me inspira mucho para contar una historia, me encanta tu crecimiento y como avanzas!
I have no idea what you're on about but the video is weirdly relaxing and the editing is really nice. Great job
Awesome as always!
God like explaination, please make more of this math related content, the transformation into fwidth is so smooth!
This video was very well made! Game looks awesome too as always
Wow. Very clever, and very well-explained.
High quality work, thank you! :)
This guy is slowly teaching me math better than some of my professors. What is referred to as the deformation gradient in the video, is more generally called a Jacobian.
This is unbelievably rad, great work.
This scaling method is also useful in video/image display, in particular for solving the issue of temporal aliasing. The popular video player mpv had the (simplified) version of this scaling method for 10 years, as the name “oversample”, for both scaling and frame mixing. VLC 4 has had it a few years also.
Another great video. Your game looks stunning, I hope to play it someday
I've used several of these techniques, but only had an intuition. Your explanations really expanded my understanding. Your3D stuff looks absolutely stunning, and I'm considering some kind of pixelated look after switching engines from unity to Godot.
Congrats on getting the first place in Grant Sanderson' favourite 25 videos of #some3🎉
Congrats on the golden pi creature was a nice surprise to find your video mentioned !!
Yeah! I will play this game. Seeing the techniques is wonderful.
you make some of the best videos on game programming implementation ❤
Thank you for your research and passion
I’m about 6 weeks into a class on graphics programming, and this video is a really neat intersection of things I totally understand and things I don’t get at all
I was just thinking how to achieve that. great video
Totally great video, I can only imagine the amount of work you put into making of this!
On a personal note I would be VERY interested in how you go about making the shader that "transforms" your 3d models into pixel art. They look incredible.
I would need a few lives fully dedicated to study shaders to understand this, but even if I got a 2% that's new knowledge for me. Thanks for this superb visuals presentation, and btw your game is shaping up to be a major hit, best luck sir!
I love your videos. Hope everything is good on your end
Amazing production quality
Personally, I prefer to have internal resolution set to something like 360p for that pixel KRUNCH. Just a bit annoying to make UI work.
But that was a really cool explanation and way of thinking about the filter! Awesome video.
omg a new video after years
wow, definitely worth the wait
Amazing work as usual. Your content got me really interested in shaders, rasterization, and 3D rendering in general. So much so in fact I was motivated in my linear algebra class and I'm taking the advanced class next semester in a few months. Even with all my interest though, I never understood how you got your foliage to look so good (and your game in general) and I gotta say I am extremely interested. Is there somewhere where I can find this kind of information, and if it is on your pattern I'd be more than happy to support.
Return of the king !
I feel very stupid for having the same problems (for dynamic UI scaling actually) and going with the first algorithm thinking this is good enough.
Then encountering all the problems you have adressed in your solution and now realizing I should have just watched until the end and not just vaguely remember.
Thank you - this really helped a lot!
thanks! I was motivated from hearing similar struggles from several different teams (RadicalFish, Tim Soret, Aarthificial, ...) so I thought I would really cover all the details one is likely to run into when doing this.
Great video! I'm always wondering why such basics - and by that I don't mean easy stuff, but fundamental requirements for a game engine - are not provided out of the box nowadays.
Thank you! I stg it is impossible to find anyone saying that you can scale pixel art to non integer resolutions! The only exceptions seem to be Casey Muratori, a shader on shader toy, shovel knight, and a video about doing it in Godot by HeartBeast, and even the Godot documentation says it can't be done! Thank you so much for the simple description!
Looking good man.
The legend has returned.
Great job!
the king has returned
This video deserves more views
yooo new vid, very cool !
the king is back
Excellent way to visually explain very interesting niche concepts! Always love your videos.
Perhaps this is handled separately, perhaps not at all, but I’m curious - is gamma correction taken into account when blending colours? Maybe it’s high cost for little change, but I don’t know. It definitely makes it look better, so I’d imagine that if it’s not being used it’s because you looked into it and decided it wasn’t worth it.
For anyone else interested, gamma correction is used to adjust light intensity from their display values to their physical values, then do the relevant math, then adjust them back. This is one of the biggest unsung heroes of making video games look more realistic in the last 10~15 years. For an extreme example as it pertains here, suppose you have a checkerboard pattern of 0% and 100% (black and white). Suppose you reduce resolution to half both ways, and now you have a solid grey by mixing half of each, but what does that look like? Intuitively you’d say 50%, but gamma corrected it would be 73%. To understand, get a pixel perfect screen that has the checkerboard in the middle, and each version of grey on either side, then back away or squint until the checkerboard blends into a solid grey. You’ll find that it matches the 73% and not the 50%, which is a result of how our eyes perceive light values. Most game engines and 3D renderers automatically do this now, but most other things do not by default, including OS screen settings and image and video editors.
If you made a video about gamma correction I’d share it with everyone.
modern engines do all operations in linear color space and only apply the display gamma at the end. that is also what happens here. (Although parts of the video were authored in a video editing software that operated in rec 709, so in this video you could see some variations, but in practice, nobody's gonna notice if the anti-aliasing has a nonlinear gamma)
I probably won't make a video about it because it's a subject others are more qualified to speak about (and tbh, I hate dealing with these sorts of bookkeeping problems)
This is sick! Makes me wonder a little about how a little temporal would look stacked on top of this? Might look like trash and undo eveything, or might actually lessen the effect of "pixel-jumping" when things move or rotate.
Incredible videos. The 3blue1brown of game dev. Tremendously grateful for your efforts!