Harnessing the Power of GPU to Draw Pixel Art Lines - Legacy Devlog #21

[@aarthificial]

Quick update 1) I've tried to render these lines using *line primitives* connecting points A and B: imgur.com/a/Path692 It seems that some angles are not pixel-perfect and chaining multiple lines together can result in random holes. 2) I thought that, in Unity, there's no way to change the primitives used by a mesh. It's not true - MeshTopology allows you to do just that. So that changes quite a lot of things. 3) Lesson learned - geometry shader bad. It's not supported on some hardware and tends to be less performant than, say, a compute shader. 4) Some of you have proposed some interesting methods of using a fragment shader to draw these lines. I'm currently looking into them. All in all, thanks so much for all the feedback! I'll try to improve the way I render lines. There will be a follow-up video if I come up with something interesting.

[@sadpancake6563]

Can you please add reddit article url to description?

[@aarthificial]

@@sadpancake6563 Thanks, totally forgot about it.

[@uis246]

Have you looked to line width and conservative rendering?

[@sipos0]

OpenGL's rules about when polygons line up are confusing. It seems like there is no good reason to need triangles along the line instead of line segments, but I can completely imagine it not working with line segments.

[@Dastmema]

The hability of this guy to make graphs for explanations always takes me out of guard

[@aarthificial]

This whole channel is really just an excuse for me to make these graphs at this point

[@Dastmema]

@@aarthificial can you teach us?

[@alex.g7317]

@@Dastmema I take that as a no then…

[@galaxy3432]

@@aarthificial can you teach us?

[@yokowan]

momiji profile picture spotted in the wild

[@user-qu5pv2uv5m]

I really hope a level creator is added to the final game it would be so sick

[@aarthificial]

Totally agree!

[@qualia765]

@@aarthificial i like this answer

[@brandonbaker2598]

This production quality is impeccable.

[@someonewithsomename]

TRUE!

[@tseb668]

Fr it’s insane

[@YohanesVienas]

I absolultely love what you're doing. I don't even know what Astortion is gonna be exactly, but its getting bought, simply because of the technical side of things. This is so damn impressive

[@aarthificial]

Thanks! Now as I think of it, I should probably make a video about what Astortion is exactly. Because I've never really talked about this in detail

[@lemonlordminecraft]

@@aarthificial I cannot wait, you're one creative dude

[@blackboxpup]

i understand all of the individual pieces of this, but the fact that you've managed to both theorize a way to combine them AND also actually managed to follow through and build it astonishes me. thank you for sharing all of these clever ideas. your uploads are inspiring me to think more creatively about ways to make amazing things out of the skills i already have, and it's hugely empowering

[@voidling2632]

I understood absolutely nothing.

[@KingGurke98]

So glad I found this devlog; it always gives me a huge burst of inspiration to watch what you have done! It got me to return to an old game project aswell. Though I'm always amazed at how much care you put into Astortion's looks so early on...

[@_kett2164]

once again your stuff blows me away! You could have done it the easy way but you did it in the coolest way possible instead!

[@tiredko-hi-]

WITCHCRAFT!! I'm dying Edit: Forgot to say amazing visualizations (as always) Wasn't bored, very much like this kind of stuff. Keep it up!

[@aarthificial]

Thanks as always!

[@t3ssel8r]

Cool work as usual :) Interesting how these days to get a pixel perfect line on GPU we have to resort to tessellation, geometry shaders, compute shaders, etc. In the past one might have been able to trust that GL_LINES was implemented with Bresenham's algorithm in hardware, but on my current machine this is not the case.

[@aarthificial]

Thanks! Is there a way to use things like GL_LINES in SRP though? Also, now as you said it, I wonder if I could output a point primitive instead of a triangle in my geometry shader and make it work

[@t3ssel8r]

​@@aarthificial I haven't looked too closely at what drawing functions are permitted in SRP. on the bleeding edge, SL5 has enableRandomWrite textures, or a compute shader can write directly to texture memory. Another thing that came to mind was to use the vertex shader to output a 3-pixel thick triangle strip (dirty region), and use a frag shader to get the pixel perfect lines. Bresenham's isn't optimal for frag shading in this case, but O(1) per fragment algorithms exist. It might be a reasonable tradeoff on platforms that don't support more advanced shaders, such as WebGL.

