第４回　コンピュータグラフィクス演習（遠隔講義）
色、輝き、透明度の変更

　

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

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

　


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

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

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

　

前回の授業では、図形の幾何変換（移動や回転）の方法を学びました。

今回は、物体の、色、輝き、透明度、を指定する方法について学びます。

　

VRMLで行える設定は次の5種類です。

diffuseColor 1.0 0.0 0.0 　
表面の色を設定する
色はR, G, B で指定する（各色の間をスペースで区切る）　
各色とも、値は0.0〜1.0で指定する
　
emissiveColor 1.0 0.0 0.0 　
発光色を設定する（物体が発光しているような質感になる）
色はR, G, B で指定する（各色の間をスペースで区切る）　
各色とも、値は0.0〜1.0で指定する
　
specularColor 1.0 0.0 0.0 　
物体が光を反射する時の、反射光の色を設定する
色はR, G, B で指定する（各色の間をスペースで区切る）　
各色とも、値は0.0〜1.0で指定する
　
shininess 0.2 　
輝きの鋭さ（輝点の大きさ）を設定する
shininessを設定する時は、specularColorと組み合わせて使う。
値は0.0〜1.0で指定する
値が大きいほど鋭い輝きになる（輝点が小さくなる）
　
transparency 0.5 　
透明度を設定する
値は0.0〜1.0で指定する
値が大きいほど透明度は高くなる（透明になる）
　

　

ＲＧＢ値と色の関係

色の指定はR（赤）、G（緑）、B（青）の値を指定することで行う。
RGBの値は、0.0〜1.0の間で指定します。
代表的な色のRGB値を以下の表に載せておくので参考にしてください。

他の色を使いたい場合は、ネットで「Webカラー　10進数」と検索してください。RGB値の10進数表記が載っているページが見つかるはずです。
WebカラーのRGB値は0〜255の値をとります。
VRMLでは0.0〜1.0となりますので、Webカラーの値をVRMLで使用する値に変換してからプログラムに入れてください。

Ｒ

Ｇ

Ｂ

色

0.0

0.0

0.0

黒色

1.0

0.0

0.0

赤色

0.0

1.0

0.0

緑色

1.0

1.0

0.0

黄色

0.0

0.0

1.0

青色

1.0

0.0

1.0

紫色

0.0

1.0

1.0

水色

1.0

1.0

1.0

白色


　

【記述場所】　Materialノードに必要なフィールド（色、輝き、透明度）を記述します　

Shape{
  appearance Appearance{
    material Material{
      diffuseColor 1.0 0.0 0.0
      emissiveColor 1.0 0.0 0.0
      specularColor 1.0 0.0 0.0
      shininess 0.2
      transparency 0.5
    }
  }
  geometry Sphere{
    radius 2.0
  }
}
 Materialノードには、diffuseColorやemissiveColorなど、複数のフィールド（色、輝き、透明度）を並記することができる。
　
　
　
　
　
　
 

【例】緑色の球を表示する。

#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{
      diffuseColor 0.0 1.0 0.0
    }
  }
  geometry Sphere{
    radius 2.0
  }
}

実行例

　

【例】色を省略することもできる。その場合は灰色になる。

#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{

    }
  }
  geometry Sphere{
    radius 2.0
  }
}

実行例

　

【例】緑色の球を発光させる。

#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{
      emissiveColor 0.0 1.0 0.0
    }
  }
  geometry Sphere{
    radius 2
  }
}

実行例


【例】緑色の球を表示し、反射光を青色にする。

#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{
      diffuseColor 0.0 1.0 0.0
      specularColor 0.0 0.0 1.0
    }
  }
  geometry Sphere{
    radius 2.0
  }
}

実行例


【例】緑色の球を表示し、反射光を青色にする。
　　　この時、反射光の輝きを鋭くする。

#VRML V2.0 utf8
Shape{
  appearance Appearance{
    material Material{
      diffuseColor 0.0 1.0 0.0
      specularColor 0.0 0.0 1.0
      shininess 1.0
    }
  }
  geometry Sphere{
    radius 2.0
  }
}

実行例


【例】半透明の赤色の箱の中に緑色の球を表示する。

#VRML V2.0 utf8
#透明な箱
Shape{
  appearance Appearance{
    material Material{
      diffuseColor 1.0 0.0 0.0
      transparency 0.8
    }
  }
  geometry Box{
    size 4.0 4.0 4.0
  }
}

#緑色の球
Shape{
  appearance Appearance{
    material Material{
      diffuseColor 0.0 1.0 0.0
    }
  }
  geometry Sphere{
    radius 2.0
  }
}

実行例


【問題】 ランプを作りなさい。これができたらこの時間は終了です。

実行例

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

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

【返信期限】　

2020年5月18日（月）　１2：1０
　　

【返信方法】

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

【返信内容】

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

　
以上