Shaders and 3D rendering have a very steep learning curve. There isn't a common or obvious way to build knowledge step by step, and it takes learning from multiple resources and examples. Shadertoy is one of the best resources with tons of cool demos with publicly available code. However, understanding this demo code can often be daunting. There are many techniques to grasp, and it's often difficult to understand what's happening in the code at first glance.
シェーダーと3Dレンダリングの学習は険しい道のりです。知識を体系的に積み上げる定番の方法はなく、多様な資料や例を参考に学ぶ必要があります。Shadertoyは最良のリソースの一つで、数多くの優れたデモがコード付きで公開されています。しかし、そのデモコードの理解は往々にして困難です。習得すべきテクニックが多岐にわたり、一見しただけではコードの動作を把握するのが難しいことも少なくありません。
On this page, we take one of the best classic demos by Inigo Quilez and try breaking it down step by step. This demo is more than 10 years old, but still is great for learning since it is very well structured and includes various techniques to improve the quality of rendering.
このページでは、Inigo Quilezによる古典的な名作デモの1つを取り上げ、段階的に解説していきます。このデモは10年以上前のものですが、よく構造化されている上に様々な技術が含まれているので、レンダリングの品質を上げるため技術を学ぶには今でもとても良い素材です。
To follow the discussions, you need to understand the basics of 3D rendering with ray marching. If you're unfamiliar with ray marching, the Projection and 3D Rendering プロジェクションと3Dレンダリング pages may be able to help.
このページで取り上げる内容を追うには、レイマーチングによる3Dレンダリングの基礎を理解している必要があります。レイマーチングに馴染みがない場合は、Projection and 3D Rendering プロジェクションと3Dレンダリングのページが参考になるかもしれません。
<aside> 💡
To make things worse for learners, many shader programmers prefer very abbreviated variable names and dense mathematical expressions (which is thought to improve performance). Compare the examples below. These two do the exact same thing.
学習者にとってさらに厄介なのは、多くのシェーダープログラマーが極端に簡略化された変数名や凝縮された数式を好むことです（これがパフォーマンス向上につながると考えられています）。下の例を比べてみましょう。これらは全く同じ処理を行っています。
Explicit and easy to follow but verbose
明示的で理解しやすいが冗長
vec3 lightDir = normalize(lightPosition - surfacePosition);
float intensity = max(dot(normal, lightDir), 0.0);
color += diffuseColor * intensity;
Compact, but hard to understand for learners
コンパクトだが、学習者にとっては理解が難しい
co += cd * max(dot(n, normalize(lp - sp)), 0.0);
</aside>
https://codepen.io/kynd/pen/dyxzyjV
デモ
Above is the demo ported to CodePen. The shader part is basically the same as the original, but I've made a few modifications:
上にあるのは、デモをCodePenに移植したものです。シェーダー部分は基本的にオリジナルと同じですが、いくつかの修正を加えています：