Rendering 2D objects - Software from scratch

[@abdul4515]

Making a context to make a context is peak OpenGL

[@scoffpickle9655]

> Drops 2 videos > Refuses to elaborate Fucking legend, mate

[@TheeSirRandom]

???

[@IGoByLotsOfNames]

underrated channel

[@S0meGuy_]

Lots of names, when new gtnh run???

[@ArThur_hara]

You... Here?

[@bingusbongus9807]

making open gl in minecraft when?

[@happyjohn1656]

Hi

[@the_real_briel]

I'm glad I'm not the only one that spent days trying to create an opengl context without libraries lol

[@woop1418]

the pastebin with the music AND timestamps it plays at is one of the most thoughtful things i've seen in a video description, most people don't even have a music list in the description much less a time stamped one! instant sub ❤❤❤❤

[@filipmilovanovic8942]

Loved the video (and the footnotes!), entertaining and educational. Wanted to share a few things: what you came up for the antialiasing of your procedural shapes (circle, squircle) is essentially what's called a Signed Distance Field (SDF) - you can find info on these online. They allow for all kinds of neat effects - by changing where the 0-point (surface) is, you can grow or shrink your shapes, or even merge them together dynamically if you have more than one on the same quad (think metaballs). Also, if the vertices on your quad already include UV coordinates (and if you're not doing your texture atlas thing), you can make use of those when defining your sphere, to find the center and to define a radius as a percentage of the quad's width (and avoid passing extra info with each vertex).

[@MissNorington]

1:09:39 If you'll think with texture coordinates in mind, 0.5 is the center of the axis, and also the radius. That is if the texture coordinates sent into the fragment shader are between 0 and 1. This allows you to do ellipses by just outputting your rectangles, even rotated ones

[@SimGunther]

When you realize drawing a circle using 20+ triangles gets super silly and have to resort to a transparent square that has a circle in it, you will finally be enlightened in graphics programming.

[@bingusbongus9807]

why not transparent triangle huh? ever thought about that one silly head?

[@_LightBlue7]

He has come back with more C madness

[@ferenccseh4037]

*About transparency and call rendering order:* From what I understand using game engines and being a nerd on the internet, having a separate render pass for transparent objects after the opaque objects is fairly standard. It often means that you need to specify ahead of time if an object will be transparent or opaque which can be annoying and it might break if you make a transparent object actually opaque ir almost opaque... It's kinda weird lol *About the center of a circle:* There is definitely a way to pass global uniforms to the shaders, however I don't know off the top of my head how. I'm guessing it needs a separate buffer. *Circle Anti-Aliasing:* I see you used the distance formula. If you were able to avoid using sqrt once, you might be able to do it again! (since it's quite expensive) The formula "-(x*x+y*y-r*r)/blur" works for me. Blur in this case should be roughly the same as r for the results to be noticeable but not too intense. This also works for the squircle, but the blur becomes significantly larger, and I don't know based on what exactly....

[@Kocursnezny]

Never thought i would see myself watching an almost 2 hour video on opengl, i love this

[@triq0]

please never in a million years delete your channel, when i have kids i will show them this video and we will make video games together

[@strootje]

Love this stuff. Brings me back to school era programming ❤

[@sarcasmenul]

I still dont understand anything that happens in these but i still watch.

[@ferenccseh4037]

The more you watch the more you understand :)

[@XanthumS]

even getting familiar with it is a plus

[@IndigoTeddy]

Discovered the 1st vid thanks to the YT algorithm, and I'm currently glad I subbed to this channel b/c this vid is just as good. I hope when and if you add in Vulkan graphics or move onto Linux graphics backends (X11 and/or Wayland), that it isn't as cruel to you as Win32 has been so far (lol).

[@white_145]

Truly an amazing adventure of struggle, exploration and learning

[@a.j.outlaster1222]

We need more people like you, KZbin videos and beyond will be more beneficial to ALL with powers like yours!

[@co4160]

this video was awesome, I never seen a video so long that has been able to still be interesting in all moments.

[@DefaultFlame]

Rewatched the previous vid to get back up to speed and now its time to watch the newly dropped one. Edit: Finally finished watching this beast of a video. Great stuff!

[@mrkostya008]

my favorite youtuber has just dropped a new vid

[@whoman0385]

absolute cinema

[@gavinbowers137]

This is some of the best programming content on KZbin. Keep it up!

[@tamirhadash8648]

i love the aspect ratio

[@Yowax]

About the circle rendering: - Usually circles are rendered as quads with UVs and all the center calculations are done taking (0.5, 0.5) from the UVs as the center instead of adding a center to the vertex data. That way the radius is defined directly by the size of the quad that you're rendering. - If you don't want to use UVs, you should probably pass vRad and vCen as uniforms instead of vertex data unless you're doing vertex caching. Although if you're doing vertex caching you should probably use the first method. - Also if you make alpha=0 you should probably use the keyword "discard" in the fragment shader, that way it doesn't try to do any blending with the pixels already rendered and just discards it.

