Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Shaders: How to draw high fidelity graphics with just x and y coordinates

makingsoftware.com

Post reply on HN
Print view View original

61–70 of 93 posts

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#61

Post by sinker »

dahart wrote: post #20

Just absolutely beautiful execution, and this is a metric ton of work. I love the diagrams and the scrollbar and the style in general. There are a few tiny conceptual things that maybe could smooth out and improve the story. I’m a fan of keeping writing for newcomers simple and accessible and not getting lost in details trying to be a Wikipedia on the subject, so I don’t know how much it matters, take these as notes…

The entire website is incredible. I'm amazed all the illustrations were done in Figma.

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#62

Post by sinker »

helboi4 wrote: post #9

Does anyone have any resources for learning how to do very beautiful clean technical drawings like this? I have some art skill but not the kind that translates to such clean technical drawings with this nice personality. Would love to be able to make some for my own projects.

From the home page:

Question: How do you make the illustrations?

Answer:

I get asked this more than anything else but honestly, I don't have a good answer.

I make them by hand, in Figma. There's no secret - it's as complicated as it looks.

The Advanced Edition of the book will include a tutorial explaining how I make them, where I get references and inspiration from.

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#64

Post by akomtu »

GuB-42 wrote: post #16

That, I think, is the most unintuitive part about writing fragment shaders. The idea that you take a couple of coordinates and output a color. Compared to traditional drawing, as with a pen and paper, you have to think in reverse. For example if you want to draw a square with a pen, you put your pen where the square is, draw the outlines, than fill it up, with a shader, for each pixel, you look at where you are, calc…

It actually works the way you are describing it: vertex shader defines the boundaries of things to draw, and its fragment shader fills in the boundaries. For example, if you want to draw 1 billion ellipses, your vertex shader would enumerate 1 billion rectangles where those ellipses are to be drawn, and the fragment shader will fill only the necessary portion of those rectangles. But sometimes, for educational purposes, people omit the vertex shader and the fragment shader fills in the entire screen.

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#65

Post by 3836293648 »

kasool wrote: post #24
socalgal2 wrote: post #19

Nice article, though the diagram showing [OpenGL] [WebGL] [WebGPU] being built on Vulkan and then from Vulkan to D3D12 and Metal is wrong. WebGL and WebGPU go directly to D3D and Metal, they do not go through Vulkan first Also, Vulkan is labeled as Open Source. It is not open source. The are other mistakes in that area as well. It claims WebGPU is limited to Browsers. It is, not. WebGPU is available as both a C++ (Da…

To elaborate on this, Vulkan is an open _standard_ whose many implementations (user mode driver) may or may not be open source. Vulkan is just a header file, it's up to the various independent hardware vendors (IHVs) to implement it for their platform. Also a small correction: Vulkan actually _does_ run Apple platforms (via Vulkan-to-Metal translation) using MoltenVK and the new KosmicKrisp driver, and it works quite…

Vulkan also runs on Apple Silicon without translation on linux

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#66

Post by tel »

kaoD wrote: post #11
immibis wrote: post #2

You can do some pretty impressive things: https://shadertoy.com/ I skimmed it but didn't see any mention of "ray marching", which is raytracing done in a shader. GPUs are pretty fast now. You can just do that. However you do have to encode the scene geometry analytically in the shader - if you try to raytrace a big bag of triangles, it's still too slow. There's more info on this and other techniques at https://iquile…

Nitpick: "raymarching" is not "raytracing done in a shader" and it's not polygon-based. Raymarching is a raytracing technique that takes advantage of Signed Distance Functions to have a minimum bound on the ray's distance to complex surfaces, letting you march rays by discrete amounts using this distance[0]. If the distance is still large after a set number of steps the ray is assumed to have escaped the scene. This…

SDFs still scale by geometry complexity, though. It costs instructions to evaluate each SDF component. You could still use something like BvH (or Matt Keeter’s interval arithmetic trick) to speed things up.

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#69

Post by kasool »

Karliss wrote: post #49
GuB-42 wrote: post #16

That, I think, is the most unintuitive part about writing fragment shaders. The idea that you take a couple of coordinates and output a color. Compared to traditional drawing, as with a pen and paper, you have to think in reverse. For example if you want to draw a square with a pen, you put your pen where the square is, draw the outlines, than fill it up, with a shader, for each pixel, you look at where you are, calc…

I'd say the unintuive part is mostly a problem only if you abuse fragment shaders for something they weren't meant to be used for. All the fancy drawings that people make on shadertoy are cool tricks but you would very rarely do something like that in any practical use case. Fragment shaders weren't meant to be used for making arbitrary drawings that's why you have high level graphic APIs and content creation softwar…

Yeah, I work professionally as a gpu/graphics programmer and even I have trouble sometimes wrapping my head around some of the fancy shadertoy one-liners. Most of the stuff I work with is conceptually much more simple. The math if any is all generally really straightforward and derived from a handful of commonly used algorithms or PBR models. The more common work is performance tuning and scaling across multiple architectures/platforms. You might run into this stuff more if working with SDFs though.

Re: Shaders: How to draw high fidelity graphics with just x and y coordinates

#70

Post by [deleted] »

dahart wrote: post #56
Kiro wrote: post #50

Earlier quoted context omitted.

While (I presume) technically correct I don't think your clarifications are helpful for someone trying to understand shaders. The only thing that made me understand (fragment) shaders was something similar to the parent's explanation. Do you have anything better? It's not about the correct way to draw a square or a line but using something simple to illustrate the difference. How would you make a shader drawing a 10x…

You’re asking a strange question that doesn’t get at why shaders exist. If you actually want to understand them, you must understand the bigger picture of how they fit into the pipeline, and what they are designed to do. You can do line drawing on a CPU or GPU, and you don’t need to reach for shaders to do that. Shaders are not necessarily the right tool for that job, which is why comparing shaders to pen drawing mak…

[deleted]
Post reply on HN