今回はテキスト3-3(079ページ～)のシェーディングについての実践を行う。環境光、拡散反射、鏡面反射、(テキストにはないが) 点光源、スポットライトを当てたときの見え方を調べる。
球形のオブジェクトに環境光と方向光を当てたときの見え方を確認する。球のそれぞれの位置の明るさは拡散反射で計算された値になる。
- Processingを起動する。
- 以下のコードをProcessingのエディタにコピー＆ペーストし、「ex13_1」という名前で保存する。
PVector rot = new PVector(-PI/6, 0, 0);
PVector lightDir = new PVector(1, 2, -3);
PShape sphere;
void setup() {
size(500, 500, P3D);
noStroke();
sphereDetail(64, 64); // 球の経度方向、緯度方向の分割数
}
void draw() {
background(0);
ambientLight(50, 50, 50); // 環境光
translate(width/2, height/2); // 原点を画面中心に移動
rotateX(rot.x); // 縦回転
rotateY(rot.y); // 横回転
directionalLight(128, 128, 128, lightDir.x, lightDir.y, lightDir.z);
sphere = createShape(SPHERE, 150); // 半径150の球
shape(sphere);
if (frameCount==1) {
save("data/画像1.png");
}
}
// ドラッグによる回転
void mouseDragged() {
rot.x -=(mouseY-pmouseY)*0.01;
rot.y +=(mouseX-pmouseX)*0.01;
}
- プログラムを実行する。
(図のように灰色の球が表示される。ドラッグして回転させると裏側の方が暗くなっていることがわかる)
(このページの説明画像は gif圧縮の特性のため疑似エッジが出ているが、実際の画面はもっと滑らかなグラデーションになる。以下の課題でも同様)
- プログラムを終了させ、上のメニューから「スケッチ」→「スケッチフォルダーを開く」を選び、出てきたウインドウで「data」をダブルクリックする。
すると、実行結果と同じ画像「画像1.png」ができているはず。ダブルクリックして開いてみると大きい画像で確認できる。
球面に鏡面反射の設定を加え、光沢が表示されるようにする。
- 以下のコードをProcessingのエディタにコピー＆ペーストし、「ex13_2」という名前で保存する。
PVector rot = new PVector(-PI/6, 0, 0);
PVector lightDir = new PVector(1, 2, -3);
PShape sphere;
void setup() {
size(500, 500, P3D);
noStroke();
sphereDetail(64, 64); // 球の経度方向、緯度方向の分割数
}
void draw() {
background(0);
float n=4.0+2.0*cos((frameCount-1)/50.0); // 2～6の範囲で変化させる
fill(255);
text(n, 10, 20);
ambientLight(50, 50, 50); // 環境光
translate(width/2, height/2); // 原点を画面中心に移動
rotateX(rot.x); // 縦回転
rotateY(rot.y); // 横回転
lightSpecular(255, 255, 255);
directionalLight(128, 128, 128, lightDir.x, lightDir.y, lightDir.z);
specular(128, 128, 128);
shininess(n); // 鏡面反射のパラメータの設定
sphere = createShape(SPHERE, 150); // 半径150の球
shape(sphere);
if (frameCount==1) {
save("data/画像2.png");
}
}
// ドラッグによる回転
void mouseDragged() {
rot.x -=(mouseY-pmouseY)*0.01;
rot.y +=(mouseX-pmouseX)*0.01;
}
- プログラムを実行する。
(左上に鏡面反射のパラメータ \(n\) の値が表示される。\(n\) が大きいほど光沢は小さく、\(n\) が小さいほど光沢が大きくなる)
(dataフォルダには、このプログラムを起動した瞬間の (\(n\) が 6 のときの) 実行画面の状態と同じ画像ができている)
方向光の強さを連続的に変化させ、見え方の変化を確認する。
- 「ファイル」→「名前をつけて保存」で「ex13_4」という名前で保存する。
- draw関数を以下のように書き換えて上書き保存してから実行する。
手前側は方向光が当たっているのでその強さに応じて明るさが変わるが、後ろ側は環境光の影響しかないので明るさは変わらない。
dataフォルダには、このプログラムを起動した瞬間の (方向光の明るさが最大のときの) 実行画面の状態と同じ画像ができている。