[@Stardust-x2i]

with my friend we did something like this, writing our rendering 2D objects out of spite, the things that are different is, it is in C++, we made lots of interfaces and classes, being able to read a bmp file and writing it in the screen, the truly mayor difference is it was in console, not application, well the paradigm we use is truly the biggest difference but technology talking, the console is

[@Iffythegreat]

Favourite new KZbinr frrrr

[@Nuwa-6X]

haven't been this happy to see a new youtube upload in a long while

[@MediumRare_1]

For 1:09:55 instead of describing the center for every vertex you can use gl_VertexID and depending on the id % 4 you can find what corner your at then you can do some math to find the center. not the cleanest method but saves you a lot of memory and reduces the amount of data you need to send to the gpu.

[@MediumRare_1]

im not a opengl wizard so i might be wrong about this

[@MediumRare_1]

Also best (maybe not) way is to just use instancing and have one quad/square, transform it in the shader based of another buffer describing the position, dimension, and rotation and now you have just one quad and a smaller buffer containing the attributes of the whole rectangle each to send to the gpu.

[@MediumRare_1]

Its 1am rn and me looking at this a minute later. I can tell i need to go to bed.

[@emptycode1782]

@@MediumRare_1 lol

[@AntDudette]

you're literally my favorite programming youtuber, keep this shit up

[@fading-sun-studios]

did i understand anything ? nope was it fun ? hell yeah!

[@OfflineOffie]

A quick tip for rendering rounded rectangles is to just elongate a circle! A formula to render a rounded rectangle would look something like this: float r = .1; vec2 scale = vec2( .4, .2 ); float roundRect = step( length( max( abs( uv ) - ( scale - r ), 0. )), r ); The UV variable would be your 2D coordinate system / position, with the center of the shape being at 0,0. To have anti-aliasing, instead of step(), you could use smoothstep() with a small epsilon added and subtracted from the radius (r) to have a small gradient around the edges of the shape. A good resource for learning how to create various 2D and 3D shapes with shaders is Inigo Quilez's blog where they have a large collection of Signed Distance Field (SDF) formulas.

[@KyleeYay]

Finally, something to watch while I'm in the shower

[@justanannoyingcat1546]

I subscribed looking forward to the next video in like a year, yet here it is already :D Amazing stuff

[@boycefenn]

for some reason i cant give your video more than one like! this is an injustice!

[@luismiguelsanchezvite8662]

He's back!!! 🗣️🔥🗣️🔥🗣️🔥

[@KyleeYay]

1:23:23 You should probably look into SDFs, I think there are more ways to more efficiently render these complex shapes. Also, smoothstep. It's like dubstep, but smooth.

[@tamirhadash8648]

i love your vid, this series is amazing continue with it

[@HakanaiVR]

18:40 If you think working with the IMM is bad because of crappy docs, you should try writing an actual IME. Then we have: - the plural of "vertex" is "vertices", like how the plural of "index" is "indices" - the past tense of "bind" is "bound" - speaking of shaders, there are also geometry shaders which can synthesize new points out of nowhere, which can change how one thinks of rectangles - not sure whether there are performance benefits but instead of sqrt(a*a, b*b) you should generally use hypot(a, b) to avoid rounding quirks - sdRoundedBox?

[@zxuiji]

1:09:50 should be using a triangle fan for that, define the type as something like this: struct mugCircle { uint triangles; float circle, radius; mugPoint center; } The circle parameter tells you wether to draw the triangles in a full 360 degrees, 180 (semi-circles), 90 degrees(curved triangle) or other variants of a circular drawing from 1 side to the other. index 0 will always be the center point, the rest you simply generate as needed.

[@Free_kitty0]

OMG YESS I'VE BEEN WAITING FOR THIS!! HI!

[@Speykious]

Wow. I didn't know about texture arrays! That's something I'll recall next time I do rendering code again.

[@skew5386]

this series rules

[@minirop]

at 56:54 you almost aligned the single white pixel with the dead pixel on my screen.

[@car_dot110]

He's back

[@valshaped]

The power of signed distance functions!!!

[@pongotv22]

i really like these videos

[@turtleDev32]

26:57 Muukid green

[@smushy64]

you can just cast PROC to void* or any other poiinter you need. I think the compiler might change that cast to a memcpy anyway but you don't need to explicitly call memcpy on a pointer just to cast

[@nuhuhuhuhuhuhuhuh-f6q]

the c99 spec never guarantees that a void* is big enough to store any function pointer so the compiler should warn on any cast that casts away a type of a function pointer, because its undefined behaviour

