Light and 2D Graphics 光と2Dグラフィックス

Since the page on 3D graphics was very theoretical, this page is more casual and presents some ideas for applying simplified properties of light to graphics.

3Dグラフィックのページが非常に理論的だったので、このページではもっとカジュアルに光の性質を単純化して2Dグラフィックスに応用するアイデアをいくつか紹介します。

2D Shadow

2次元の影

This demo is a two-dimensional application of the ray-marching technique. You can check whether a location is in shadow by extending a line from that point to a light source and seeing if the line hits another object. Lighting in Flatland may look like this.

このデモはレイマーチングの手法を2次元に応用したものです。ある場所が影になっているかはその点から光源に向けて線を伸ばし、線が他の物体にぶつかるかどうかで調べることができます。フラットランドの照明はきっとこんなふうに見えるのではないでしょうか。

You can check whether a location is in shadow by extending a line from that point to a light source and seeing if the line hits another object.

Reflection

反射

This is the same demo seen on the Reflection and Refraction page, but without erasing the trails of the light.

これは反射と屈折のページで見たデモと同じものですが、光の軌跡を消さずに残すようにしました。

Refraction

屈折

The demonstration below uses Fresnel’s equation to magnify polka dots only within a square. That’s all there is to it, but don’t you see a transparent cube moving? The human brain seems to recognize space from the slightest hint. This is not a physically accurate rendering because it ignores the sides of the cube and many other things, but sometimes it is better to simplify drastically for graphic effect.

下のデモはフレネルの式を使って正方形の中だけ水玉模様を拡大しています。ただそれだけなのですが、透明な立方体が動いているように見えてこないでしょうか。人間の脳はちょっとしたヒントから空間を認識してしまうようです。立方体の側面を無視しているので物理的に正確なレンダリングではないのですが、グラフィックの効果としては思い切って単純化した方が良いこともあります。

Normal map

法線マップ

When lighting an object, its brightness is largely affected by the direction of its surface (normal) and the direction of the light source. Conversely, if you have these two factors, it is possible to create a reasonably three-dimensional look. The demo below creates only the normal direction on a plane (in the normal function) without creating any 3D model, then applies Lambertian reflections. Since no shadows are drawn, the result looks a little like trick art with a mysterious floating sensation. The method of having normal data on a plane is also used in games to create complex expressions with a small number of polygons.

物体に照明を当てる時の明るさは、その表面の向き（法線）と光源の向きに大きく左右されます。逆に言えば、これら2つがあれば、それなりに立体感のある表現をすることができます。下のデモでは、3Dモデルなしに法線の向きだけを平面上に作り出して（normal関数）、そこにランバート反射だけを適用しています。影を描いていないため、不思議な浮遊感のあるトリックアートのような雰囲気になっています。平面に法線のデータを持たせる手法は、ゲームなどで少ないポリゴン数で複雑な表情を作りたい時にも使われています。

This image is a zoomed-in version of an image exported for a book cover. The technique above was used to add the minuscule thickness of the paint.

この画像は本の表紙のために書き出した画像を拡大したものです。絵の具の極僅かな厚みを表現するために上記の手法が使用されています。