pouët.net

Learning math concepts and shader languages for impatient people

category: code [glöplog]
 
Hey!
I'm hardly a coder, more of a mere musician within the scope of the demoscene. I'm also a pretty impatient person. The school in my country sucked, and we never learned much beyond basic algebra; but, I heard that the math that John Carmack used for id Tech was "high school level math", and whether this might be either a mere bluff or an earnest statement, it has nevertheless helped give me some confidence.

What are some of the most commonly used concepts in graphics programming? I heard that trigonometry, vectors and matrices, among others, are the most common ones, but I hardly have the time to look for a a definitively good resource. While all of the math has done well to scare me off before, it's about time that I vanquish these fears. Maybe turn them into passions on the way.

Additionally, what are the best places/guides to begin 3d programming? Engine, IDE, OpenGL, etc. I saw some Shadertoy stuff back in school, but the code seemed daunting, and I could hardly scrap together a rotozoomer from cloned code. :-(

P.S.: Some pointers for Assembly would be appreciated, but not mandatory. :-)
added on the 2025-02-02 22:18:01 by Psionikal Psionikal
the more math you know the easier it gets

https://www.youtube.com/@InigoQuilez is a good starting point to know more about maths and computer graphics.
added on the 2025-02-02 23:17:01 by psenough psenough
The idea is you begin and years and years later you get it. Also tip: use a set triangle, notebook and pencil to visualize concepts.
added on the 2025-02-03 00:46:06 by superplek superplek
So what do you want to do, what is your goal? You talk about math but then shaders, engines, APIs and IDEs followed by assembly? The math requirements range from "its all math" to "who needs math anyways". If you hardly have the time to look for a good resource and describe yourself as impatient then you really need to pick your battles, but also know that this stuff, like anything that's worth anything in life requires time and commitment, there's no way around it.
added on the 2025-02-03 02:56:09 by LJ LJ
You needed that many words to convey time+exp+will LJ? :) what are you, as stupid as maali?
added on the 2025-02-03 05:38:37 by superplek superplek
Quote:
If you hardly have the time to look for a good resource and describe yourself as impatient then you really need to pick your battles


Now I'm realising how poorly I've chosen my words with this post :D

Most of my impatience comes from the process of finding a resource, not so much reading through and trying to understand/digest the concepts (though there might be frustrations there too, I'm not discarding that).

Quote:
So what do you want to do, what is your goal? You talk about math but then shaders, engines, APIs and IDEs followed by assembly?


Well, I'd also like to learn how to apply the math, of course!
My end goal with this post is learning of some good resources to get started with learning whenever I have some good free time. Next Summer comes to mind. Although, it's dawning on me that perhaps Assembly might be too big a can of worms for one vacation season. :-)
added on the 2025-02-03 05:55:04 by Psionikal Psionikal
Khan Academy is great for learning math concepts at home.
Not sure what your starting point is exactly, but these two will likely last you for a while and contain mostly interesting stuff:
-https://www.khanacademy.org/math/precalculusPrecalculus
-https://www.khanacademy.org/math/linear-algebraLinear Algebra

These don't often cover what exactly they are useful for, but you'll get the relevant hits by searching the terms you learned with phrases like "shaders", "game development" and "graphics programming"
added on the 2025-02-03 07:02:18 by sauli sauli
there's two levels of math in fragment-based 4k intros;
"I want to be able to do CSG with existing distance functions" and "I want to compute distance functions from scratch myself". The former can be described as high-school level, the latter can escalate quite hard mathematically.

I recommend learning the former on shadertoy and using iq's articles on his website (linked by ps above). The latter requires a lot of knowledge on linear algebra and analysis, for true control it really helps to have some differential geometry ready.

Much of the relevant math construction is "combat calculations" as I call it; that's entirely a matter of practice or computer algebra tooling to get beyond the frustrating "1 error per line of the 3 pages solution, takes forever to get right" vibes you have when being at high scool level. Esp. lengthy calculations can be super frustrating if you're behind mechanically, so be sure to choose simple sdfs with detailed steps to the solution first, before attempting cubic beziers.

Some very well-known effects have also quite brutal math implications; reaction-diffusion patterns, fluids or clouds - or "the distance to complex plane fractals" for example. This does not mean that you need to know all of the implications to be able to write such an effect tho. Again, shadertoy is quite a neat collection of "the state of the art tricks", shortcuts to ideas how the problems can be solved. shane, iq or mla are skilled people with super useful shaders.

So really my answer is "do any math for 7 years and you're ready to construct complicated sdfs yourself". SDF modelling or writing a sphere tracer yourself does not require that kind of math tho. It's really easy.
added on the 2025-02-03 09:25:40 by NR4 NR4
also,

Quote:
You needed that many words to convey time+exp+will LJ? :) what are you, as stupid as maali?


wtf uncalled for hostility
added on the 2025-02-03 09:26:40 by NR4 NR4
Quote:
What are some of the most commonly used concepts in graphics programming?


  • Linear Algebra for figuring out vertex transformations, making a camera system, instancing of objects, making your own raytracer, and more.
  • Trigonometry for basic problems involving rotations or solving equations that come from simple constraints such as for example fitting a cone to a sphere.
  • Calculus for realistic shading effects such as mist or for simulating materials correctly.

