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

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024

Комментарии • 321

  • @aarthificial
    @aarthificial  3 года назад +278

    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
      @sadpancake6563 3 года назад +11

      Can you please add reddit article url to description?

    • @aarthificial
      @aarthificial  3 года назад +11

      @@sadpancake6563 Thanks, totally forgot about it.

    • @uis246
      @uis246 2 года назад +1

      Have you looked to line width and conservative rendering?

    • @sipos0
      @sipos0 2 года назад +1

      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
    @Dastmema 3 года назад +713

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

    • @aarthificial
      @aarthificial  3 года назад +210

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

    • @Dastmema
      @Dastmema 3 года назад +53

      @@aarthificial can you teach us?

    • @alex.g7317
      @alex.g7317 2 года назад +4

      @@Dastmema I take that as a no then…

    • @galaxy3432
      @galaxy3432 2 года назад

      @@aarthificial can you teach us?

    • @yokowan
      @yokowan 2 года назад +2

      momiji profile picture spotted in the wild

  • @user-qu5pv2uv5m
    @user-qu5pv2uv5m 3 года назад +450

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

    • @aarthificial
      @aarthificial  3 года назад +162

      Totally agree!

    • @qualia765
      @qualia765 3 года назад +72

      @@aarthificial i like this answer

  • @YohanesVienas
    @YohanesVienas 3 года назад +280

    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
      @aarthificial  3 года назад +94

      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
      @lemonlordminecraft 3 года назад +19

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

  • @brandonbaker2598
    @brandonbaker2598 3 года назад +213

    This production quality is impeccable.

  • @tiredko-hi-
    @tiredko-hi- 3 года назад +63

    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!

  • @_kett2164
    @_kett2164 3 года назад +40

    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!

  • @KingGurke98
    @KingGurke98 3 года назад +37

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

  • @felicitygray7811
    @felicitygray7811 3 года назад +87

    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
      @voidling2632 Год назад

      I understood absolutely nothing.

  • @t3ssel8r
    @t3ssel8r 3 года назад +19

    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
      @aarthificial  3 года назад +2

      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
      @t3ssel8r 3 года назад +4

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

  • @takieddinbalti6956
    @takieddinbalti6956 Год назад +1

    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. 😮‍💨

  • @alexanderrotmg
    @alexanderrotmg 3 года назад +3

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

  • @erikahlundhelguera
    @erikahlundhelguera 3 года назад +5

    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

  • @salabimsalabao
    @salabimsalabao 3 года назад +5

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

  • @JujuProdGames
    @JujuProdGames 3 года назад +2

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

  • @MichaelSchultzSF
    @MichaelSchultzSF 3 года назад

    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.

  • @qwacc6178
    @qwacc6178 3 года назад +3

    Babe wake up new Aarthificial video

  • @hopesndreams5033
    @hopesndreams5033 2 года назад

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

  • @sofi390
    @sofi390 2 года назад +7

    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

  • @blueberrygames321
    @blueberrygames321 3 года назад

    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
      @aarthificial  3 года назад

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

  • @tastygold
    @tastygold 2 года назад

    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!

  • @WuchtaArt
    @WuchtaArt 3 года назад

    This video is like a line: straight to the point

  • @Skeffles
    @Skeffles 3 года назад

    That looks awesome with all those ropes.

  • @MasafiVK
    @MasafiVK 3 года назад +6

    I'm just want to say, that your arguments about drawing lines are almost all false
    First, you can just draw a line on GPU. In opengl you do "glDrawArrays(GL_LINES)"; It will have a width of one pixel. You can change it. And it may have some blurring, I'm not sure about this, okay
    Second, you can just set a pixel on a GPU. Again, glDrawArrays(GL_POINTS), it's that easy.
    Third, why pass a triangle to geometry shader, when it can easily accept just.. lines... Yes, it can.
    I hardly believe, that you need a freaking geometry shader just to draw a simple freaking line. Don't overcomplicate your code because "something something unity doesn't give me the tools to make it easy, so I will write some much more difficult code around what unity gives me, instead of using 2 lines of opengl/directx code"

    • @aarthificial
      @aarthificial  3 года назад +6

      It's really hard to politely answer your comment when you have an attitude like that.
      You're right. I should've mentioned that I'm talking about Unity at the beginning so the sentence "There's really no *easy* way to fill a specific pixel" would make more sense.
      I know how opengl works. The reason why I'm not using it... well, you've pretty much answered that in your last sentence.

    • @MasafiVK
      @MasafiVK 3 года назад +2

      @@aarthificial I'm sorry for the altitude
      But it's really annoys me, when people make some difficult wrappers around bad tools, instead of using simpler solutions

    • @aarthificial
      @aarthificial  3 года назад +8

      Sorry for that, I know that feeling.
      I did some testing and it seems that line primitives are rasterized using something different than Bresenham, so the result is a bit worse: imgur.com/a/Path692
      It has random holes and increases in thickness. Unless there's a way to control that?
      Anyway, you made me realize that, in my geometry shader, I can return point primitives instead of entire triangles, so thank you for that!

  • @ZealZeal
    @ZealZeal 3 года назад

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

  • @lucianorubio9129
    @lucianorubio9129 3 года назад

    Your project is amazing!

  • @sinus4784
    @sinus4784 3 года назад +1

    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

  • @meady200
    @meady200 2 года назад

    Absolutely goddamn amazing!

  • @nguyenhoangminhtrung2779
    @nguyenhoangminhtrung2779 Год назад

    What is this godsends content I just found?

  • @Zarokii
    @Zarokii 2 года назад

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

  • @nasta4554
    @nasta4554 3 года назад

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

  • @TeppuTeppu
    @TeppuTeppu 2 года назад

    awesome! I love performance!

  • @JustATempest
    @JustATempest 3 года назад +11

    The definition of over engineering. Great work!

  • @atakoof2257
    @atakoof2257 3 года назад +3

    Babe wake up new Aarthificial video

  • @liltrashpanda174
    @liltrashpanda174 2 года назад

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

  • @monsieuralexandergulbu3678
    @monsieuralexandergulbu3678 3 года назад

    3:23 big brain move ;)

  • @tulasigopinath
    @tulasigopinath 3 года назад

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

  • @parsuli.
    @parsuli. 3 года назад

    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).

  • @AstonishedByTheLackOfCake
    @AstonishedByTheLackOfCake 3 года назад +2

    Babe wake up new Aarthificial video

  • @Xeraclom14
    @Xeraclom14 3 года назад +3

    Babe wake up new Aarthificial video

  • @spiro2482
    @spiro2482 3 года назад +3

    Babe wake up new Aarthificial video

  • @UnofficialFoneE
    @UnofficialFoneE 3 года назад

    Great work as always!

  • @Adam-fg4ut
    @Adam-fg4ut 2 года назад

    The explanations on your code and animations are great! I wonder how you animate these explanations in your videos. Trying to copy you lol.

  • @tedchirvasiu
    @tedchirvasiu 3 года назад

    This is super smart

  • @monawoka97
    @monawoka97 3 года назад +16

    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.

  • @pygmee6412
    @pygmee6412 3 года назад +2

    Very neat effect and explanation. I don't know Unity or any game engine for that matter, but I worked a lot with OpenGL to create my own engines and games, and it is natively possible to draw pixel perfect lines (by using GL_LINES for example), is there really no other way than using a geometry shaders (than can be quite expensive) in your case?

    • @aarthificial
      @aarthificial  3 года назад

      Thanks!
      Did some testing. Not sure how line primitives are rasterized, but the result is much worse than Bresenham, unfortunately: imgur.com/a/Path692
      Unless there's some way of configuring this?

  • @EVILBUNNY28
    @EVILBUNNY28 3 года назад +2

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

  • @LanK111er
    @LanK111er 3 года назад +4

    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.

  • @janorszulik6429
    @janorszulik6429 2 года назад

    For pixel art lines this can be more efficiently rendered used Line List / Line Strip primitive topology. As long as width of the line is one pixel. Performance gain however will be considerably (relatively speaking, this is not exactly expensive to render either way)

    • @aarthificial
      @aarthificial  2 года назад

      I address that in point 1 of my pinned comment

  • @Nizart
    @Nizart 3 года назад

    Hey, Alice got her big head back!

    • @aarthificial
      @aarthificial  3 года назад

      No way, I just don't have all the new animations yet xD

    • @Nizart
      @Nizart 3 года назад

      @@aarthificial damn!

  • @sam2chill
    @sam2chill 2 года назад

    This game is amazing

  • @rydeoff1023
    @rydeoff1023 Год назад

    wow just wow

  • @vb0t429
    @vb0t429 2 года назад +1

    Impressive solution and implementation!

  • @apexio2659
    @apexio2659 3 года назад +1

    You should make it a unity asset. It is very cool!

  • @wonderingpixel
    @wonderingpixel 3 года назад +1

    How can I some how recreate this?
    I need that ;)

  • @joshbishop
    @joshbishop 3 года назад +1

    I never clicked on a notification thumbnail so quickly

  • @ThighConnoisseur
    @ThighConnoisseur 3 года назад +4

    really well done, good thinking

  • @Lolatronn
    @Lolatronn 3 года назад +2

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

  • @jonmichaelgalindo
    @jonmichaelgalindo 3 года назад +1

    I was happy until 1:10, but WebGL has no geometry shaders. :-/

    • @aarthificial
      @aarthificial  3 года назад +1

      I know ;-;
      Apple also doesn't support them. I'm currently exploring some other ideas based on the feedback I've received

  • @JochemKuijpers
    @JochemKuijpers 3 года назад +3

    I'm not a huge fan of programmers explaining abstraction or hardware operations as magic or witchcraft, (as a programmer myself) I'd rather demystify those kinds of things and maybe throw in a few search terms/keywords for people to learn more if they want to. But a cool video nonetheless. 🙂

    • @aarthificial
      @aarthificial  3 года назад +1

      Thanks!
      It's really just my bad sense of humour. I decided that more info about the simulation (other than it being spring-based) is not really relevant in this video. If anything, it probably deserves its own.
      This Reddit post that I've mentioned - redd.it/7ppldz - talks about it in more detail and even shares some source code

    • @JochemKuijpers
      @JochemKuijpers 3 года назад

      ​@@aarthificial No worries, I thought I'd mention my concern at least once. If you want to keep doing that as a joke, feel free, I'm not too bothered by it. 😄

  • @inv41id
    @inv41id 3 года назад

    As someone who's done GPU programming: YOU'RE DOING IT WRONG AAAAAAH
    As someone who has calmed down a little: That's very neat! And the performance won't be bad since you're only calculating a couple thousand nodes anyways.

    • @aarthificial
      @aarthificial  3 года назад +1

      Please don't be the "you're doing it wrong but I won't tell you why" guy. Elaborate a bit

    • @inv41id
      @inv41id 3 года назад

      @@aarthificial First of all, why are you using triangles when line segment primitives exist?
      Second of all, why are you generating geometry specific for each pixel? Fragment shaders are meant specifically for calculating values of single pixels! Sure you're calculating very few fragments by doing it your way but you're also putting lots of load on the rasterizer and not utilizing the parallelism of your shader cores properly.

    • @aarthificial
      @aarthificial  3 года назад

      ​@@inv41id
      1) You can take a look at the pinned comment where I talk about line primitives
      2) It's 2021, I don't really worry about the number of triangles sent to the rasterizer. I do, however, worry about overdraw.

    • @inv41id
      @inv41id 3 года назад

      @@aarthificial Really good points, thanks! I see you addressed most of my concerns in replies to other comments so that's nice 🙂

  • @syncarn
    @syncarn 3 года назад +1

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

    • @aarthificial
      @aarthificial  3 года назад +1

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

    • @syncarn
      @syncarn 3 года назад

      @@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 ;)

  • @gefulltetaubenbrust2788
    @gefulltetaubenbrust2788 3 года назад +1

    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
      @aarthificial  3 года назад

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

  • @rakshasharma6656
    @rakshasharma6656 3 года назад +1

    Will this work on my 32 bit 2gb potato?

    • @aarthificial
      @aarthificial  3 года назад

      It's more about your graphics card but we'll see. I try to make all these fancy effects optional just in case

  • @RetroDead
    @RetroDead 3 года назад

    babe wake up, new Astortion devlog

  • @PrabowoMurti
    @PrabowoMurti Год назад

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

  • @sakurahertz
    @sakurahertz 3 года назад

    This is crazy wtf!!

  • @TinyDeskEngineer
    @TinyDeskEngineer Год назад

    Ah, my favourite feature of a GPU, witchcraft.

  • @SilentOnion
    @SilentOnion Год назад

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

  • @filipemecenas
    @filipemecenas 2 года назад

    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

  • @Eldarduil
    @Eldarduil 2 года назад

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

  • @granttjamess
    @granttjamess Год назад

    I love watching your videos pretending I know whats going on

  • @Javantea
    @Javantea 2 года назад

    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
    @freddysingbot7400 2 года назад

    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

  • @gamingtoday1418
    @gamingtoday1418 3 года назад +1

    ooo this looks interesting! Still i think there a few changes to be made. Here are two ideas for improvements:
    Perhaps make it an option to be able to use mouse 1 to both select and active the anchors gravity? This would definetly speed up gameplay and interactions which would suit this 2D platform puzzler game perfectly.
    Instead of fading to black during a screen transition how about the camera simply scrolls in that direction like Celeste. Wouldn't work with your current implementation but would sure look a lot better than the fade.

    • @aarthificial
      @aarthificial  3 года назад +2

      1) You'll be able to remap controls via settings so its definitely gonna be possible.
      2) Well, that's more or less a subjective thing. Hollow Knight, for example, had fading and it didn't bother me at all.
      Also, I feel like the video where I showed these transitions gave a false sense of scale of the rooms. They're gonna be much bigger than the playground and transitions won't happen that often.
      Still, they are a subject to change. We'll see.

  • @windwalkerrangerdm
    @windwalkerrangerdm 3 года назад

    You know how a person starts learning guitar, watches some videos reads some books and practices a few easy bars, and then youtube suggests a Malmsteen or Steve Vai video, and when that guitar newbie watches these videos, he or she immediately goes "nope", and just throws the guitar to the bin and decides to learn cooking instead? Well I'm about to do exactly just that, now that I watched this video.

  • @arsenbabaev1022
    @arsenbabaev1022 3 года назад

    What about pixel art shadows in top down game (like isaac )with shader? Is it possible? Maybe someone seen it done somewhere?

  • @PurpleDaemon_
    @PurpleDaemon_ Год назад

    2:17 Can you explain how you only show the parameters of a specific node in the inspector?

  • @Tubeytime
    @Tubeytime 2 года назад

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

  • @dragoncat2000
    @dragoncat2000 Год назад

    have you ever played rain world? the lines around 2:16 remind me of rain world's monster kelp, the nodes shown before rendering that then become pixel art. rain worlds animations are almost entirely procedurally generated pixel art, with extremely believable weight, which also look great and are in a beautiful pixel art environment. i recommend checking it out if you haven't, and looking for a video that is a presentation on the animation of it by the developers (unfortunately, it is not super detailed). if you play it, play it blind, and probably without the new dlc for the first playthrough (the dlc is an excellent as well though, originally a super anticipated mod)

  • @ihavekalashnikovyoudomath9275
    @ihavekalashnikovyoudomath9275 2 года назад

    The way I see it, you're making a 3D game that identifies as a 2D pixel art game

  • @canadianblitz3468
    @canadianblitz3468 3 года назад +1

    I love how you went through everything in detail!

  • @yorgle
    @yorgle 2 года назад

    wow

  • @MelonSiggi
    @MelonSiggi 2 года назад

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

  • @delphicdescant
    @delphicdescant 3 года назад

    Next up:
    aarthificial Hairworks

  • @rockyquinlan1527
    @rockyquinlan1527 2 года назад

    What do you use to edit your videos and make graphic designs

  • @slpwrm
    @slpwrm Год назад

    man, i wish i was this smart

  • @itsME-dc4vm
    @itsME-dc4vm 3 года назад +1

    nice ;D

  • @joseh9254
    @joseh9254 3 года назад

    like i could possibly understand any of this

  • @winnie8614
    @winnie8614 3 года назад

    I'm interested how is this differs from nNidia hairworks?
    For example, if such a technique would be used in 3D how would it be comparable performance-wise.

  • @KewlSokudo
    @KewlSokudo 2 года назад

    Kaze Emanuar 2

  • @red1monster_
    @red1monster_ 2 года назад

    GPUs are awesome when you can harness their power

  • @jgtb0pl
    @jgtb0pl 2 года назад

    that's nice form of foreshadowing

  • @asp-uwu
    @asp-uwu 3 года назад

    line primitives: _am i some kind of joke to you?_

  • @Thomason1005
    @Thomason1005 3 года назад

    hmm gpus can totally natively rasterize lines, in opengl and directX. unity is using it in the editor itself, i would be suprised if it wasnt aviable to game code.
    still, awesome video, and explanations. very low depth, but even more so interesting and well visualized!

    • @aarthificial
      @aarthificial  3 года назад +1

      Thanks so much!
      I've never said that they can't. You can take a look at the pinned comment to see why I'm not using line primitives

  • @HannesMrg
    @HannesMrg 3 года назад

    I don't understand where the triangles suddenly came from.

  • @SuperGamersgames
    @SuperGamersgames 3 года назад

    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.

  • @Domarius64
    @Domarius64 2 года назад

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

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

  • @nikhilsood9501
    @nikhilsood9501 3 года назад

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