─ 9 ─

WebGL を用いた天体学習用３Ｄ教材の開発

吉　冨　健　一（2015年10月５日受理）

Development of 3D Teaching Materials for Learning Motion of the MoonUsing WebGL Programming

Kenichi Yoshidomi

Abstract: In earth science education, it is very important to understand about appearance changes of the moon in accordance with relative position to the sun. In order to promote students’ spatial concept, it is necessary to understand moon’s revolution by observing themselves. Nevertheless, it is diffi cult to keep up observation, since the moon’s visible position is gradually change during 30 days, and opportunity of observable fi ne weather is limited. If such motion and appearance changes of the moon can be displayed on the tablet, and students can freely operation with fi ngertip, its understanding will be made possible. For this purpose, we have newly developed teaching/learning materials, especially of earth science. Here, the method of reproduce 3DCG shows the movement of moon using WebGL programming with JavaScrit libraries like Away3D, being helpful for learning motion of moon, is explained.

Key words: moon, revolution, teaching materials, tabletキーワード：月，天体，教材，３D，iPad

１．はじめに

　身近な自然観察の一環として，月の見える位置や形の変化に関する内容が取り扱われることが多い。特に小学校第５学年「月と星」の単元においては，実際に月や星の動きを観察し，見える位置や形の特徴，動き方について学習する。中学校では，「地球と宇宙」の単元において，月が地球の周りを回る公転運動によって，見える時間や位置，形が変化していく様子とその規則性を，観測資料などを基に特徴を捉え，月の公転運動と関連づけて理解することが求められている。　特に中学校理科における宇宙の単元は，生徒たちが最も興味を持ちやすい内容の一つでありながら，理解度が低く，空間の概念形成に課題があることが指摘されている（庭野・古川，2009）。このように天体の動きに関する内容が，多くの学習者にとって難しい理由として，天体の動きを知るためには，３次元空間における物体の運動を２次元平面に投影した教科書の図を

広島大学大学院教育学研究科紀要　第二部　第64号　2015　9－16

見ながら，頭の中で３次元的な天体の動きとして復元し，理解する必要があることが挙げられる。特に月の動きと形の変化に関しては，地球の自転による日周運動によるもの，月が地球の周りを公転する運動によるもの，地球が太陽の周りを公転する年周運動によるもの，の３つの運動の要素が織り込まれたものとして表現される。　月の動きを理解するということは，太陽の相対的位置ととともに地球の自転や月の公転による動きを加味しながら，月の位置と太陽光線の反射により見える形を頭の中で自由に描くことができるようになることである。そのためには３次元の形と動きの認識を必要とするため，理解が非常に難しいことが考えられる。　月の動きと見え方の変化を理解するために，一般には三球儀のようなモデルを用いて説明が行われることが多いが，基本的には教師による演示が中心となり，生徒が自由に動かして理解を深めることができない，という現状がある。また紙面上で，図示・作図するこ

─ 10 ─

吉冨　健一

とにより月の形の変化を捉えるような教材も開発されているが，月という球体に対し，光のあたる角度が変わることによって見える形が変化していく，というイメージがわきにくいのが現状である。　月の変化を学習するためには，教科書で示されるような図を併用しつつ，実際の月の見え方の変化を日々観測することが望ましい。しかし実際に月の変化を観察するためには，最低でも約１ヶ月の期間が必要となり，かつ観測する時刻が日々50分ずつ遅れていく，という難関が待っている。特に下弦の月に関しては，観察に適した時間帯が未明から早朝となる。季節によっては何日も曇り空が続くこともあるので，月の形の変化を定期的に観測する，ということは様々な面において大変困難の伴う作業である。　月の動きと満ち欠けの理解は，太陽と月の引力に伴って地表で発生する潮の満ち引きを理解する上でも重要な概念とされる。年配の方々の中には，「昔は遊ぶ所もなかったから，川や海で魚や蟹を捕って遊んだ。大潮の頃が狙い目で，月が丸くなるからわかる。」と，潮汐の変化と月の満ち欠けが密接に関連していることを経験的に知っていたことが伺える。近年では，子供たちが海で遊ぶような機会はあまりなく，どちらかといえば高潮災害に備えるために大潮の時期を知る，という防災学習的な側面が強い。　明治の始め頃までは“旧暦”と呼ばれる，月の満ち欠けを基準として決められた暦を使っており，毎月１日は必ず新月となり，15日前後に満月となる。そのため今日が何日かわかれば，月の形や潮の満ち引き，地球と月，太陽の位置関係までわかる，とても便利な暦であった。特に海に関わる職業の人々にとっては，日付がそのまま潮の変化を示す指標であったため，とても有用であったとされる。　本研究では，そのような困難の伴う月の観察に代わり，月の動きと形の変化の理解を深めるとともに，空間概念の育成を手助けできるような教材の開発を目的とした。PC を用いて天体の動きを再現する教材に関しては，平松・野瀬（2010）による Windows 上でVisualBasic を用いて，視点変更を自由に行えるようにした教材等の開発が行われてきている。地学教育のなかでも，特に天文分野における月の動きや，気象分野における雲の動きの学習のように，変化にかかる時間が長い現象に関しては，人間が観察するのに困難が伴うことが多く，そのような場合に HTML5技術を活用して現象をわかりやすく提示することが，学習者の理解にとって有効であることが吉冨（2013）により指摘されている。また，間處・林（2013）は，金星の見え方を学習する場面において，生徒自身が天体の

