第９回　コンピュータグラフィクス演習（遠隔講義）
背景、　DEF／USE

講義に関する質問について

この授業について質問がある場合は、hemmi@sun.ac.jp までメールで問い合わせてください。
その際、件名は 「コンピュータグラフィクス演習の講義について（９）」 としてください。

【注意】ブラウザは Internet Explorer を使っているか確認してください。
　

【エラーメッセージについて】

プログラムが複雑になってくるとエラーが出る場合があります。
その際は「エラーメッセージについて」を参照してください。
　

前回までの授業で、３DCGの基本的な作り方を学びました。

今回は、背景を入れる方法とDEF／USEを使う方法について学びます。

背景を入れると作品の見栄えが一気に良くなります。
DEF／USEはアニメーション（CGに動きを与える）を作るときに必要になります。次回はアニメーションを学びますのでその時に必要となります。
　

背景

VRMLでは、背景の表現方法として、背景に色を付ける方法とテクスチャを張り込む方法がありますが、ここでは背景にテクスチャを貼り込む方法を説明します。

【文法】背景にテクスチャを貼り込むにはBackgroundを使います。
　Backgroundでは自分が作るCGの、前、後、左、右、上、下、６面に背景となる画像を貼り込みます（巨大な立方体の内部にCGが作られているというイメージです)。
　指定するパラメータは以下の６種類です。テクスチャのファイル名（画像データ名）をダブルコーテーションで囲みます。
　
Background{
　　frontUrl "画像データ"　　　　　#前面に貼り付ける画像
　　backUrl "画像データ"　　　　　#背面に貼り付ける画像
　　topUrl "画像データ"　　　　 　 #上面に貼り付ける画像
　　bottomUrl "画像データ"　　　 #下面に貼り付ける画像
　　leftUrl "画像データ"　　　　　　#左面に貼り付ける画像
　　rightUrl "画像データ"　　　　 　#右面に貼り付ける画像
}

【例】中心に円錐を描き、下面に yama1.png 、それ以外の面に sky1.png を貼り付ける。

#VRML V2.0 utf8
Background{
  frontUrl "sky1.png"        #前面に貼り付ける画像
  backUrl "sky1.png"         #背面に貼り付ける画像
  topUrl "sky1.png"          #上面に貼り付ける画像
  bottomUrl "yama1.png"      #下面に貼り付ける画像
  leftUrl "sky1.png"         #左面に貼り付ける画像
  rightUrl "sky1.png"        #右面に貼り付ける画像
}

Transform{
  translation 0.0 -1.0 0.0
  children[
    Shape{
      appearance Appearance{
        material Material{
        }
      }
      geometry Cone{
        bottomRadius 2.0
        height 4.0
      }
    }
  ]
}

【テクスチャサンプル】上の例で使用する画像ファイルです
sky1.png　yama1.png
　　

実行例

【問題１】背景にサイコロのテクスチャ（１〜６の画像）を貼り込みなさい。

実行例

　
　

DEF／USE

同じノードを繰り返し使いたい場合には、DEF / USE を使います。
DEFでノードに名前を付けて定義し、USEで名前を付けたノードを呼び出します。
DEFで定義した部分（VRMLプログラム）をUSEの部分にコピー＆ペーストするのと同じことです。
DEF／USEはアニメーションを作るときに必要となりますので使い方を良く理解しておいてください。

【文法】
ノードの定義はDEFを用いる

　　DEF 定義した名前　定義したいノード{ }

定義したノードを呼び出すにはUSEを用いる

　　USE 定義した名前


　

【例】球を３個表示する
　SHという名前で球を１つ定義し、SHを２回呼び出すことで残りの２つの球を作る。

#VRML V2.0 utf8
Transform{
  translation 0.0 1.5 0.0
  children[
     DEF SH Shape {       # このノード（Shapeノード）をSHという名前で定義
       geometry Sphere {
        radius 1.0
      }
      appearance Appearance {
        material Material {
          diffuseColor 1.0 1.0 1.0
          specularColor 1.0 0.0 0.0
        }
      }
    }
#  ↑↑↑↑↑↑↑↑↑↑↑　ここまでがSH　↑↑↑↑↑↑↑↑↑↑↑　
  ]
}

Transform{
  translation 2.0 0.0 0.0
  children[
    USE SH                 # SHという名前で定義したノードを使う
  ]
}

Transform{
  translation 0.0 -1.5 0.0
  children[
    USE SH                 # SHという名前で定義したノードを使う
  ]
}

実行例
　

【参考】DEFとUSEを使わないと次のようになる

#VRML V2.0 utf8
Transform{
  translation 0.0 1.5 0.0
  children[
    Shape {
       geometry Sphere {
        radius 1.0
      }
      appearance Appearance {
        material Material {
          diffuseColor 1.0 1.0 1.0
          specularColor 1.0 0.0 0.0
        }
      }
    } 
  ]
}

Transform{
  translation 2.0 0.0 0.0
  children[
    Shape {
       geometry Sphere {
        radius 1.0
      }
      appearance Appearance {
        material Material {
          diffuseColor 1.0 1.0 1.0
          specularColor 1.0 0.0 0.0
        }
      }
    } 
  ]
}

Transform{
  translation 0.0 -1.5 0.0
  children[
    Shape {
       geometry Sphere {
        radius 1.0
      }
      appearance Appearance {
        material Material {
          diffuseColor 1.0 1.0 1.0
          specularColor 1.0 0.0 0.0
        }
      }
    } 
  ]
}

　【問題２】

半径が０．３、色と透明度が次のような球を９個表示しなさい。
　diffuseColor 0.0 1.0 0.0
　specularColor 1.0 0.0 0.0
　transparency 0.3

球は、立方体（一辺の長さが２）の各頂点に８個、中心に１個表示すること。

実行例

第９回の講義はここまでで終了です

１０：３０までに、ここまでの課題（【問題１】と【問題２】まで）が終わったかどうかを返信してください。
返信は、LiveCampusの「授業連絡」から行ってください。
返信内容は、「終わった」または「終わらなかった」のいずれかとしてください。

【返信期限】　

2020年6月8日（月）　１0：3０
　　

【返信方法】

LiveCampusの「授業連絡」から「返信」で行ってください。
　

【返信内容】

「終わった」または「終わらなかった」のいずれかで答えてください。

　
　
以上