[@ivanmoren3643]

Sure for implicit casting, but explicit casting usually is totally under the radar of compiler warnings (which is a main reason it is adviced against in the common case) void *x = (void *)get_me_a_proc_address()

[@sajidAli-sz4kn]

You are crazy bro

[@manucaouette]

31:36 there's apps (even on Windows) that support a semi-translucent background, I remember you can set it in Electron and it works, tho dragging a transparent window used to be very laggy for some reason (on Windows)

[@a.j.outlaster1222]

I saw "Graphiks" and was wondering if it was a special named brand or fun spelling, I saw "Younits" and knew it was for fun! 😂

[@thinkwave7801]

i can't believe youtube gatekept this from me for 11 hours.

[@butterflytr3077]

Wouldn't making the rounded rectangle be easier if the rectangles you made were h-r tall and w-r wide (h and w for the height and width of the middle point of the rounded rectangle and r for the radius of the circle) so that you could make the checks for the circles easier by checking which corner a circle is in, then doing the circle smoothing algorithm for a tighter set of coordinates, like limiting the x and y to be positive relative to the circle center for the top right part of the rounded rectangle

[@butterflytr3077]

I might have not watched enough through the video so I probably just said what you had already done so Im sorry for that lol

[@zxuiji]

11:51 data pointers and function pointers can be of different sizes so it's best to at; least cast it to (void (*f)(void)) and return that instead. A typedef usually helps with that. Also a union is a better way of switching types than memcpy when you only need to return the value as a different type.

[@Haystees]

muCOSA part 2 electric boogaloo

[@proton..]

HELL YEAH

[@realgerasiov]

45:20 This is just me being petty, sorry, but plural for vertex is vertices

[@vfox32]

Also he said indexes multiple times but it's actually indicies

[@maybetomorrow-e6r]

Research revealed that index plural can be indices or indexes. Also, vertex can be vertices and less used vertexes. Sometimes the use determines which. Grammar’s my thing. Can’t imagine tackling muukid’s presentation.

[@turtleDev32]

6:03 Thick of it

[@Meghanbayport]

muukid more like muu deng! Also frist

[@era2755]

OpenGL is technically not cross platform since Apple deprecated it on all its platforms years ago.

[@MuteObserver]

Fantastic channel!

[@realgerasiov]

15:11 AFAIK touchpads support scrolling on the x axis, but the code seems to be made just for the y. Am I missing something?

[@sillygaby_]

muukid my goat :3

[@egormatuk3786]

About the squircles, does the algorith really work properly? The radius of a squircle does change along its perimeter, so i feel like when you got to sharper squircles they would look less smooth near the corners.

[@dealloc]

1:15 - Bit of a correction on the subject; Graphics APIs and (high-level) shading languages are not implemented by GPU manufactureres, but rather at system level, for example by OS providers like Windows and macOS, or through user-land libraries like Mesa on Linux. The libraries implements support for various GPU device drivers, which facilitates the communication between the hardware and library. I understand why that could've been missed since it's usually invisible, other than you have to link your program against specific library files or framework.

[@dealloc]

As an addendum, there are also translation layers which provides support for various graphics APIs that otherwise don't have direct support. For example Apple's implementation of Direct3D through their own graphics API, Metal, and DXVK which is a Vulkan-based translation layer for Direct3D that supports Linux and Wine-based environments.

[@lisspryciarz]

i once had to use glut to make a pong game with its miserable ass documentation i feel you bro

[@zgglmc]

lets go

[@nikitawew6087]

vulkan is almost 8 years old so i think its hard to find machine that does not support it. tell me if im wrong

[@IndigoTeddy]

Some ppl have computers older than 20 years, so it's not impossible, but yeah, Vulkan should be the next thing to implement (unless MuuKid wants to try out X11 and/or Wayland for Linux in the next vid).

[@stefanalecu9532]

Technically speaking, as long as your driver supports it, your GPU should be capable. In practice, it is a bit more complicated, and to have it not run like shit you need to support OpenGL 4.x. With current Mesa and overall driver support, the oldest you're going to get is the GT 630 era aka Kepler on Nvidia and GCN 1.0 (so like your HD 7000s) on the AMD side. To my knowledge, on the Intel side the earliest you're going to get is HD 6000 (so 5th gen and up), but I wouldn't be surprised if HD 4000s also supported Vulkan. From what I've researched, OpenGL 4.x (or OpenGL ES 3.1) support roughly means supporting Vulkan is possible because the actual magic is compute shaders. If you're working with low-end mobile GPUs, it is TECHNICALLY possible to get away with supporting Direct3D 9 and also have barely enough features to support Wayland half-assedly, but it's not relevant to this project so far as it's focused only on desktops. So your answer is: essentially, CPUs and GPUs that are vaguely older than 2010-2012. You can assume most people run a system that's newer than that or have drivers that COULD support Vulkan in one way or another (especially on the Linux Mesa side), but otherwise no shot.