位置関係の変化を確認しながら，操作によって自らの観察視点を移動できることが重要である，と指摘している。そのため，本研究では月の公転に伴う位置と形の変化を理解できるよう，HTML5技術の一つであるWebGL プログラミング技術を用い，図１のような教科書等で図示される２次元的な月の動きを補完し，３次元的な動きの認識・把握を助ける目的で，タブレット端末で表示可能な天体学習用の３D 教材の開発を行った。

図１　月の位置と見え方の変化

　３D 教材の開発にあたっては，・ 地球や月のイメージ，自転や公転の動きをリアル

に再現・ 学習者が簡単に視点の位置を変更可能・ 月の公転に応じて形が変化していく様子を，俯瞰

した視点からも観察できる・ iPad 等のタブレット端末で表示可能であることなどを条件としている。　教材として月の動きを示す３次元コンピュータグラフィックス（以下，3DCG）を作成するにあたっては，上記の条件を満たすため，WebGL プログラミングを用いた。WebGL とは，特定のアプリケーションを用いずに Web ブラウザで3DCG を表示させるための仕様の一つである。WebGL を用いることで，ブラウザに特別なプラグインを導入する必要なしに，ハードウェアでアクセラレートされた3DCG を表示することが可能となる。特別なソフトを必要としないため，アプリケーションやプラグイン等の導入が簡単でない，タブレット端末やスマートフォンなどを提示装置として利用することが可能となる。

─ 11 ─

WebGL を用いた天体学習用３Ｄ教材の開発

　本論では，月の動きと見え方の変化の学習に焦点をあて，学習者自らが容易に視点を変更することのできる仮想の宇宙を，タブレット中に再現するための開発方法と，表示される３D 画像の天体学習における利活用の方法について報告する。

２．月の変化

　月の形は日々変化し続けているが（図２），形の変化のスタートは，旧暦で朔日（月の第一日目）として扱われるように多くの場合，新月である。暦の上での新しい月が始まる一日のことを「ついたち」と表現するのは，月が新しく出現するという意味での「月立ち」に語源があるといわれる。本来，新月とは，朔日（見えない月）の後に初めて現れる月のことを指す。　以下に月の形の変化の周期，見える位置と時間の変化，南中高度の季節変化に加え，地球から見える月の向きについて説明する。

図２　月の形の変化

２．１　形の変化の周期　月の形は，新月（図２a）から次第に満ちていき，月の右側が次第に太く見えてくる。約一週間で半月として，右側だけが明るく輝く上弦の月（図２b）へと変わる。新月からおよそ二週間で満月（図２c）となる。満月をこえると，今度は右側から欠けていき，下弦の月（上弦と逆側の半月 : 図２d）を経て，ほぼ四週間で再び新月へと戻る。　新月から次第に満ち，満月をこえて再び新月に戻るのに必要な時間は，平均すると約29.5日である。図１に示したように，新月と満月の時，太陽・月・地球は一直線に並んでいる。地球から見て太陽側に月がある場合は新月となる。新月は，地球から見える面とは逆の面に光があたっているのと，眩しい太陽の近くにあ

