How To Create Animated Plants With Shaders

Sdílet
Vložit
  • čas přidán 31. 05. 2024
  • Welcome to my first CZcams devlog! My name is Mitch and I'm a programmer from Australia. I've been creating games and game engines for 6 years now and in this video I show the technical process I went through to make 3D plants.
    I would love to hear your thoughts and any game-engine or technical questions!
    Timestamps
    0:00 Intro
    0:27 Modifying geometry
    0:51 Creating a mesh from scratch
    1:39 Bending leaves
    2:54 Rotating leaves
    3:23 Multiple leaves
    4:32 Animation and wind
    5:34 Final result
    Want to read more technical posts? Check out my free Patreon posts:
    / vercidium
    Music:
    Spectrum, Azure and Shadows by Disjoint Square
    disjointsquare.bandcamp.com/a...
    Halt State by Punch Deck
    • Halt State - Punch Deck
    #devlog #gamedev #indiegamedev
  • Hry

Komentáře • 231

  • @paulbunyangonewild7596
    @paulbunyangonewild7596 Před 4 měsíci +186

    The extra triangles trick is GOLDEN

  • @JMO-
    @JMO- Před 2 měsíci +40

    I love it when channels like this just randomly pop up in my recommendations! These types of channels are the very reason why the games I'm making are even playable lol. Thank you for the videos!

  • @lenargilmanov7893
    @lenargilmanov7893 Před 7 měsíci +383

    This is cool, but you can also precompute all vertex positions so that the shader doesn't have to do it every frame.

    • @Vercidium
      @Vercidium  Před 7 měsíci +117

      Where would the precomputed data be stored? It’s performed every frame as it’s animated / blows in the wind

    • @Genebriss
      @Genebriss Před 7 měsíci +77

      @@Vercidium in the fbx file 🙃

    • @Vercidium
      @Vercidium  Před 7 měsíci +384

      @@Genebriss I tried writing an FBX parser once and ended up destroying half of downtown New York

    • @SimonBuchanNz
      @SimonBuchanNz Před 7 měsíci +94

      ​@@Vercidiumnormally you have a "wind strength" vertex weight attribute or the like. It has the nice effect that you can reuse the same vertex shader for lots of different plants.

    • @Vercidium
      @Vercidium  Před 7 měsíci +104

      @@SimonBuchanNz I see, I like it. The UV coordinates could be used as the weight attribute as it gives the top of the leaf a value of 1 and the base a value of 0

  • @VerMishelb
    @VerMishelb Před 6 měsíci +122

    This channel has randomly appeared in my recommended feed and damn glad I am that it did. You have so much cool stuff here!

    • @Vercidium
      @Vercidium  Před 6 měsíci +15

      Thank you so much! And I have even more videos planned

    • @matthewzeller5026
      @matthewzeller5026 Před 4 měsíci +2

      ​@@Vercidium I just found your channel too and I'm really excited, really great context and explanations. Thanks for sharing these techniques.

    • @Vercidium
      @Vercidium  Před 4 měsíci +1

      @@matthewzeller5026 no worries, thank you for the kind words!

    • @ADEPS.
      @ADEPS. Před 2 měsíci +1

      Yeah me too. I watch a lot of Blender and OpenGL tutorials

  • @lesheq85
    @lesheq85 Před 6 měsíci +17

    I am surprised nobody is talking about the Netflix logo at 3:55
    Anyway, great video, don't know if if till ever help me, but at least it is something new

  • @ding-hobba
    @ding-hobba Před 6 měsíci +118

    Mann this is extremely polished and well produced

  • @unitrader403
    @unitrader403 Před 3 měsíci +30

    “Go back and look at that fern. Stanley, this fern will be very important later in the story. Make sure you study it closely and remember it carefully.”

  • @negretedev
    @negretedev Před 6 měsíci +17

    I love this, your visualizations are so clear! Hope you will keep making more like this!

  • @nycrea
    @nycrea Před 6 měsíci +6

    Great video, editing is great and your explanations are also very intuitive without getting into too much complexity right away.

  • @sincog2010
    @sincog2010 Před 6 měsíci +4

    Just discovered your channel. I recently got into game engine development, and the last few videos of yours have been interesting to watch, I love your approaches to optimization. Thank you, and I hope you continue to do tutorials and tips like this!

  • @IamSH1VA
    @IamSH1VA Před 6 měsíci +2

    This is so cool, looks so natural & realistic.
    Thanks for detailed explanation & tutorial 🙏

  • @SeanStClair-cr9jl
    @SeanStClair-cr9jl Před 6 měsíci +4

    Loving the presentation quality of these videos so far! Excited to see where you take the channel!
    Also, I must say the terrain at 1:13 is bizarrely striking. I don't know what it is that seems so stylish and cohesive about it, but it's more mysterious and enticing than a lot of upcoming AAA game terrain lol.

  • @js3671
    @js3671 Před 4 měsíci +2

    As I am just beginning to learn about shaders I am really glad these videos popped up in my reccomended! Incredible stuff really looking forward to using some of these techniques in my own projects!

  • @mohammadalaaelghamry8010
    @mohammadalaaelghamry8010 Před 4 měsíci +4

    This channel is a gem, great content. Thank you.

  • @DireWolfAirstrike
    @DireWolfAirstrike Před 4 měsíci +4

    The lighting in your fancy fern montage reminded me of a lighting trick that seems up your alley.
    You can bake animated shadows for any object-light pair where neither element's motion can be influenced by the player. Great for day-night cycles.

    • @Vercidium
      @Vercidium  Před 4 měsíci +2

      Ooh how does that work?

    • @DireWolfAirstrike
      @DireWolfAirstrike Před 4 měsíci +2

      It's similar to existing methods of baking shadow maps, but you need some more metadata at compile time, and the process results in animated textures.
      Quick primer on shadow maps cuz I don't know who reads these:
      If you mark all the lights and objects that don't move in a scene, you can precompute the shadows for those things and save them as image textures. That way you don't have to do that expensive lighting math every frame for those objects. Nice!
      If you have moving lights or objects, they're traditionally excluded from this method, but they don't have to be, as long as you know what the movement is going to be. Take for example the position of the sun in a day/night cycle. Give the shadow baker a reference to the movement loop, and it should be able to do its normal process for every frame of that movement. Poof! Animated shadow map!
      If you have multiple lights or objects on loops, you have some options:
      1: You could bake a texture for each object-light pair, but then you'll undo all your hard work un-bottlenecking the cpu-gpu data pipeline.
      2: You could do #1, then extend the loops of each animated texture on a mesh to the least common multiple of their runtime, then squash down to a single animated texture. Unfortunately, that texture's loop could be as long as the longest loop times the number of lights in the scene.
      3: You could bake, for example, just the day/night cycle, expecting that should save you the most runtime computation.
      4: You can do something clever I haven't thought of to solve this problem.

    • @DireWolfAirstrike
      @DireWolfAirstrike Před měsícem +1

      Update to the above: I'd probably just handle looping lights and stationary objects, since the kind of game that cares about this level of graphics optimization probably doesn't have many objects that move on loops anyway.

  • @Leownification
    @Leownification Před 7 měsíci +12

    Amazing video, super informative, saving this for later!

  • @coffzor123
    @coffzor123 Před 4 měsíci +2

    Totally unvaluable knowledge being put out here for free, absolutley incredible tips and tricks.
    You popped up in my recommended and I wish you the best on youtube. :) Too good to miss a single video, subbed and notifications on. Keep up the good work! :D
    Hats off to you good sir.

    • @Vercidium
      @Vercidium  Před 4 měsíci

      Thank you so much, I’m glad you like the videos!

  • @TheTimeshadows
    @TheTimeshadows Před 23 dny

    I love this!
    If i weren't unemployed, I would join your Patreon at a pay tier.
    Please do continue to share these with us here.

  • @fylkasalitheias7451
    @fylkasalitheias7451 Před 6 měsíci +4

    Love your presentation. Even though I am not into video game development, I find this quite interesting.

  • @anilaxsus6376
    @anilaxsus6376 Před 6 měsíci +2

    Amazing video man, amazing, good looking and infomative, gg.

  • @noahlederer8587
    @noahlederer8587 Před měsícem +1

    good fern montage at the end. I enjoyed my stay

    • @Vercidium
      @Vercidium  Před měsícem

      Thank you, I’m glad you did :)

  • @tobzdaman619
    @tobzdaman619 Před 4 měsíci +1

    Instant sub. Thank you for this.
    You and Acerola are godsends to me at a time like this!

    • @Vercidium
      @Vercidium  Před 4 měsíci +2

      That means a lot, I’m glad I can help!

  • @OmniMC
    @OmniMC Před 2 měsíci +1

    This is such a well explained video that now I feel I can read shader code no problem. Next step would be to learn to write it

  • @Mark_Rober
    @Mark_Rober Před 6 měsíci +1

    Love the outro song dude! So nice to meet a fellow Punch Deck fan! Totally gotta sub.

    • @Vercidium
      @Vercidium  Před 6 měsíci

      LOVE Punch Deck! We commissioned the whole Sector's Edge soundtrack from him and he did an amazing job. It's on Spotify :)

    • @Mark_Rober
      @Mark_Rober Před 6 měsíci +1

      @@Vercidium Oh so YOURE who made sectors edge!
      Halt State, Flow state, Fluid Dynamics are al some of my favourite songs of all time but The Vibe has achieved legendary status for having the best use of LFO's ive ever heard.

    • @Mark_Rober
      @Mark_Rober Před 6 měsíci +1

      @@VercidiumIf you like Punch Deck you might like Exyl, he has a similar style of music with really good dynamics with a sort of crisp ethereal sound. The only difference is that Exyl mostly makes dubstep:
      czcams.com/video/EEnzDZFy5oY/video.html

  • @SillyOrb
    @SillyOrb Před 2 měsíci +1

    4:16 This is known as a degenerate triangle. Degeneracy in this context means that a portion of a shape is arranged in a collinear way. In the case of a triangle, when two or all three of its vertices overlap, the effective area becomes zero, so rasterisation is skipped. Using degenerate triangles in this way used to be called "stitching," but the term has multiple uses and the more general "batching" is more common these days. It was a form of batching triangle strips and (separately) fans back in the early days of OpenGL and hardware accelerators.

  • @maatte7093
    @maatte7093 Před měsícem +1

    you deserve 1 million sub no cap

  • @skope2055
    @skope2055 Před 5 měsíci +1

    Great and useful content!

  • @nameno7032
    @nameno7032 Před měsícem +1

    no word to describe, genius

  • @Pockeywn
    @Pockeywn Před 6 měsíci +1

    i’m keeping an eye on your channel i feel like you’re gonna get big

  • @anzhel3268
    @anzhel3268 Před 6 měsíci +2

    i love vertex instancing so much!

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      It has so many applications! I try to use it wherever possible

  • @koool56
    @koool56 Před 6 měsíci +2

    Absolutely amazing video

    • @koool56
      @koool56 Před 6 měsíci +2

      Looking forward to more videos! I just recently finally grasped OpenGL enough to understand what the hell is going on and got basic project going in Zig, really looking forward trying these things out! This channel will become big, especially if you keep making videos like these, just a question of time until algorithm picks you up. Thank you

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      @@koool56 you are too kind, thank you! Nice work setting up your first project, you now have a canvas where you can create anything.
      Let us know if you have any specific questions, or if you’d like a video to cover something in detail.
      I also recommend learnopengl.com, I knew nothing about 3D rendering 6 years ago and this site taught me so much

  • @ImNotGam
    @ImNotGam Před 6 měsíci +3

    Damn okay I didn't know you had editing skills as well as game dev skills.
    On the other hand, I'll be taking notes for when I continue messing around with OpenGL.

  • @hannah42069
    @hannah42069 Před 7 měsíci +15

    What's the advantage of doing this? Presumably mesh data only gets sent once at startup anyway, so shouldn't be too big of an impact?

    • @Vercidium
      @Vercidium  Před 7 měsíci +26

      There’s a few advantages:
      - Each fern can have a different amount of leaves with varying sizes and orientations, making scenes look less repetitive. This can also be changed on the fly (no need to re-import from Blender or upload a new mesh to the GPU)
      - There's no vertex bandwidth. Each vertex shader can run without waiting for vertex data (model data) to be read from memory
      - One less matrix4 multiplication (64 multiplications and 48 additions) is performed per vertex, since it’s positioned and rotated using sin/cos instead

    • @gonderage
      @gonderage Před 6 měsíci +3

      ​@@VercidiumThat third explanation now makes your use of multiple trig functions make sense. I thought it was weird that you'd be using something expensive multiple times, but it turns out to be the cheaper alternative at scale.

    • @jnevercast
      @jnevercast Před 6 měsíci +1

      @@Vercidium Point 2: "Each shader can run without waiting for model data". Is this because each instance is using the same buffer? I presume there is _some_ buffer? or can you issue a draw call with no buffer and a number of verts?

    • @Vercidium
      @Vercidium  Před 6 měsíci

      @@jnevercast there is a tiny buffer with 1 byte per vertex that’s unused. Unfortunately a vertex buffer still needs to exist to render N vertices

  • @bonmas14
    @bonmas14 Před 3 měsíci

    Very cool video! I have question, how does this work on cpu side? (buffers/vertex arrays) I trying to make something simillar for sprite rendering, just writing glDrawArray doesn't work. I already have shader like here 5:58. But I don't understand how to prepare data on the cpu side

  • @danielsantos3254
    @danielsantos3254 Před 4 měsíci +2

    How much does the transparent texture affect performance? I remember reading/watching somewhere (might’ve been the StylizedStation channel) that too many transparent textures can slow things down. Something to do with potentially having to calculate the color value for each pixel multiple times for each texture it passes through, I think.

    • @Vercidium
      @Vercidium  Před 4 měsíci +1

      That’s right, transparency is a performance killer. I use discard statements in the fragment shader here instead of blending, to avoid the blending cost

  • @pixobit5882
    @pixobit5882 Před 7 měsíci +7

    What program did you use to animate the code snippets?

    • @Vercidium
      @Vercidium  Před 7 měsíci +7

      Hey I wrote my own in C# using SkiaSharp, with RichTexKit for syntax highlighting. I was originally using tweetlet.net/code for static images but it was tedious to export them

  • @KevysNotHeavy
    @KevysNotHeavy Před 4 měsíci +1

    I just realized you 're the guy who made Sector's Edge (Love that game)

  • @meanmole3212
    @meanmole3212 Před 6 měsíci +2

    Nice stuff! I think twisting a leaf around an axis that goes parallel the leaf would add even more realism.

    • @sciencecompliance235
      @sciencecompliance235 Před 6 měsíci +1

      Was thinking the same thing.

    • @Vercidium
      @Vercidium  Před 6 měsíci

      I hadn't considered that! I'll give it a go

    • @sciencecompliance235
      @sciencecompliance235 Před 6 měsíci

      @@Vercidium Honestly, I think even something like a vec3 wind uniform that includes x direction, y direction, and magnitude would improve this, too. Then you can bias the oscillations in the direction the wind is blowing ( and greater at the tips) and use a trig function composed of multiple sine functions with different periods to make it appear a bit gusty.

  • @vihannes3
    @vihannes3 Před 6 měsíci +5

    When using triangle strips, isn't there a special index (like 0xffffffff) for starting a new strip within the same call, so you wouldn't need to do the hack with the invisible triangle?

    • @Vercidium
      @Vercidium  Před 6 měsíci +3

      Yes there is, that’s called Primitive Restart. But unfortunately I’m not using an index buffer and don’t have access to it :(

    • @vihannes3
      @vihannes3 Před 6 měsíci

      @@Vercidium Ah, I see... thanks!

  • @2animatez156
    @2animatez156 Před 6 měsíci +1

    While reading the comments I noticed there was a lot of mentions of 'loading vertex data into the shader each frame'/'vertex bandwidth'.
    Why is there no bandwidth? Aren't a buffer of 1-byte zeroes being sent, meaning there would be reduced but not zero bandwidth, or am I thinking about this incorrectly?

    • @Vercidium
      @Vercidium  Před 5 měsíci +1

      Hey that’s right, there’s a tiny amount of bandwidth but for a buffer that small it’s likely it will fit in the cache before being sent to each shader.
      I’m curious if GPUs optimise this further by detecting if the mesh data is used in the shader, and if not skips loading mesh data entirely

  • @NickEnchev
    @NickEnchev Před 6 měsíci +3

    I'm curious if you would be able to handle the separation of the individual leaves by using a geometry shader and EndPrimitive()?

    • @Vercidium
      @Vercidium  Před 6 měsíci +1

      That would work! Someone also suggested using an index buffer and a Primitive Restart, to start a new strip every N vertices.

    • @NickEnchev
      @NickEnchev Před 6 měsíci +2

      ​@@VercidiumThat sounds like a good approach as well. I would imagine though that using the tessellation/geometry hardware would work better and make the vert shader less "branchy" (no pun intended).

  • @gokkiyoutube
    @gokkiyoutube Před 4 měsíci +1

    I was hoping you could render the leaves without textures, but this is cool!

    • @Vercidium
      @Vercidium  Před 4 měsíci +2

      Might be able to replicate the texture procedurally one day, I’d love to try it!

  • @kaansouth8789
    @kaansouth8789 Před 5 měsíci +1

    😮mind blown!!!

  • @camelCased
    @camelCased Před 5 měsíci +2

    3:55 - hey, who invited the Netflix logo? 😀

    • @argi4141
      @argi4141 Před 4 měsíci

      yeah netflix go away! get your own youtube channel

  • @YannMetalhead
    @YannMetalhead Před 4 měsíci +1

    Good video.

  • @Terreurhaas
    @Terreurhaas Před 2 měsíci +1

    Hey Mitch, great channel. Subbed after watching like two videos. The fern still looks a little bit as if it is breathing and not really affected by wind. I believe you should be able to walk across the leaves you generated from last and first (or really any index you fancy) to simulate a more direct wind. (disclaimer: I am not a game developer, just a boring software developer)

    • @Vercidium
      @Vercidium  Před měsícem

      Thanks for the feedback, good point. I've since set up a basic wind system that moves ferns / trees / grass in the same direction, but it's tricky as the triangles are being stretched/compressed. Keen to solve it though because realistic wind looks awesome

  • @namrog84
    @namrog84 Před 7 měsíci +4

    What application are you using to write the script/code in and view the generated models?

    • @Vercidium
      @Vercidium  Před 7 měsíci +10

      I was using tweetlet.net/code to begin with, but it was tedious to update them and I couldn’t animate them.
      I ended up writing my own in C# and rendering them in game, then screen recorded it. I feel like I can create a whole other devlog about how I created this devlog!

    • @r2d2vader
      @r2d2vader Před 7 měsíci +4

      @@Vercidium Devlogception!

    • @Vercidium
      @Vercidium  Před 7 měsíci +3

      @@r2d2vader I’ve seen quite a few of them! Seems to be a popular thing

  • @vibk2744
    @vibk2744 Před 7 měsíci +3

    This is amazing

  • @AgeOfTheJoshua
    @AgeOfTheJoshua Před 6 měsíci +1

    Wow dude is all the mograph done by you? Well done

    • @Vercidium
      @Vercidium  Před 6 měsíci

      Thank you! Yes all done in C# and OpenGL. It was a ton of work but I've built up an animation system that I can re-use for the next videos

  • @yazata7540
    @yazata7540 Před 6 měsíci +1

    keep up!!!

  • @jeanmahmoudventilateur3480
    @jeanmahmoudventilateur3480 Před 5 měsíci +1

    Great channel, I'll come back later if I'm making games lol

  • @JuddSamurai
    @JuddSamurai Před 6 měsíci +1

    This is absolutely amazing! I do wonder about those shadows at the end though, how are they done. I've tried implementing different forms of shadows into my own engine but they are always pretty pixelated so how do you do your shadows, as they look really good.

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      Shadows are the bane of my existence haha, for this video I just increased the shadow resolution. I've started my shadow implementation from scratch and I'm looking into better Cascaded Shadow Mapping techniques.
      I don't fully understand the matrix maths behind shadows, I need to take a step back and figure out what's going on. MJP has a few great resources about shadows but they are super technical, I'm yet to wrap my head around most of it

  • @alexm666
    @alexm666 Před měsícem +1

    You never mentioned normals. Did you compute them too in the shader?

    • @Vercidium
      @Vercidium  Před měsícem +2

      I do, they're computed using sin and cos as well. There's also an extra step to ensure the top of the leaves have upwards-facing normals, and downwards-facing normals on the bottom (since there's no culling)
      I checked the shader and I use gl_FrontFacing to flip the normals, but I'm not sure if that works in all scenarios. I'll have to double check

  • @bakamund
    @bakamund Před 5 měsíci +1

    this would be applied for stylized games i'm assuming?
    it doesn't seem to have the direct artistic control that DCC applications provide, and when optimization is mentioned we can see from AAA games (tlou, rdr2, cod mw, horizon, etc) that the game can run at 60fps at recommended hardware specs

  • @Psychx_
    @Psychx_ Před 6 měsíci +1

    Don't these "if" and "else if" blocks in the vertex shader cause a lot of lane masking on the GPU?

    • @Vercidium
      @Vercidium  Před 6 měsíci +3

      It’s good practice not to use ifs, but I’ve never noticed a performance hit, especially when vertex shaders aren’t the bottleneck
      The one time I noticed branching issues was on an AMD card, where I had about 6 of them in a nasty setup (some nested, some one after another)
      I reworked the logic into a set of ternaries and it fixed the issues, but can’t say for sure as it was on another user’s GPU. I profiled it on my NVIDIA GPU and didn’t notice a performance difference either way

  • @me_owe_ski
    @me_owe_ski Před 7 měsíci +1

    > Cheated and Created Plants with No Geometry
    > Proceeds to use geometry

  • @zyad48
    @zyad48 Před 5 měsíci +2

    Obviously it isn't like plants don't move even a little while at rest, however I'm curious, would this implementation be able to work with animating simulated wind or player interaction?

    • @Vercidium
      @Vercidium  Před 5 měsíci +2

      That’s my next goal for this renderer :) first dynamic wind and then player interaction

    • @zyad48
      @zyad48 Před 5 měsíci +2

      @@Vercidium MAN CZcams has been bad about serving me my notifications, I only found that you responded by checking the video again randomly haha, thanks much for answering my question! I can't wait to see progress done on this :D

  • @puddlejumper3259
    @puddlejumper3259 Před 4 měsíci +2

    Imagine an entirely procedurally generated game environment made using only shaders. Geometry, textures, animation.

  • @biglittledude496
    @biglittledude496 Před 4 měsíci +1

    You are a genius

    • @Vercidium
      @Vercidium  Před 4 měsíci

      Haha not quite but thank you!

  • @redgek
    @redgek Před 7 měsíci +9

    If I understood correctly you load N vertecies large buffer to a GPU, and then modify the verts in a vertex shader. Instead of loading the exact amount of verticies to a GPU that you're gonna change anways, you coulld look up geometry shaders and tesselation shaders to generate meshes on the fly. But, for the specific fern/grass example I think it's better (perfomance wise) to have load a model once, then instance it, and have a shader that adds the wind animation based of some properties of the vertices (like vertex colors) and uniforms (like wind direction vector (or a texture)).

  • @luminous2585
    @luminous2585 Před 3 měsíci

    That bit of code with the triangle vertices you showed made me wonder something. Are shading units capable of speculative execution? That is if that code is actually run by those. I know extremely little of the topic. Since the branches are always accessed in a fixed order it seems like that would be very speedy if it was able to go to the right line of code ahead of time.

  • @e4zyphil
    @e4zyphil Před 6 měsíci +4

    Hey I find your videos really interesting. You made the wind more realistic with a few tweaks. I think syncing the leaves to an external wind is needed tho, this endresult wouldn't fly in a real game. That would also interest me.

    • @Vercidium
      @Vercidium  Před 6 měsíci +3

      Yes that's essential and is something I'm keen to try. I've added it to my ideas list, watch out for future videos!

    • @star-di3wx
      @star-di3wx Před 5 měsíci

      I'm thinking for a simple wind direction implementation:
      Add a constant(around 4 or so) to wind, to move the range to all positives
      multiply wind by cos(windDirection - yaw)
      adjust the constant for totalPitch

  • @farianderson168
    @farianderson168 Před 3 měsíci

    i remember we had to use POSITION symantic in unity shaders ( written mostly in cg ) in order to get position data from the mesh in the vertex shader. something like this:
    float4 position : POSITION;
    now i wonder if this will produce an error or not when there's no position data in the mesh.

  • @viniciusnoyoutube
    @viniciusnoyoutube Před 6 měsíci +1

    It only missed the wind strength so the leafs move more or less.
    Maybe wind direction if you really need perfection.

  • @flowfrog101
    @flowfrog101 Před 6 měsíci +1

    Very professional video. What software do you use for your videos?

    • @Vercidium
      @Vercidium  Před 6 měsíci +1

      Thank you, it’s all done in code with C#, SkiaSharp and OpenGL

  • @pier3d278
    @pier3d278 Před 5 měsíci

    This is really cool, thanks for sharing! I wonder what is the advantage of using a method like this, over the normal modeling. Can anybody explain please?

  • @user-jb3rb7pg7m
    @user-jb3rb7pg7m Před 4 měsíci

    How did you add shadows?

  • @r2d2vader
    @r2d2vader Před 7 měsíci +8

    Next video: How I cheated and rendered a 3D game with no triangles

    • @Vercidium
      @Vercidium  Před 7 měsíci +9

      Now that sounds like a fun chal- *8 years down the drain*

    • @bits360wastaken
      @bits360wastaken Před 7 měsíci +3

      Akshually its faster to render directly with voxels and/or primitives (but is WAY harder to work with and requires many changes to artstyle)

    • @hiiambarney4489
      @hiiambarney4489 Před 7 měsíci

      Always remember: "Switching to Default Cube is always faster than rewriting main Shader-Code" or something like that.@@bits360wastaken

    • @quintussilenius4324
      @quintussilenius4324 Před 7 měsíci +6

      there are, in fact, ways to make 3d graphics without triangles (such as distance fields), and they can actually do some pretty impressive things... but of course, they have their own limitations; not sure if anyone ever used such things for games (outside of some volumetric effects, that is)

    • @Vercidium
      @Vercidium  Před 7 měsíci

      @@quintussilenius4324 interesting! I’ll have to look this up

  • @Shkvarka
    @Shkvarka Před 4 měsíci +3

    It's genius... Im ML engineer and trying my skills in gamedev. Would you make some 2d physics tutorials? I'm trying to make some 2d ballistic sim in python. And to me it looks like I can't do a lot to optimize it (I decided to simulate not only ballistic part but also wind friction and make rocket 2-stage (reactive+ballistic)). But after your videos, I'm sure - I'm wrong=) Best regards from Ukraine, Odesa!

    • @Vercidium
      @Vercidium  Před 4 měsíci +2

      If there's one thing I can't do, it's physics! I can't help there sorry, but I enrolled in this course last year and it explains everything very well: pikuma.com/courses/game-physics-engine-programming

    • @Shkvarka
      @Shkvarka Před 4 měsíci +2

      @@Vercidium wow! Never heard of this website! Will take this course along with game engines! Thank you very much!!

  • @TechArtTom
    @TechArtTom Před 7 měsíci +3

    Really well presented video! Super inspiring, though i just wish the title wasnt as misleading.

    • @daveycoleman
      @daveycoleman Před 6 měsíci

      What did you feel was misleading about it? I think it did what it said on the tin.

    • @TechArtTom
      @TechArtTom Před 6 měsíci +2

      @@daveycoleman hahah well you changed the title you rascal! This title is much better imo ❤️

  • @SeitanSurKick
    @SeitanSurKick Před 7 měsíci +3

    🙌

  • @araujoPr
    @araujoPr Před 4 měsíci +1

    Hello friend, hope you are having a great day! A genuine question: when you started programming your engine, did you use something like openGL , directX or Vulkan or did you program this type of resources too? I want to start making an engine, but i don't know if i need( or can ) make the base of the graphics only using language resources. By the way, I wish to use c++ . Thank you for your videos, they are genuinely interesting and very inspiring!

    • @Vercidium
      @Vercidium  Před 4 měsíci +1

      I started with OpenGL and still using it for these demos. It will work great with C++ or C#. Thank you!

    • @araujoPr
      @araujoPr Před 4 měsíci +1

      @@Vercidium Thank you for the awnser!

  • @hugofoltin5647
    @hugofoltin5647 Před 6 měsíci +2

    is this done with only one draw call?

    • @Vercidium
      @Vercidium  Před 6 měsíci +1

      It is :) that's made possible using the glMultiDrawArraysIndirect function in OpenGL 4.3+

  • @weltraumimport
    @weltraumimport Před 4 měsíci +1

    i did not understand the extra triangles trick, why do they disappear

    • @weltraumimport
      @weltraumimport Před 4 měsíci +1

      nevermind i rewatched it i understand now. we are not optimising the draw calls but just make those connecting verticies disappear

  • @atomictraveller
    @atomictraveller Před 7 měsíci +2

    keen, i've been using opengl in win32 without glm so my models are generated procedurally.
    i can guarantee you one thing tho, all the people raised on video games would never recognise actual non motile plants.

  • @doltBmB
    @doltBmB Před měsícem

    remember, drawcalls are not expensive, state switching is, if all your drawcalls use the same state it will be fast

  • @kyoai
    @kyoai Před 7 měsíci +8

    Pardon me, but where exactly are you generating new geometry? For all I can see, you still have to create an equal number of vertices/polygons beforehand that you are going to work with. You still are taking existing vertices, and for each existing vertex you set a single render position, as is common with current plant render solutions. Granted, it's a very clever way of rendering a single straight strip of several polygons by cleverly rearranging vertex positions, but it's still not done without requiring pre-existing geometry, let alone, as your video title wrongly claims, "no geometry".

    • @Vercidium
      @Vercidium  Před 7 měsíci +4

      You’re right, there is still an underlying vertex buffer that’s filled with zeroes.
      Rather than containing multiple floats for position/normal/UV data, each vertex in the buffer is a single byte.
      This means for a fern with 24 leaves and 12 vertices per leaf, it’s allocating 288 bytes of vertex data, but not using it.

    • @SimonBuchanNz
      @SimonBuchanNz Před 7 měsíci +4

      In WebGPU you can completely avoid allocating any vertex buffers, and just draw an arbitrary number of polygons.

    • @Rafale25
      @Rafale25 Před 7 měsíci +2

      @@SimonBuchanNzDon't need webgpu, you can set glDrawArrays count to the number of vertices you need, no need to bind any buffer

    • @kyoai
      @kyoai Před 7 měsíci

      @@Vercidium That doesn't change the fact that you are still creating geometry by rendering a texture along a polygon, making the video title a lie.

  • @user-qd9lt9pc3i
    @user-qd9lt9pc3i Před 7 měsíci +5

    🌿🌿🌿

  • @fleity
    @fleity Před 6 měsíci +1

    Aren't sin and cos trigonometry function rather expensive on the gpu?

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      That’s true, but it means I can perform one less matrix4 multiplication (64 multiplications and 48 additions) per vertex, since it’s positioned and rotated using sin+cos instead

  • @ShigekiMiyakeStoner
    @ShigekiMiyakeStoner Před 5 měsíci +1

    Wow.

  • @changecraft6354
    @changecraft6354 Před 6 měsíci +1

    Damn the gpu gonna be happy about rendering so many transparent textures on top of each other for sure :)

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      Haha as long as they’re not filling the screen, it’s not too bad
      I looked at a few other games and they all seem to use 2D planes with a transparent leaf/branch texture on them
      I’d love to figure out a better system, possibly convert the texture to a mesh with minimal transparency

    • @changecraft6354
      @changecraft6354 Před 6 měsíci +2

      @@Vercidium modern gpu's can easily handle tons of vertices with optimized draw calls. You can easily model every leaf with a handful of vertices and get the additional benefit individual animations for each leaf and get better performance than having a bunch of these transparency bushes...

    • @Vercidium
      @Vercidium  Před 6 měsíci

      @@changecraft6354 sounds like an idea for a future video! For trees and plants in the distance, would it fall back to a 2D billboard?

  • @fireghost8858
    @fireghost8858 Před 5 měsíci +2

    What coding language and game engine are you using?

    • @Vercidium
      @Vercidium  Před 5 měsíci +2

      This is a custom engine built with C# and OpenGL. The shader code is written in GLSL

  • @TheUltimateBlooper
    @TheUltimateBlooper Před 3 měsíci

    That plant may be optimized, but artistically it just looks like it's "alive" and about to eat me, not like a plant xD

  • @michaelbuckers
    @michaelbuckers Před 6 měsíci +2

    How does this compare against regular 3d models performance-wise? Can't imagine calling so many trig functions is computationally cheap.

    • @JD_Mortal
      @JD_Mortal Před 6 měsíci

      Honestly, the results could be stored in a simple array to be "plugged-in", like the other values. They should only need to be "calculated" once, for the whole army of computed-models. Each could actually, also, be offset, so clones have unique timings and starting offsets. (Or adaptive timings, like a rush of wind moving more, faster, based off whatever external factor would control that.)
      Also, that the formula can also be extended to auto-create LOD too... On demand, per instance, based off multiple factors. Unlike hand-made or nasty "auto-decimated" LOD maths. Going in reverse, you ADD LOD, which yields better results than the best auto-tessellation formulas can offer, faster. (Auto-tessellation has to evaluate and "think" about each surfaces angles/normals and calculate interpolations. As opposed to a literally formulated point-product of a curved line and edges. Also, no need to "remap" the surfaces, which tessellation has to do, once it breaks-up the triangles into smaller triangles. Which has to be done, per-object, per surface, with auto-tessellation. Which is why it is such a horribly taxing novelty, and not a real-world "in production" component. Except in real rare cases, if you have a top-of-the-line GPU that has cycles to spare already. A total waste for distant objects, which are trying to down-grade, to fit more in view, against close-up objects trying to show more than is actually there, in a fake way.)

    • @Vercidium
      @Vercidium  Před 6 měsíci +1

      To recreate this as a regular animated model with bones (skeletal animation) it would need two matrix multiplications - one to rotate + position the leaf's bone, then another to convert it to screen space.
      The trig functions aren't cheap, but we can use them to skip that first matrix multiplication (64 multiplications and 48 additions), which makes it run a bit quicker

    • @michaelbuckers
      @michaelbuckers Před 6 měsíci +1

      @@Vercidium Would switching out trig functions for texture lookup incur too much memory bandwidth vs removing core load? The sine can be encoded in the same texture as the leaf.

    • @Vercidium
      @Vercidium  Před 6 měsíci +1

      @@michaelbuckers it would need to be benchmarked, my gut feel is a texture would be slower. A uniform array or UBO or SSBO could also be used to store the precalculated sin wave

  • @mati4193
    @mati4193 Před 6 měsíci +2

    This is cool and all, but wouldn't it be faster and easier to make a model like this in blender? What benefit do you get by using code to make 3d objects, wasn't 3d software made specifically so people didn't have to do that? If this is something made purely for novelty that's cool also I'm just curious on if there are any actual benefits for this process

    • @sciencecompliance235
      @sciencecompliance235 Před 6 měsíci +2

      3D software doesn't care about real-time rendering performance and even if it did wouldn't know enough about the use context to optimize properly.

    • @Vercidium
      @Vercidium  Před 6 měsíci +2

      It would be easier, but it wouldn't run as quickly because the mesh data must be loaded into the shaders each frame before they can begin executing. In this example the shaders can begin running instantly

  • @axiarubin8750
    @axiarubin8750 Před 4 měsíci +1

    I know very little about coding and 3d modeling, so all I have is just my assumptions.
    As I understand creating an object with code rather than 3d modeling software is harder, but pays off in reducing memory used. How hard would it be to create an object fit for the current AAA games? Let's take Geralt from Witcher for example. Would it even be possible to recreate this level of quality with this method?

    • @Vercidium
      @Vercidium  Před 4 měsíci +1

      It would be possible to generate more complex models in a vertex shader, but it would take a lot of code and at some point it’ll be quicker to just load the model from a buffer.
      The models that suit this approach are ones that are repetitive or follow patterns that can easily be recreated in a shader, like plants, terrain and particles

    • @axiarubin8750
      @axiarubin8750 Před 4 měsíci

      @@Vercidium Interesting. Is it possible to combine the two for an optimal performance?

  • @Fadil_mn
    @Fadil_mn Před měsícem +1

    if ppl played a mobile game that uses that same optimization as you and playing in a high frame rates they would so much so that they don't focus on the game loop

  • @S0lfur
    @S0lfur Před 7 měsíci +4

    hey.. Hey wait. HEY WAIT! THATS CHEATING!

  • @MrRSM0
    @MrRSM0 Před 6 měsíci +1

    That thing is breathing

  • @finesseandstyle
    @finesseandstyle Před 4 měsíci

    how performant is this compared to a more traditional way to render animated plants?

  • @MrMuzza1212
    @MrMuzza1212 Před 7 měsíci +7

    Um that is geometry...

    • @JimBob1937
      @JimBob1937 Před 7 měsíci +5

      Yeah... it's just generated geometry. He basically discovered that procedural geometry exists. I assume he knew this and just wanted a click bait title. Still good information, just not anything revolutionary.

    • @JimBob1937
      @JimBob1937 Před 7 měsíci +1

      Still wouldn't recommend it unless one has a reason to generate geometry at runtime, like uniqueness, or hard storage requirements. It's a trade off of storage versus compute.

  • @Iona_Roe_Deer
    @Iona_Roe_Deer Před 4 měsíci

    3:58 accidentally creating new Netflix logo. 😁

  • @galvinvoltag
    @galvinvoltag Před 6 měsíci +1

    *F E R N*

  • @sanaysspace
    @sanaysspace Před 5 měsíci

    Bro, How do i erite these in Godot Game engine?

  • @watercat1248
    @watercat1248 Před 7 měsíci +1

    This sounds like Cool tool
    What software are you using ?
    To be honest I don't think is something Wong with importing my blender 3D models in whatever egine I'm using.
    In fact I wish to be more stuff easily tranflable more then 3D model and image and sounds.
    For example when I make game in unity ther is not easy way to move my project for another engine yes I'm able to move my 3D models images and sound but all the other parts like sheders code ECT it's impossible or at least very hard to do for one software to the other

    • @Vercidium
      @Vercidium  Před 7 měsíci

      Thank you, I’m using OpenGL and C#. I use SkiaSharp and RichTextKit for UI and the animated code snippets
      For sure, there’s nothing wrong with using 3D models from Blender. I’ll use this approach for plants and terrain, but not more complex models like the player, enemies, buildings, etc
      Porting shaders is difficult for sure, every engine has a slightly different approach. Plus porting between GLSL and HLSL is a pain! There seem to be quite a few videos about porting shaders now, since people are trying engines other than Unity

    • @watercat1248
      @watercat1248 Před 7 měsíci +1

      @@Vercidium what I'm trying to say it's good thing those files is unified and when you making onese you able to use them in whatever software you want yes it need to export in different file type for some for example some it may support fbx and some other other files format but thach about it
      I wish to be more Software that give my the option to do that in more stuff then for example to be software that make the shader and then export from unity shader or unreal for example

  • @mike64_t
    @mike64_t Před 6 měsíci

    All nice and good until you need artist control. Yes, memory bandwidth is precious, but the moment you slapped that high res texture on top I started laughing because those precious few floats just got drowned in comparison - unless that texture is procedural too, in which case I would be impressed.

  • @sickomode6440
    @sickomode6440 Před 5 měsíci +2

    all these lines of code just for a player to completely ignore it.

  • @MrBalrogos
    @MrBalrogos Před 5 měsíci +1

    3:59 Netflix?

  • @noahdunbar
    @noahdunbar Před 7 měsíci +3

    3:55 proof that I'm a plant

    • @Vercidium
      @Vercidium  Před 7 měsíci +2

      I knew it reminded me of something!

  • @narrativeless404
    @narrativeless404 Před 4 měsíci

    Rockstar Games should be taking notes lmao