Jamie Wong writes step-by-step explainers on computer graphics, color and Bezier curves, plus essays on software work.
Commenters praise his build-from-nothing tutorials, such as Bezier curves and metaballs, and recommend his posts as beginner-friendly graphics material.
Someone else already mentioned the book of shaders (which is the single best introductory resource IMO) - aside from that, I've found that reverse-engineering existing shaders and reapplying the learnings to my own shaders has been very helpful. With time, you start developing an eye for which shaders are just one or two steps beyond your understanding. You'll also start noticing that certain users (such as @Shane) on the site are really good about commenting their code, while others treat it like a game of code golf.
When studying existing shaders, it's best to focus on the well-documented shaders that are a few steps beyond your current capabilities, rather than the ones that consist of hundreds of lines of single letter variables and incomprehensible math. As far as open source repositories go, it doesn't get much better than shadertoy (in terms of pedagogy) since you can easily tweak values and comment out pieces of code right there in the browser if you're trying to figure out what a certain line of code does. The in-browser editor makes reverse-engineering very efficient and reduces friction as much as possible, which is really helpful for this kind of dense mathematical code.
Once you get used to the whole process of reverse-engineering shaders, you'll quickly come to see shadertoy as the perfect place to learn how different visual effects and graphics techniques are achieved. I don't know of anywhere else on the web (except perhaps codepen) where you can so…
This program utilizes a powerful technique called raymarching, raytracing's big brother. Instead of tracing along each ray in tiny fragments and returning intersections, the ray is 'marched' in larger steps, vastly increasing render speed (the downfall of classical raytracers).
How do we 'march' rays without missing geometry? With the aid of signed distance functions, geometric equations which take an arbitrary point in 3space and evaluate to 0 if that point is on the 'shell' of the geometry. For example, the signed distance function for a sphere:
float sdfSphere(vec3 p, float r)
{
return length(p) - r;
}
This lets us do interesting things such as transform the point p to transform our object, take the minimum value of two spheres to produce a venn-diagram intersection shape, take the maximum of two spheres to 'cutout' a hole from one, etc. The logic is a bit backwards at first, but it clicks quite quickly and one can rapidly construct complex geometry without much optimization/shader magic. For example, this is a realtime capture of a 64k self-contained executable. No 3d models, no textures, no assets - just raymarching and math: [https://www.youtube.com/watch?v=ie4u2i_5OdE]
Approachable overview of raymarching & SDFs: [https://jamie-wong.com/2016/07/15/ray-marching-signed-distance-functions]
Learn more: [https://iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm]
Transparency about our interviewing process: http://bjk5.com/post/3340326040/in-any-language-you-want-khan-academy-interviews (which comes from the hiring cultures at Fog Creek and Google, see http://www.joelonsoftware.com/articles/GuerrillaInterviewing3.html).
Transparency about all past internships, their expectation and accomplishments:
http://bjk5.com/post/36067210182/khan-academy-internship-summer-12
http://bjk5.com/post/8826207372/khan-academy-internship-summer-11
http://bjk5.com/post/15500332273/khan-academy-internship-fall-11
Transparency from previous interns about their work, which I believe speaks for itself:
http://david-hu.com/2011/11/02/how-khan-academy-is-using-machine-learning-to-assess-student-mastery.html
http://dylanv.org/2012/09/14/the-khan-academy-internship-experience/
http://jamie-wong.com/2012/08/22/what-i-did-at-khan-academy/
If any piece of evidence from the above points to an organization that values quotas over excellence in interns and the work expected of them, well please raise the alarm.
We need to get past our default response being a knee jerk assumption of discrimination.
Author here -- I'm glad you like the post! There are more like you describe out there, though they tend to be scattered around the Internet.
https://jvns.ca/ often gets mentioned on HN and has a large volume of posts that follow the format "let's assume both you and I don't know anything - how do we figure this out?". http://jamie-wong.com/, a coworker, has a few good ones on graphics/numerical stuff.
Characterizing unique IDs with emojis instead of an abstract number was inspired by Tim Babb who has a good blog post on Kalman Filters: http://www.bzarg.com/p/how-a-kalman-filter-works-in-pictures/
Explaining a concept in person really helps, as you get immediate feedback if they look confused and it helps you figure out in what order you need to introduce concepts. In the case of this project, I was working on it alongside other people who were working their side projects. So I had the chance to explain what I was working on very frequently as we asked each other what we were up to, but I'm still learning to write this way intentionally.
I love bezier curves. In community-college, it was the first time I ever encountered a subject that made me want to go do more research on my own. One of my core memories is toiling away for multiple nights when the rest of the house was asleep on my 2015 Macbook Pro, writing janky p5.js code and pressing refresh on the browser page over and over until suddenly, I started see real, beautiful curves blossom from my control points.
I just went back to dig up some old sources[0], and I can't believe this post is almost a decade old now. This guy's explainers and animations were leagues beyond any other resource I could find through Google searc at the time.
[0] https://jamie-wong.com/post/bezier-curves/
Here are links to two of my favorite essays that make a similar point:
Java for Everything[1]
Too DRY[2]
And then there's a third, which is not quite the same topic, but still in the same vein. It's arguably even more relevant today than three years ago when it was written, especially given how much attention is being captured by ecosystems that attract folks who end up generating a morass of terrible tooling:
Helping my students overcome command-line bullshittery[3]
1. https://www.teamten.com/lawrence/writings/java-for-everything.html
2. http://jamie-wong.com/2013/07/12/grep-test/
3. http://pgbovine.net/command-line-bullshittery.htm