We've shown how an image texture can be applied to a model. However, these
sorts of mappings are only skin deep. If we carve away any part of the object,
the fact that a 2D texture is getting used is revealed. What we'd like is
something that's more like a real material. The solution is to create a 3D
texture that fills space. One way to define this texture is to actually create
something like a stack of images. Unfortunately 3D textures are not yet
available in WebGL. My guess is wait a year. Another method is to make a
function that takes in a point on a surface and gives back a color. If you
think about it, these are equivalent in intent. Using images also takes in a 3D
point and gives back a color. Each approach has its strengths and weaknesses.
Functions have an unlimited resolution compared to textures, but you also have
to be careful to filter their results. While I'm at it, I should mention you
can shade points on surfaces however you want with a fragment shader program.
Here's an example of animated procedural textures in use. These examples are 2D
functions. They don't fill space, but show how elaborate effects can be
computed on the fly in the fragment shader.
ここまでイメージテクスチャの適用法を見てきました
ただこれは表面だけで 途中でオブジェクトを切ると
2Dのようなテクスチャが出現します
もっと本物らしさを求める場合には
空間を埋める3Dテクスチャが必要になります
大量の画像を作るのも1つの手ですが
WebGLでは3Dテクスチャは
まだ利用可能ではありません
あと1年は無理でしょう
他には表面上の点を取り込み
色を返すことができる関数を作る方法があります
画像を使っても
3Dの点を取り込み色を返す点では同じです
どちらのやり方にも長所と短所があります
テクスチャと比べれば解像度の機能は無限ですが
結果をよく確認する必要があります
覚えていてほしいのは
フラグメントシェーダで
いくらでも影をつけられることです
これはプロシージャルテクスチャを使った動画の例です
この機能を使えば空間を埋めなくても
計算で複雑な効果を作り出せます