るため，ほとんど観察することができない。逆に，月が太陽と逆側にある場合，太陽と同じ方向から月面を見る形になるため，全面に光があたり満月となる。　これに対し月が，地球 - 太陽と90°の角度をなす位置にあるとき，月が半分だけ照らされた状態となるため，半月に見える。この場合，月の光って見える側に90°ほど離れた位置に，太陽が観測される。２．２　見える位置と時間の変化　太陽は，地球の自転に伴う日周運動により，ほぼ１日で地球の周りを一周し，24時間後に再び南中する（１太陽日）。ところが月は，地球の日周運動に加え，月が地球の周りを回る公転運動により，１日ごとに月の出が平均して50分ずつ遅れていく。つまりは月が南中してから次の日に南中するまでの時間は，平均して24時間50分ということになる。　そのため新月の頃，月は太陽とほぼ同じ方向にあるが次第に遅れていき，一週間経過すると50分×7となり，太陽からほぼ６時間遅れ（24時間の１／４），つまり太陽から90°離れた場所に移動し，西の空に太陽が沈む頃に南中する。満月の頃には，50分×14となり，太陽から12時間おくれ（24時間の１／２）となる。地球を挟んで太陽とは真逆に位置するため，太陽が沈むと同時に東の空に登り，朝日が昇る頃，西の空に沈む。太陽から270°遅れた下弦の月にいたっては，南中するのは未明から明け方の時間帯となる。２．３　南中高度の季節変化　三球儀を観察すると，満月のたびに月食がおこったり，新月のたびに日食が起こったりするが，実際に月食が発生する頻度は，年に１～２回程度である。これは，地球の公転面と月の公転面が約５°傾いていることに起因する。逆に，この地球と月の公転面がほぼ一致しており，天球上を太陽が移動する黄道と，月が移動する白道がほぼ一致するという認識が，月の運動に誤解を生じさせる原因となっている ( 吉冨，2013)。　図３に示すように地球の自転軸が，公転面に対して約23.4°傾いているため，季節によって太陽の南中高度に差異が生じる。夏は太陽の南中高度が高く，冬になると低くなるように，地面と太陽光線のなす角の変化が季節を生じさせる。　前述のように黄道と白道は，ほぼ一致しているという知識のため，太陽の高度が高い時期には，月の南中高度も高くなると誤解しがちである。ところが月が自転軸の傾いた地球を公転しているせいで，月の南中高度は，一年を周期として変化する太陽に比べ，約30日で複雑に変化する。具体的には満月は，地球を挟んで太陽と反対側に位置するため，夏至の頃，太陽の南中高度が最も高い季節に，満月の南中高度は非常に低

─ 12 ─

吉冨　健一

い位置になる（図３：夏至）。これは冬至が近くなり，太陽の高度が低くなる季節に，中秋の名月に代表されるように空の高い位置に月があることからも明らかである。　春分・秋分の頃の太陽の南中高度は，90°－観測地点の緯度で求めることができる。夏至の太陽の南中高度は，春分の南中高度に地軸の傾き（23.4°）を足したもの，冬至の南中高度は引いたもの，となる。観測地点の緯度を34°と仮定した場合，昼間の夏至の太陽が80°近い高さにある頃，夜中に見える満月は約33°とかなり低い位置で観測される。これが冬至になると満月の頃80°近い高さとなる（図３：冬至）。　同様に春分の頃に見える月の南中高度は，上弦の月が最も高く，満月の頃には56°の高さとなり，下弦の月の頃最も低くなる。逆に秋分の頃は，下弦の月の南中高度が最も高い。　このように季節によって，南中高度が最も高くなる月の形が異なるとともに，同じ季節であっても，月の形の変化に伴って，満月の時は高く新月が近くなると低くなる，といった具合に南中高度がめまぐるしく変化する。

図３　太陽の位置と月の南中高度

２．４　月の向き　月でうさぎが餅をついているという伝説は，仏教説話からきており，中秋の名月が豊穣祝いであることから，豊作への感謝の意味もあるとされる。月の表面の，“海”と呼ばれる黒く見える部分が，長い耳をもったうさぎの模様に見えることも一因であると考えられる。地球から見ることのできない月の裏側は，白っぽい“陸”と呼ばれる部分が大部分を占め，大きな海は存在しないことが知られている（図４）。

