「恐竜はどんな色?」


メディア教育開発センター 近藤智嗣様からのご依頼で、Flash上でのお絵かきシステム「恐竜はどんな色?」を制作しました。

このページを表示するためには Flash Player が必要です。

var so = new SWFObject(“http://labs.logosware.com/wp-content/blogs.dir/7/files/2007/04/lunchbutton.swf”, “lunchButton”, “470”, “85”, “8”, “#FFFFFF”); so.addParam(“wmode”, “transparent”); so.write(“lunch”);

「恐竜はどんな色?」について

独立行政法人 メディア教育開発センター
研究開発部 近藤智嗣

システムの概要
化石骨格標本 博物館に展示されている恐竜の多くは、化石骨格標本として展示されています。肉付きや皮膚の色は、パネルや模型として展示されていることもありますが、基本的には見学者が想像して見ることになります。皮膚は皮膚痕の化石として残っている場合もありますが、色まではわかりません。

「恐竜はどんな色?」操作画面 このFlashクライアント「恐竜はどんな色?」は、博物館に展示されている恐竜の皮膚を描くためのものです。ただ描くだけでなく、描いた恐竜が3DCGの恐竜となり動き出します。さらに、博物館の展示室では、化石骨格標本と3DCGが融合され、ミクストリアリティとして見ることができるというシステムです。

重ねた画像 「恐竜はどんな色?」は、博物館の展示室で恐竜の化石骨格を見ながら想像を膨らまして描くこともできますし、家でじっくり時間をかけて描くこともできます。家で描いた絵はサーバーにアップされ、博物館では、ミクストリアリティとして自分の描いた恐竜を見ることができます。
現在、用意されている恐竜は、ステゴサウルスとエウオプロケファルスの2種類ですが、順次増やしていく予定です。

研究の目的

描いた画像 「恐竜はどんな色?」は、科学博物館での利用を前提としていますので、描かれた恐竜の芸術性よりも科学的な思考を養うことを目的としています。そのため、子どもが描いた絵はそのまま3DCGのテクスチャとして貼り付けられるのではなく、恐竜の皮膚の凹凸や陰影が自動的に付加されます。そして塗った色の境界は自然な感じになるようにしぶきがはねたような効果が自動的に付加されます。

重ねた画像 科学的に皮膚を考えるということは、自然界の物理現象などからある程度の可能性の高低をつけることができる場合もあるということです。たとえばステゴサウルスのような恐竜は、体温を下げるのが不得手であると考えられています。そうならば、太陽光線を吸収しやすい黒っぽい体色の個体よりも、太陽光線を反射しやすい白っぽい体色の個体の方が、オーバーヒートのリスクが低かった可能性があることや、足の速くない動物がストライプ模様をしていると目立ち過ぎるためシマウマ風の模様だと得することがなかったというようなことです。また、生息地の環境も皮膚の色や模様を考えるためのヒントになります。

ただし正解があるわけではないので、あり得なかったような恐竜も自由に描いてもらい人気投票をするようなことも計画しています。

システム構成について

ロゴスウェア株式会社
Flashテクノロジーグループ 山田博之

今回、依頼を受けて制作した「恐竜はどんな色?」のシステムは、

  1. クライアント側(Flash)で皮膚を描画
  2. データをサーバーに格納
  3. 専用アプリケーションで3Dオブジェクトへ模様を貼り付けて表示

という3つのステップを経て、最終的な恐竜のイメージを生成します。
このうち、1と2の部分をロゴスウェアで開発しました。描画用のFlashクライアントをメインに、データを格納するWEBサーバー(PHP、MySQL)の構成で設計されています。

Flash上で最終イメージを生成

恐竜画面2 恐竜の3Dモデル貼り付けるテクスチャーは、このツールを用いて手描きした画像だけではなく、ハイライトや凹凸の情報を合成した状態にする必要がありました。

恐竜画面2 単に画像の合成までであれば、従来のFlash8ベース(ActionScript2.0)でBitmap合成により画像を処理して対応可能でしたが、さらにJpeg画像に圧縮してからサーバーへ送信する必要があったため、Flex2でActionScript3.0による開発を行いました。

これにより、サーバー側の負荷と、通信量の低減を同時に実現しています。

ActionScrit2.0と3.0が混在した開発

最終的な恐竜画像の出力を考慮し、基本的にはFlex2ベースでの開発を行っていますが、当時、Flash上で自由なインタフェースを開発する環境が整っていなかったため、実験的にFlash8で制作したインタフェースを共存させる手法を導入しました。
AVMブリッジ

主に処理負荷が高い描画部分、保存部分をFlex2上でコーディングし、見た目に関わる部分をFlash8上で作成、ボタン動作に関わる部分をActionScript2.0を用いたクラスで作成します。

これらを連結するために、LocalConnectionを利用した「AvmBridge」クラスを作成し、Flex2とFlash8の動作をリンクさせる仕組みを開発しました。この「AvmBridge」により、Flex2で開発した、ActionScript3.0による速度的、機能的な恩恵を受けつつ、これまで使い慣れた、Flash8を用いたインタフェース設計を行うことが可能となりました。

今後は、ユーザー管理、恐竜管理を実装した後、Papervison3Dによる、Flash上でのリアルタイムプレビューを実装する予定です。

The following two tabs change content below.

山田

  1. はじめまして。3人のお子のおる母です。
    長男坊の夏休みの課題の資料を探していましたら、たどり着きました。
    課題は『調べ学習』。テーマはずばり『恐竜の模様』です。
    宿題の資料としてこちらを使わせていただいてもよろしいでしょうか?
    小学2年生の息子でも使いやすそうなのでさせてみたいんです。
    よろしくお願いします。

  2. コメントをありがとうございます。

    この研究を行っている近藤先生に確認を致しました。
    学校の課題目的ですので、自由にお使い頂いて構いませんとの事です。
    ぜひ、お子様の教材としてご活用ください。

    現在の最新バージョンは
    http://tkondo.nime.ac.jp/DinosaurPaint2/
    でご覧頂けます。

    今後ともよろしくお願いいたします。

  3. なつっぺだっチュ★

    きょうりゅうかぁ~すきかな?興味ありっぽい?っテゆーか、これって恐竜のこと話してるはずなの?それともこのサイトの事?まぁ、恐竜にしとく。恐竜って聞くと、何か立派な感じだね~。かっくぃいし~。やっぱ地球の育て親は、恐竜だぁ~!((←意味不明。あたしは、アメリカに住んでいる12さいの女のコデッス!ンじゃ★

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>