[@juliapaci]

1:05:50 how do you only use one shader program to render multiple shapes? ive resorted to keeping a byte in a vertex attribute to define which shape it is (e.g. 0 is point, 1 is triangle, 2 is rectangle, 3 is circle, etc.) so i wouldnt have to bind different programs for each shape or god forbid new buffers (it also allows for easy batch rendering). did you take this approach or did you use a different method?

[@juliapaci]

oh never mind i see on the git repo that you use different shader programs

[@Daksh8085_]

Where’s the code already? Anyway, this video is awesome!

[@liseklucian]

Yay

[@liseklucian]

Actually still crazy

[@literallynull]

This is amazing, can you do video on SDL library next?

[@iggienator]

I have been through a similar process using MonoGame about a year ago. I was fascinated by SDF shaders and fell into a rabbit hole of confusion. It doesn't help that it is not so simple to see the shaders values during runtime.

[@stefanalecu9532]

Just so you know, Unlicense is actually a really, really bad public domain license that doesn't hold up to many legislations. A better choice would be either MIT-No-Attribution (which would work in your case), 0BSD or CC-0 (my personal favorite, I find it to be the most universally valid public domain license).

[@stefanalecu9532]

Also, it is perfectly valid to just license that single gl.xml file under Apache, as long as it is clearly separated from your other source files within the license disclaimer (as you've done so). You could consider your repo as dual licensed under MIT and Apache, but that's really stretching it. Also, I find it really weird that you have it both as MIT and as public domain. MIT is more legally binding than PD, for obvious reasons such as having to keep the copyright header on every file and attribution in general. You might as well license everything under PD (using CC0, 0BSD etc.) and be safe. If someone wants to sidestep your MIT license, they can just choose Unlicense (poor choice of license) and then your MIT is worthless. Or just put it all under MIT/BSD, as it's the most permissive license you can get away with without being obscure or CC0 or some variant of those aforementioned licenses.

[@OsamaAlkurdi-m4j]

How you get all this knowledge What is the books you recommend

[@ferenccseh4037]

Imo watching videos like this and trying to do it yourself is better than any books. But that's just me

[@OsamaAlkurdi-m4j]

I think you are right

[@averydee5328]

Did you consider WebGPU?

[@JoshuaDbener]

Instead of cramming so much repeated data onto every vertex have you considered using uniforms instead? Also have you looked into some of the well known signed distance functions? That's basically what you're creating and I know rounding shapes is very easy with SDFs!

[@vuxeim]

lesss go

[@gmhs2]

YIPPIE! MORE C

[@thepaulcraft957]

couldn't you have used triangle strips to render rectangles?

[@FelipeCotti]

Shaders being called shaders is one of the biggest screw-ups in the history of computer science. No, I hate this so much it should rank high in screw-ups of *all* science. It's impossible not to keep thinking shaders are to make shadows. "No, it's to do all sorts of thin-" THEN WHY IS IT SHADER

[@crino_enjoyer]

Chad

[@mogusugom]

do i hear 2kki music at 31:29 its this for anyone wondering kzbin.info/www/bejne/p3i0fIenjKesjMk very nice

[@zgglmc]

what do you use to make these videos

[@atom1kcreeper605]

18:45 vst3_sdk ........... . . . .

[@polybay]

using yume nikki fangame music in the video is based

[@gonderage]

There's significantly less of le funny editing in this second video. I kind of enjoy it, like, I don't need the zoomer brainrot to stay engaged, because this is peak programming content; it doesn't need funny editing to be entertaining to watch.

[@MissNorington]

Hi. You are writing a cross platform engine I believe? I have been watching 20 minutes so far and all I see is Win32 stuff. Don't get me wrong, I have programmed Win32 for 25 years, I know the pain, but right now I am trying to install Linux and I am stuck with the "apt-get install" command and 300 lines of text to manually type without any typo. How about doing OpenGL for Linux first, and then port it to Win32? That would solve the design problems of Win32 since Linux fixed those?

[@egormatuk3786]

Does bro have a square screen?

[@ngspace9829]

Will the API ever be released publicly?

[@ferenccseh4037]

I think it already is

[@tpexyungz]

I love you

[@10bokaj]

enterface

[@arushford]

yes but why the hell is your resolution so terrible?

[@dj_4point084]

I know they're both right, but hearing it as vertexes and not vertices really bothers my brain.

[@bingusbongus9807]

how the hell do all the games use opengl if theres no documentation on how to even start it

[@stopmotionadventures4812]

14 minutes ago

[@Wittbore]

1 hour? the pfp doesnt not match that

[@ozu7779]

bro just use linux 😭