[@sofi390]

Ooo have you considered using this system to give her real-time ponytail physics? I rarely see it done in pixel games and with all the innovations you’ve made it would be interesting to see! It may add a sense of physicality that would fit in well with the aesthetics! I can see how custom animations also have their own benefits as well tho

[@takieddinbalti6956]

This is so insane. I started to feel like an intermediate as a game developer. But you make me feel like an absolute beginner again. 😮‍💨

[@erikahlundhelguera]

This is seriously amazing! I've wanted to implement the VelocityBuffer in my top down game for a while and this just convinced me to do it

[@Xeraclom14]

Babe wake up new Aarthificial video

[@JujuProdGames]

The motion graphics in this video are incredibly well made. Awesome work!

[@PabloPazosGutierrez]

I'm not into gaming or animation, but been watching your videos, and I really like how you explain things and make visual cues. Simply awesome.

[@salabimsalabao]

The editing is amazing and the game is looking really good so far! Also, congrats on 15k! you deserve it and much more

[@aarthificial]

Thank you!

[@MichaelSchultzSF]

You're updates are so incredible. Not just the content but the way it's presented. Keep it coming and thanks so much for spending time explaining your process.

[@m1che_]

Ur devlogs are so well made and the explanations are pretty easy to understand. I'm going to just binge every single one now.

[@alexanderrotmg]

Community: How much detail do you want? aarthificial: yes.

[@LanK111er]

hey love your way of going about things by finding the absolute best solution to the problem even if its complete overkill for what you want. It's fun to watch.

[@canadianblitz3468]

I love how you went through everything in detail!

[@monawoka97]

I've worked in the game industry for a bit now and I've started to develop a smell for when things are implemented the right way vs the wrong way. Let me tell you this smells fucking great.

[@zenzizenzic]

+

[@joshbishop]

I never clicked on a notification thumbnail so quickly

[@vb0t429]

Impressive solution and implementation!

[@AyyyyyyyyyLmao]

This is incredible. You need to man a dev team just to bring these tools to the rest of us. The world needs you!

[@WuchtaArt]

This video is like a line: straight to the point

[@tastygold]

Shaders are absolutely brain melting to me, I have never got my head around it. I need to try learn how to make stuff like this. The velocity shader was mind blowing!

[@theblackkoopa2329]

Just saying that all of the effort you put into explaining the technical details of your project is what keeps me, as an avid programmer myself, invested!

[@Grivel176]

Absolutely Magnificent. I don't really understand all of the complexity of such a thing but the result is stunning.

[@NeoWisp777]

Wow that is beautiful! Well done and thank you for sharing your video.

[@blueberrygames321]

I love how you went from explaining the compushader with arrays to an arrow with "witchcraft" and the end result. This is often how I feel about a lot of this, the math is so far beyond my paygrade its insane.

[@aarthificial]

Tbf, the math would deserve a separate video but the reddit post in the descriptions does a really good job explaining it

[@adt4864]

Oh my gosh these graphics are so beautiful!

[@gavaii]

Love the minimalistic look of the explanations!

[@plusmorale]

Almost 4 minutes of pure infromation. Always enjoy Astortion Devlogs

[@PrabowoMurti]

Your excellent work has a great impact to the humanity. Thank you.

[@AlmantasKli]

Gorgeous video from start to finish, super excited to see what you make next!

[@dawidpietrykowski]

Amazing work, quality of the animations is incredible, can't wait to see more devlogs like this from you

[@igrb]

The systems you make for the game are so cool, really like how you explain them

[@abdusalammalaev2338]

I REALLY LIKE YOUR VIDEOS! This awesome infographics, this nice style of telling, minimalism and other... It is so nice to watch!

[@GregoryTheGr8ster]

I love what you are doing with the GPU here! The GPU is the best invention since the invention of the personal computer itself. The GPU inspires ingenuity.

[@filipemecenas]

I dont understand much , but im keeping watching ! Because It looks fantastic , im enjoying your Channel ! Thanks for sharing all this cool tips of your jorney

[@bishan_8617]

The graphs used to explain stuff in your videos are always so satisfying & clean, also I don't know what you mean by "This time I'll bore you," this was a nice interesting video that was simple and concise :)

[@thezestychunk5575]