図４　月の裏側（NASA提供）

　地球からみた月が，いつも同じ面を向けている現象について「月が自転していないから」という回答が得られることが多い。試しに月を自転させずに地球の周りを公転させた場合（図５上），宇宙に対して月が静止している状態で地球の周りを１回転させると，c の位置では月の裏側が見えてしまう。月がいつも同じ面を地球に向けるためには，図５下に示すように，公転軌道を進むにつれ月自身も同じ分だけ回転し，１公転にあたり１自転することで実現できる。　教科書ではこの現象を，月の公転周期と自転周期が一致しており，ともに約27日であるため，と説明されることが多い。実際には，月の重心の位置が，月の中心より地球側に寄っているため，この重心がいつも地球の引力に引っ張られた形で公転していることに起因する。いわゆる水の入ったバケツの取手を持って回した時に，自分が一回転する間にバケツの開口部はいつも自分を向いており，外から見るとバケツも一回転しているのと似た原理である。月の場合，実際には公転軌道が楕円である上に，地球の公転軌道面に対してわずかに傾いていることなどが原因で，秤動とよばれる首振り運動をしている。そのため厳密には必ず同じ面が見えている訳ではなく，見える面が季節によって少しずつ異なり，月面の約59%が観測可能である。　今回開発を行った３D 教材においては，月の公転軌道は円として定義しているため秤動は発生しないが，月の表側を常に地球の方向に向けるため，月を公転させる際に月の公転角度と同じ角度だけ，月が自転するよう計算してある。

─ 13 ─

WebGL を用いた天体学習用３Ｄ教材の開発

図５　月が自転しない場合（上）とする場合（下）

３．月の変化を示す教材の開発

　教材の活用にあたっては，生徒一人一人あるいは二人に１台程度でタブレット端末を配り，教師の説明や，紙面による補助的な資料を併用しつつ，個々の理解度に応じて自由に端末を操作することを想定している。そのため，提示する際に使用する端末で，特定のアプリケーションを別途必要としないよう，WebGLプログラミング技術を用いて作成を行った．そのため，iPad に限らず同様に iOS を搭載している iPhone や，Android 端末，通常の PC 等のブラウザでも再生可能である。　一般に複雑な3DCG を開発する際は，専用のソフトウェアを導入するとともに，その使い方や操作方法について習熟する必要がある．このソフトウェアの導入や，専門用語，難解な使い方等がこれまで３D 開発の敷居を高くしていたことは否めない。本研究においては，タブレットの中に擬似的に宇宙を再現するといっても，幸いにも必要となる要素は太陽，地球と月の３つだけである。動きとしては地球のモデルとなる球（以

下，地球オブジェクト）を中心として，月のモデルとなる球（以下，月オブジェクト）を，地球を中心に回転させるという非常に単純な形と動きで済む。太陽に関しては，光の来る方向を示すため，背景に画像として太陽の位置を表示させている。　月の公転軌道は，ケプラーの法則で示されるように，本来，地球を一つの焦点とする楕円を描く。また，月が地球の周りを公転する際の中心となる地球と月の共通重心は，地球の中心から地球の半径の約３／４だけ月側に存在する。今回の教材では，そのような月の動き方を厳密に再現する必要はないので，月オブジェクトの軌道の中心は，地球オブジェクトの中心と一致した円軌道を描くように設定してある。このような単純な仕様のため，ゲーム開発等に一般に使われる専門的なソフトウェアは利用せず，WebGL プログラミングの技術を用いて，Away3D Typescript と呼ばれるライブラリと JavaScript だけで地球と月の動きの再現を行っている。　今回 WebGL プログラミングを用いて開発を行ったのは，以下の５つの３D モデルである。１． 月の形の変化：地球から見える月の形の変化を再

現するため，月だけを画面に表示し，時間とともに上弦の月～満月～下弦の月～新月へと月齢の変化を繰り返すモデル（図６）。

２． 月の動き：自転する地球の周りを月が公転する様子を，マウスで自由に視点の位置を変更して確認することが可能。これにより１で観察した月の形の変化が，太陽と月の位置関係により発生することを学習する。

