第13回 レンダリング

今回はテキスト3-3(079ページ~)のシェーディングについての実践を行う。環境光、拡散反射、鏡面反射、(テキストにはないが) 点光源を当てたときの見え方を調べる。
オンラインで受講でPCにProcessingが入っていない場合は、まず Processing をダウンロードしてインストールしてから以下の課題を行う。

課題 1 (環境光)

球形のオブジェクトに環境光だけを当てたときの見え方を確認する。
  1. Processingを起動する。
  2. 以下のコードをProcessingのエディタにコピー&ペーストし、「ex13_1」という名前で保存する。
  3. PVector rot = new PVector(0, 0, 0);
    
    void setup() {
      size(500, 500, P3D);
      noStroke();
      drawSphere();
      save("data/画像1.png");
    }
    
    void draw() {
      drawSphere();
    }
    
    void drawSphere(){
      background(0);
      ambientLight(50, 50, 50); // 環境光
      translate(width/2, height/2); // 原点を画面中心に移動
      rotateX(rot.x); // 縦回転
      rotateY(rot.y); // 横回転
      sphereDetail(64, 64); // 球の経度方向、緯度方向の分割数
      sphere(150); // 半径150の球
    }
    
    // ドラッグによる回転
    void mouseDragged(){
      rot.x -=(mouseY-pmouseY)*0.01;
      rot.y +=(mouseX-pmouseX)*0.01;
    }

  4. プログラムを実行する。
  5. (図のように灰色の球が表示される)


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

    ここで作る提出物
    • 画像1.png

課題 2 (拡散反射)

この球には最初から拡散反射の設定はされている。これに平行光線 (Processingの呼び方では方向光) を当ててやることで、拡散反射の様子が見られるようになる。
  1. Processingのメニューから「ファイル」→「名前をつけて保存」を選び、「ex13_2」という名前で保存する。
  2. コードを以下のように書き換えて実行する。
  3. (変わるのは赤枠のところだけ。これによって、左・上・手前から右・下・奥に向かう光があたるようになる)

    ドラッグすれば (光源ごと) 球を回転させて見られる。光の反対側は課題1と同じ状態になっているはず。
    dataフォルダには、このプログラムを起動した瞬間の (回転させる前の) 実行画面の状態と同じ画像ができている。

    ここで作る提出物
    • 画像2.png

課題 3 (鏡面反射 (\(n=2\)))

球面に鏡面反射の設定を加え、光沢が表示されるようにする。
  1. Processingのメニューから「ファイル」→「名前をつけて保存」を選び、「ex13_3」という名前で保存する。
  2. コードを以下のように書き換えて実行する。
  3. (変わるのは赤枠のところだけ。光源と球に対してそれぞれ鏡面反射の設定を行い、ハイライトの係数 \(n\) を2にする)

    光源側に広範囲の光沢が出た状態になる。ドラッグすれば (光源ごと) 球を回転させて見られる。

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

    ここで作る提出物
    • 画像3.png

課題 4 (鏡面反射 (\(n=2~6\)))

\(n\) の値を連続的に変化させ、\(n\) の大きさとハイライトの大きさの関係を確認する。
  1. Processingのメニューから「ファイル」→「名前をつけて保存」を選び、「ex13_4」という名前で保存する。
  2. コードを以下のように書き換えて実行する。
  3. \(n\) が2~6の範囲で変化し、それに応じてハイライトの大きさが変わる。ドラッグで回転させることもできる。
    (検定試験の第23問のcの解答のように、\(n\) が大きくなるとハイライトは小さく、\(n\) が小さくなるとハイライトは大きくなる)

    dataフォルダには、このプログラムを起動した瞬間の (\(n\) が6で、回転させる前の) 実行画面の状態と同じ画像ができている。

    ここで作る提出物
    • 画像4.png

課題 5 (点光源(\(r=180\)))

点光源を当てたときの見え方を確認する。
  1. コードを以下のように書き換えて実行する。
  2. (変わるのは赤枠のところだけ)
    (課題3, 4にあった鏡面反射に関わる命令 lightSpecular, specular, shininess (24, 26, 27行目)は削除する)
    (方向光のかわりに点光源を使うので、25行目はdirectionalLightからpointLightに変わる)
    (点光源は原点から180の位置にある。球の直径が150なので、その表面からは30だけ外側の位置になる)
    (点光源の位置がわかるように、28~29行目で点光源の位置に小さい球を表示させている。これがなくても光源は機能する)

    光源の近くの狭い範囲だけが照らされた状態になる。ドラッグすれば (光源ごと) 球を回転させて見られる。

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

    ここで作る提出物
    • 画像5.png

課題 6 (点光源(\(r=180~220\)))

点光源の位置を連続的に変え、見え方の変化を確認する。
  1. Processingのメニューから「ファイル」→「名前をつけて保存」を選び、「ex13_6」という名前で保存する。
  2. コードを以下のように書き換えて実行する。
  3. \(r\) が180~220の範囲で変化し、球の照らされ方が変わる。ドラッグで回転させることもできる。

    dataフォルダには、このプログラムを起動した瞬間の (\(r\) が220で、回転させる前の) 実行画面の状態と同じ画像ができている。

    ここで作る提出物
    • 画像6.png

提出


戻る

inserted by FC2 system