Dude I’ve been follow you for awhile now and it’s just so sick seeing you working hard and trying new things. The game looks absolutely amazing, and the art and atmosphere are perfect

[@aarthificial]

Thanks so much!

[@devjeanayala]

I'm so exiting to see how this evolve

[@yoctometric]

This is really neat! Thanks for the stunning quality and lovely explanations as always

[@Lolatronn]

1:57 I laughed a bit to hard at the "witchcraft" arrow.

[@Tubeytime]

Never thought I would called game dev beautiful but here we are

[@krycerkris]

Love your videos! Clear, informative, visually interesting. And the project itself is simple, but full of passion! Amazing work!

[@aarthificial]

Thanks so much!

[@hopesndreams5033]

ohhhhhhhhhh that rope is so satisfying, I can't WAIT to play this game

[@sinus4784]

another amazing devlog video i can't wait for the next one! this was really cool i want to try to replicate this in godot at some point

[@FireNLightnin]

You and Sebastian League are the two most talented/innovative programmers I've ever seen.

[@aarthificial]

I'm honored to even be compared to him

[@nasta4554]

You are a genius dude! I'm loving these videos keep it up

[@elvismd]

As always you solve these problems in intrresting ways, amazing!

[@web_dev_cz]

Man, you are crazy. So inspirative, sooo well made and amazingly thought out. Kudos. P.S. I absolutely love your graphics, the font, the colors, the color accent and icons, work with whitespace... ah, a true bliss. I'm in daze how you manage it beside the project :) Best wishes with project and in life. (I noticed you quit your job recently what the hell you also worked fulltime ?!?!?!)

[@Domarius64]

Genius... I love pixel art and it's great to see it marrying with modern technology.

[@EVILBUNNY28]

Sebastian Lague AND aarthificial upload a video on the same day! Am I in coding heaven?

[@lucianorubio9129]

Your project is amazing!

[@NishanGhoshgameshamelame]

Thumbs are held up high! Nice showcase, Also liked the memento at the end. XD

[@AstonishedByTheLackOfCake]

your work never ceases to amaze me, this is truly some next level shit and your dedication really shows

[@gefulltetaubenbrust2788]

This video is great, you’re getting better and better with each one. Just one thing: There IS a way to render lines using the GPU, as there are render modes for that in the graphics APIs. But this might not be possible with Unity, so a rather minor point.

[@aarthificial]

Thanks so much! I've added a pinned comment a moment ago. It may address some of the things you're referring to

[@RetroDead]

babe wake up, new Astortion devlog

[@jordy15322]

Great editing and content as always, keep up the good work!

[@jgtb0pl]

that's nice form of foreshadowing

[@Skeffles]

That looks awesome with all those ropes.

[@SuperGamersgames]

Small stuff like this always get me in development. No player will ever care about these additions, BUT ALL THE DEVS WILL. Like have an editor for the lines?? You're almost making me want to switch to Unity (almost)! Also, wow, foreshadowing and I didn't even know it.

[@bezimienny5]

Nice. Now we can finally get next gen 8k hair similations in 2d on our characters. Good job!

[@noiJadisCailleach]

You are a GENIUS!

[@meady200]

Absolutely goddamn amazing!

[@tulasigopinath]

3:07 you should make a secret room called The Room of Thousands Nodes, this is very satisfying to see

[@plzbgaming]

Impressive as always

[@syncarn]

What do you do for a living? You have more skill than most professional Unity devs I work with every day! Great video :)

[@aarthificial]

Thanks! I've been a full stack developer for about two years now

[@syncarn]

@@aarthificial Awesome! Not sure where you live, but if you are in the US, Canada, Argentina, Germany, or Columbia and you are interested in working on mobile games professionally with Unity then send me a message. I have some connections... :) Edit: Also possibly Poland which I saw listed somewhere. We have a few devs there too ;)

[@nguyenhoangminhtrung2779]

What is this godsends content I just found?

[@liltrashpanda174]

This is the kind of stuff that makes me want to get into game development.

[@mrpedrobraga]

You're awesome, dude.

[@captaincyborg1429]

I really like the editing. Good job!

[@aarthificial]

Thanks!

[@arnerademacker]

You know, most people would just put sprites on screen and be happy. Great devlog :D

[@JustATempest]

The definition of over engineering. Great work!