３． 月の見え方の変化：月の形の変化をより分かりやすく表現するため，自転する地球の周りに45°ずつ，合計８個の月を軌道上に配置し（図７），太陽との位置関係と月の形の変化を，マウスで自由に視点の位置を変更して様々な角度から確認することが可能。

４． 月の位置と形の変化：太陽の相対的な位置関係の変化により，地球および月への日光があたる部分がどのように変化するか，視点を月から一定距離離れた場所に固定し，月と一緒に地球の周りを公転させることで，月の形と見える時間帯の変化を学習する。

５． 季節変化と月の南中高度：地球の自転軸を23.4°傾かせ，春分・夏至・秋分・冬至における地球の自転軸の傾きの方向の違いによる季節変化を学習する。また，太陽と月の位置関係の変化により，月の南中高度がどのように変化するか，月の形の変化とともに学習する。

─ 14 ─

吉冨　健一

図６　月齢の変化を示すCGのイメージ

図７　角度による形の違いを示す

３．１　WebGL プログラミング　WebGL は HTML5の API の１つであり，先に述べたように Web ブラウザで3DCG を表示するための仕様の一つである。これにより今まで Web ブラウザの標準機能では実現できなかった，ハードウェアでアクセラレートされた3DCG を表示できるようになった。　HTML5とは広義で JavaScript や CSS を含めた新しい技術を指し，HTML の５回目にあたる大幅な改訂版にあたる。HTML5を利用する最大のメリットとしては，プラグインを必要とせずに，ブラウザ本体の機能として滑らかな3DCG の描画が可能になった点が挙げられる。HTML5の欠点としては，ブラウザごとに実装状況が異なるため，Windows の標準ブラウザとして利用者の多い Internet Explorer10では未対応となるなど，パソコン向けのコンテンツとして利用するには互換性の問題を含んでいることが挙げられる。　逆に，主要なスマートフォンやタブレット端末で利用されている主要な OS である iOS 用のブラウザである Safari や，Android 端末に搭載されることの多

い Google Chrome，Firefox や Opera のようなブラウザは，最新版において全て HTML5および WebGL への対応がなされている。これらのプラットフォームでは，公開されているプラグインの種類や適用に制限が多く，容易に機能を拡張することが難しい現状を考慮すると，スマートフォンやタブレット向けの教材として開発するのに最適といえる。ただし，WebGL を再生するためには，ハードウェア的にビデオカードが OpenGL 2.0 をサポートしている必要がある。　WebGL は高度な技術である一方，API は低レベルなため，利用するにあたっては冗長な準備を行う必要があった。これを改善するために開発されたのが“Away3D TypeScript”と呼ばれる JavaScript ライブラリ群である。これを利用することで高レベルなAPI として WebGL を利用することが可能となった。３．２　Away3D TypeScript　Away3D は，オープンソースのリアルタイム３Dエンジンであり，元来 Flash プラットフォーム向けに開発されたものである。それを JavaScript ライブラリに移植したものが“Away3D TypeScript”にあたる。Away3D で3DCG を作成する際には，JavaScriptを利用して行う。　JavaScript とは，プログラミング言語のひとつであり，その実行環境はほとんどのウェブブラウザに実装されている。JavaScript を用いることで，従来のhtml では不可能なインタラクティブな web サイトの構築や，リッチインターネットアプリケーションの開発を行うことが可能である。　Away3d Typescipt の最新ライブラリは， Github

（以下の URL）からダウンロード可能である。Githubは，コードを共有・公開し，改訂履歴を管理するためのサービスである。＜ GitHub ＞　https://github.com/away3d/　Away3D は，今でも開発中であるため，頻繁にライブラリの名前や数，クラスの読み方などが変更になるので注意が必要である。最近では，2014年11月５日付でビルドが改められ，読み込む必要のあるライブラリが３つから５つに増えた。またライブラリ名から

「next」が外され，正規版へと近づいている。その後，2015年３月13日付で再びライブラリが変更になり，従来あったクラス名が無くなったり，新しいクラスが追加されたりしている。ライブラリやクラスの変更には膨大な手間や検証のための時間が必要となるため，本論では未だに2014年９月のリビジョンを用いている。３．３　テクスチャの利用　地球および月の３D オブジェクトをリアルに表示す

─ 15 ─

WebGL を用いた天体学習用３Ｄ教材の開発