So essentially it's many of the same things that would be important for non-software engineering too. Some of these things can even help you to make more efficient code, because you can eliminate operations on paper which a compiler might not be able to eliminate for you.

I think that what is more important than any of this though is an understanding of the numerical aspect of doing maths on a computer. I think that really understanding what a float is and what the hardware actually does with it is very important, because it helps you to avoid so-called "magic" constants that you're forced to add because you don't know why you're seeing artifacts all over your shadows or you don't know why your textbook quartic equation solver makes everything jitter around erratically. This also includes concepts such as infinity and the division of zero by zero, which are handled differently than they are in pure mathematics.

Somewhat less important and more advanced (in their application) but still useful, especially if you want to make something for oldschool platforms, is the manipulation of inequalities. What I mean by this is expressions which are similar to equations but with a less-than or greater-than sign instead of an equals sign. Being comfortable with those means you can determine tight bounds on the values being computed so you can figure out how much precision you have and you can use lookup tables without any runtime bounds checks. That helps a lot with performance and with memory usage too, and with image quality!
added on the 2025-02-03 12:58:02 by fizzer fizzer
There are constructivist learning theories that may apply.

In essence, they can be summarized in the observation: "When you discover something on your own, you form new neural pathways, leading to deeper understanding".

That's why whenever you have a problem (math or code related), I found it much better to think it through all by yourself, no matter how painful or slow that is. Only if you are stuck for too long (days), you can lookup ready to use formula.

Many people here went that path and they are now thinking they can give you quick shortcuts, but it's not really how they learned it.
added on the 2025-02-03 13:55:21 by tomkh tomkh
Quote:
also,

Quote:
You needed that many words to convey time+exp+will LJ? :) what are you, as stupid as maali?


wtf uncalled for hostility


oh we hate each other that's no secret and i have absolutely no respect for who he is as a person but even less for the jack shit he produced
added on the 2025-02-03 14:11:07 by superplek superplek
Quote:
oh we hate each other that's no secret and i have absolutely no respect for who he is as a person but even less for the jack shit he produced

LJ is the de-facto state of the art of code and graphics in pc4k scene. you obviously don't like him at all, which is fine, but your childish insult to his work doesn't really make any sense objectively, so you might as well cut it
added on the 2025-02-03 14:37:38 by NR4 NR4
Learn how to read. I love LJ. This is about Maali being a waste of oxygen.
added on the 2025-02-03 14:42:35 by superplek superplek
Not only "de-facto", since he keeps being voted number 1.
added on the 2025-02-03 14:46:37 by fizzer fizzer
Quote:
I'm hardly a coder..I'm also a pretty impatient person

Me too ! So maybe that will make my advice worthier.

I also wanted to learn shader coding and I did learn a lot reading this website : https://thebookofshaders.com. There are probably great videos introductions on youtube but if like me you prefer to read then you'll love it. It's interactive and already translated in different languages.
I have completed the full course , now that doesn't make me a shader coder , but it definitely helped understand a lot about this kind of stuff.
So yes that would also be my advice dedicate some time to at least try to understand you might not get everything at first but it will get clearer.

If you're not a coder I don't think the engine, IDE and stuff like that will matter for instance just try to put some things together straightforwardly and quickly. There 's lot of good options to do so : p5.js or Processing later you can check things like threeJS or babylon if you're into JS (i personally enjoy Playcanvas).




Quote:
oh we hate each other that's no secret and i have absolutely no respect for who he is as a person but even less for the jack shit he produced


Wohoo scene drama..love it :)..Let me grab my popcorn
added on the 2025-02-03 15:02:49 by Shantee Shantee
No drama. Just a stern reminder that he's a sickly fat nobody.
added on the 2025-02-03 15:05:37 by superplek superplek
No drama, just superplek ruining another promising start of a thread by acting like an ass.
added on the 2025-02-03 18:27:28 by sauli sauli
And you're known for what was it again, your 'penis'? ;)
added on the 2025-02-03 21:41:15 by superplek superplek
I don't dwell in mistakes of the past, but try not to repeat them... or make new mistakes by randomly bullying people in pouet and turning every newbie-asking-for-help-thread into "random hostile comments"-shitshows.
added on the 2025-02-03 21:54:14 by sauli sauli
Let's be men and honour the fallen soldier. Later on I'll tap you on your shoulder so we can both do a spread eagle pose on a 1985 Toyota.
added on the 2025-02-03 21:57:38 by superplek superplek
Quote:
so we can both do a spread eagle pose on a 1985 Toyota.

I search for "spread eagle pose" and that is what I got, is that it ?

https://assets.clip-studio.com/en-us/detail?id=1912965
Why would you do that exactly ?
added on the 2025-02-03 23:35:51 by Shantee Shantee
Psionikal, start with the links here, but you can also ideate and discover concepts in terms that you are more familiar with using some AI thingies like Sonnet, Perplexity, CoPilot, ... these things are pretty descent when you don't know the name of what you are after or trying to learn. Then of course, have fun in ShaderToy, PoshBrolly, ...
added on the 2025-02-03 23:40:38 by p01 p01

login