[@ZealZeal]

I usually don't click on notifications, but I will make an exception out of you

[@MelonSiggi]

At this point he's about to make cloth simulation in a pixel game. Neat!

[@DolphinDev]

Super interesting concept!

[@Junivieve]

This man is a genius

[@Timbobs]

Thank you for accurately describing a process as witchcraft 😄 I have no idea why youtube sent me here, but it’s fascinating.

[@ruzco4873]

You're a genius omg

[@fledered6967]

This is some dzrk magic happening right there. This is amazing

[@MechanizationStudio]

awesome! I love performance!

[@Eldarduil]

wow thank you, it's very inspiring to me.

[@Zarokii]

my man is thinking on supporting low hardware in a pixel art game, truly champ!

[@UnofficialFoneE]

Great work as always!

[@parsuli.]

I cannot wait to get this game when it comes out and spend hours trying to speedrun it while my eyes rest on its fabulous art... And I've only seen two devlogs, and don't even know what kind of game it'll be (thought I suspect a platformer of some kind).

[@nikhilsood9501]

Good Job M8. Obviously not only subscribing the channel but also eagerly waiting for the next video as well. ^_^

[@aarthificial]

Thanks and welcome aboard!

[@monsieuralexandergulbu3678]

3:23 big brain move ;)

[@foobar2285]

This is very cool! Drawing pixel perfect lines is notoriously hard to do on the GPU. I believe it should be possible to do this without creating a triangle for every pixel in the geometry shader though, by instead using a quad that is stretched between the two end points. If you are rendering at a lower resolution, a way of achieving the pixel perfect line effect would be to: 1. Set the UVs of the quad so that the zero cross boundary is along the the centre of the quad (where you want the line to be). In the other direction, make sure that the uvs do not reach the zero cross boundary. So, for example, if you designate the x-axis as the line axis, then set the lower edge to v=-0.5, the top edge to v = 0.5, and the u values of each vert to any non-zero positive values: *(0.5,0.5)------------*(0.5,0.5) | | --------------------------- (this is where the line will be) | | *(0.5,-0.5)-----------*(0.5,-0.5) 2. Stretch the quad between your two line points. You could do this in the compute shader to save streaming bandwidth. 3. In your fragment shader, use the screen space partial derivative functions to determine the fragment where the zero cross boundary is. If you designate x as the line axis, I believe you can calculate it like so: vec2 fractional = abs(fract(uv)); vec2 partial = abs(fwidth(uv)); vec2 point = smoothstep(-partial, partial, fractional); float s = 1.0 - clamp(point.x * point.y, 0., 1.); 4. Use 's' to determine whether this fragment should be transparent/discarded or be your line color. (Edit) here is a simple shader toy demo: www.shadertoy.com/view/sts3zB Hope that makes sense! Best of luck with your game :)

[@aarthificial]

Thanks so much for taking your time to write this! I'll test it out later today. Although - initial thoughts - this would fill all the fragments that cross the UV's x axis right? So the result would be slightly thicker than Bresenham's implementation?

[@foobar2285]

@@aarthificial Using the fractional component of the uv to smooth step the derivative is a neat trick that makes the line exactly 1 fragment thick :) That being said, this method is fairly dependent on the precision of the hardware that it is running on. You would probably have to feed the result through a step function first to filter out (unfortunately quite a bit of) floating point error. That's not to say that this method is unfeasible: I vaguely remember reading that Unity uses something similar to draw the grid in the scene view. You can also improve the precision by making the quads wider (at the cost of more fragments).

[@tedchirvasiu]

This is super smart

[@mylesfranco3545]

well thats cool!

[@innovativename5268]

Interesting, thanks

[@SilentOnion]

3:15 looks scary. Like hair growing out of the cealing

[@2tvtv]

the prophecy has been fufilled. we now have swaying cables

[@Javantea]

I understand the value of having pixel perfect lines in real-time but you can get a very similar effect with much less effort by using meshes. I did a simple test and using a simple alpha texture also works. Rendering it carefully would make it 1 pixel wide. That said, thanks for the idea. The idea of dangling ropes is pretty cool.

[@freddysingbot7400]

Nice ropes. I use moho for pixel animation. Just disable antialiasing and add a pixelation value to the project... the vector drawings then create nice crisp sharp pixel renders