るためには，作成した球体オブジェクトの表面に，テクスチャとしてビットマップ画像を貼り付ける必要がある。これらのビットマップ画像は，基本的に JPEG形式の画像で，縦横比が１：１あるいは１：２となる。テクスチャとして利用可能なビットマップ画像のサイズに関しては規定があり，・　画像の縦横の幅は２の累乗・　画像の縦横の幅は64ピクセル以上であることが求められる。これと異なるピクセル数の画像を利用した場合，表示する際に画像が引き伸ばされたり，余分な表示が追加されたりして，想定と異なる表示結果となることがあるので注意が必要となる。　地球のテクスチャに関しては，NASA が「Blue Marble」のホームページ（以下の URL）において，教育者，科学者，美術館，公共に自由に利用できるとして配布を行っているテクスチャを利用した。ダウンロード利用した画像は，JPEG 形式で2,048×1,024ピクセルで約580KB のものである。＜ Blue Marble Next Generation ＞http://earthobservatory.nasa.gov/Features/BlueMarble/BlueMarble_2002.php　月面のテクスチャは，様々なプラットフォームで動作する３D 天体プログラムである Celestia の関連ページである「Celestia Motherlode」のホームページ（以下の URL）で，フリーに配布を行っているものを利用した。Solar System（太陽系）の項目の中にあるMoon から，「4K Lunar Surface Maps」をダウンロードして利用した。画像は，JPEG 形式で1024×512ピクセルで約240KB のものである。＜ The Celestia Motherlode ＞http://www.celestiamotherlode.net３．４　３Dプログラミング　タブレット端末に太陽，地球と月を表示するのに必要なソースファイルは，以下に示すファイルとなる。これらのファイルを Web サーバにアップロードすることで，インターネットを通じて表示することが可能である。・ Away3D Typescript ライブラリ（ダウンロード）・ 地球と月のテクスチャ（ダウンロード）・ Html ファイル（今回作成）・ JavaScript ファイル（今回作成）　基本的には，ライブラリファイルと天体を表示するためのコードを記述した JavaScript ファイルの相対パスを，html ファイルのヘッダ部に記載して参照し，Web ページとして表示を行う仕組みとなっている。３．５　３Dプログラミング　月の動きを３D で再現するために JavaScript ファ

イルにコードを書いていくが，３D プログラミングの基本は，表示するための舞台を設定し，照明を当て，そこにオブジェクトが表示される，という流れである。コードの簡単な流れを以下に示す。１． 地球の月のテクスチャとなる画像ファイルを最初

に読み込む。読み込みに失敗した場合，愛想の無い球体となるため，画像ファイルの読み込みを最初に済ませておく。

２． ３D で表示するための舞台を作成し，表示領域（縦と横の幅は画面に合わせる）を定める。

３． 読み込んだ画像ファイルを元にテクスチャを生成する。

４． ３D で表示する形状を指定して，物体（オブジェクト）を作成する。Away3Dで利用可能な形状は，平面，球体，直方体，三角錐，円柱，カプセル形状，ドーナツ形状の７種類である。今回は球体（地球・月）と平面（太陽）を利用する。球体の大きさや，オブジェクトを滑らかに表示するための縦・横方向の分割数を指定する。

５． オブジェクトにライトを適用する。Away3D では様々な光源を利用することが可能である。今回は平行光線を利用し，光源の位置と方向を指定する。その他，反射強度や，環境光（本来陰の部分にわずかに及ぶ光）の強さなどを別途指定する。

６． オブジェクトの質感を定義する。今回の場合は画像をテクスチャとして使用する。

７． ループイベントを使って，オブジェクトを配置する角度や描画する位置を変えて，自転や公転しているように見せる。

８． 場合によっては，天体の動きや視点の変更をわかりやすくするために，ランダムな輝点を発生させる。

４．まとめ

　本研究では，立体的な月の動きと見え方の変化の様子を iPad 等のタブレット端末を用いて提示することを目的として，３D 教材の開発を行った。これを活用して，教室等で生徒自らが容易な操作によって視点の移動を行うことで，３次元的な空間概念を育成する手助けになることを目指して，以下に示す５つの３D モデルを開発した。　１つめは，月の形の変化を再現したもので，月だけを画面に表示し，本来約１ヶ月で変化する月の形の変化を表示するモデル。　２つめは，自転する地球の周りを月が公転する様子を再現したもので，マウスで自由に視点の位置を変更

