第13回 レンダリング

今回はテキスト3-3(079ページ~)のシェーディングについての実践を行う。環境光、拡散反射、鏡面反射、(テキストにはないが) 点光源、スポットライトを当てたときの見え方を調べる。

課題 1 (環境光+方向光)

球形のオブジェクトに環境光と方向光を当てたときの見え方を確認する。球のそれぞれの位置の明るさは拡散反射で計算された値になる。
  1. Processingを起動する。
  2. 以下のコードを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;
    }

  3. プログラムを実行する。
    (図のように灰色の球が表示される。ドラッグして回転させると裏側の方が暗くなっていることがわかる)
    (このページの説明画像は gif圧縮の特性のため疑似エッジが出ているが、実際の画面はもっと滑らかなグラデーションになる。以下の課題でも同様)


  4. プログラムを終了させ、上のメニューから「スケッチ」→「スケッチフォルダーを開く」を選び、出てきたウインドウで「data」をダブルクリックする。
    すると、実行結果と同じ画像「画像1.png」ができているはず。ダブルクリックして開いてみると大きい画像で確認できる。

課題 2 (鏡面反射)

球面に鏡面反射の設定を加え、光沢が表示されるようにする。
  1. 以下のコードを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;
    }

  2. プログラムを実行する。
    (左上に鏡面反射のパラメータ \(n\) の値が表示される。\(n\) が大きいほど光沢は小さく、\(n\) が小さいほど光沢が大きくなる)
    (dataフォルダには、このプログラムを起動した瞬間の (\(n\) が 6 のときの) 実行画面の状態と同じ画像ができている)

課題 3 (テクスチャ)

球面にテクスチャを貼り付けて表示させる。
  1. Processingのエディタを閉じる。
  2. 課題1で作った「ex13_1」を開く。
  3. 「ファイル」→「名前を付けて保存」で「ex13_3」という名前で保存する。
  4. 適当に検索して画像をダウンロードし、それをProcessingのエディタにドラッグ&ドロップする。
    ((画像はどのようなものでもよいが) このとき「正距円筒図法」で検索すれば以下の例の地球のような画像がみつかる)
  5. 先頭からdraw関数までのコードを以下のように書き換えて上書き保存してから実行する。 (変わるのは赤枠のところだけ。10行目の部分は自分の画像のファイル名に合わせる)


    球面にテクスチャが貼られた状態になる。
    dataフォルダには、このプログラムを起動した瞬間の (回転させる前の) 実行画面の状態と同じ画像ができている。

課題 4 (方向光の強さ変更)

方向光の強さを連続的に変化させ、見え方の変化を確認する。
  1. 「ファイル」→「名前をつけて保存」で「ex13_4」という名前で保存する。
  2. draw関数を以下のように書き換えて上書き保存してから実行する。


    手前側は方向光が当たっているのでその強さに応じて明るさが変わるが、後ろ側は環境光の影響しかないので明るさは変わらない。
    dataフォルダには、このプログラムを起動した瞬間の (方向光の明るさが最大のときの) 実行画面の状態と同じ画像ができている。

課題 5 (点光源)

点光源を当てたときの見え方を確認する。
  1. 「ファイル」→「名前をつけて保存」で「ex13_5」という名前で保存する。
  2. draw関数を以下のように書き換えて上書き保存してから実行する。
    (変わるのは赤枠のところだけ)
    (方向光のかわりに点光源を使うので、23行目はdirectionalLightからpointLightに変わる)
    (点光源は原点から180~220の距離を移動する。球の直径が150なので、その表面からの距離は30~70になる)
    (点光源の位置がわかるように、27~28行目で点光源の位置に小さい球を表示させている。これがなくても光源は機能する)


    光源の近くの狭い範囲だけが照らされた状態になる。ドラッグすれば (光源ごと) 球を回転させて見られる。
    dataフォルダには、このプログラムを起動した瞬間の (点光源が一番離れているときの) 実行画面の状態と同じ画像ができている。

課題 6 (スポットライト)

スポットライトを当てたときの見え方を確認する。
  1. 「ファイル」→「名前をつけて保存」で「ex13_6」という名前で保存する。
  2. draw関数を以下のように書き換えて上書き保存してから実行する。
    (光源の移動範囲は課題5と同じ)
    (23行目がスポットライトの設定。第7~9引数がスポットライトの方向、第10引数がライトの広がる角度、第11引数が減衰のパラメータ)


    dataフォルダには、このプログラムを起動した瞬間の (スポットライトが一番離れているときの) 実行画面の状態と同じ画像ができている。

提出


戻る

inserted by FC2 system