─ 16 ─

吉冨　健一

しながら確認することが可能なモデル。　３つめは，月の形の変化をより分かりやすく表現するため，自転する地球の周りに45°ずつ，合計８個の月を軌道上に一度に配置したもので，月の形の変化の様子を隣と比較しながら確認可能なモデル。　４つめは，地球および月への日光のあたり方がどのように変化するか，太陽の相対的な位置関係の変化をもとに確認するためのモデル。　５つめは，季節に変化に伴い月の南中高度がどのように変化するかを示すためのモデル。　本研究において開発を行った３D 教材は，月の位置の変化に伴い太陽光線によって照らされる角度が変わることで，月の形が変化して見えることを理解することを目的としてモデル化を行ったものである。そのため，月そのものや，月の動きを正確に再現したものではない。具体的には，月の表示は，ポリゴンで再現した球体に月のビットマップ画像を貼り付けてあるので，月の表面にクレーターが存在するように見えて厳密にはただの滑らかな球である。そのため特定の月齢の際に見えるはずのクレーターの凹凸等を示すことはできない。また，動き方についても月の公転軌道の中心が，地球の中心と一致する円運動を描いているため，本来であれば楕円軌道を描くことによって発生する月の大きさの変化，公転速度の変化，秤動等を再現していない。　3DCG の作成にあたっては，HTML5技術の一つである WebGL プログラミングの技術を用い，いくつかのライブラリと JavaScript だけで地球と月の動きの再現を行っている。WebGL のメリットは，特別なプラグイン等を必要とせずに，Web ブラウザの標準機能として，ハードウェアでアクセラレートされた3DCG を表示できることである。WebGL を用いるにあたっては，元来 Flash プラットフォーム向けに開発されたオープンソースのリアルタイム３D エンジンを，JavaScript ライブラリに移植した“Away3D TypeScript”と呼ばれるライブラリを利用した。　地球や月をよりリアルなイメージとして表示するために必要なテクスチャと呼ばれるビットマップ画像は，インターネット上からフリーの素材として配布されているものをダウンロードして利用した。場合によっては，星に代わる小さな点を遠方にランダムに生成・投影し，背景を星空のような表現とすることで，天体の動きや視点の変更をよりわかりやすく工夫して

いる。　タブレット端末に地球と月を表示するのに必要なソースファイルは，3.4にて説明したファイル群となる。これらのファイルを Web サーバにアップロードすることで，作成した3DCG を，インターネットを通じて公開することが可能であり，研究室のホームページにて公開中である。＜吉冨研究室＞http://domi.hiroshima-u.ac.jp　今回開発を行った３D 教材を用いて，多数のタブレット端末を使って授業実践を行おうとした場合，学校環境や利用端末数によっては，インターネット環境を整備する必要や，既設の環境を利用する場合にも帯域速度などに問題が生じる可能性がある。通常，CGIを用いて作成したコンテンツの場合，インタラクティブ（双方向性）なホームページを作成することが可能なメリットがある反面，CGI はウェブサーバ上で動作するため，オフラインでは利用できないというデメリットがある。今回のように HTML5と JavaScriptを用いたコンテンツの場合には，クライアント側（今回の場合はタブレット端末）で動作するため，インタラクティブなコンテンツでありながら，端末の中にローカルファイルとして保存しておくことで，インターネット接続が得られない環境でも，同じように表示することが可能であることがメリットとして挙げられる。

【引用文献】

平松良夫・野瀬重人（2010）：「天体」の学習における視点変更もでるによる立体的な空間の把握Ⅱ．平成22年度日本地学教育学会第64回全国大会鹿児島大会講演予稿集，70-71.

間處耕吉・林　武広（2013）：視点移動能力の習得を重視した金星の見え方の新指導．地学教育，66, 31-41.

庭野義英・古川順子（2009）：中学校理科「宇宙」における空間概念形成についての研究：視点移動能力・方位認識能力・相対認識能力育成のための方法．上越教育大学研究機用，No.28，227-233.

吉冨健一（2013）：理科教材の開発における HTML5の活用，広島大学大学院教育学研究科紀要．第二部，62, 27-33.