【scratch】スクラッチで3Dを表現しよう(その3 ペンで遠近を再現する[レイキャスティング])【難易度:★★★★★】




いつもブログを見ていただいてありがとうございます。
プロクラスの山足です。

今回も、前回に引き続いて、スクラッチで3Dの作成について解説していきたいと思います!

前回までのブログ

今回のサンプルプログラム

3Dに重要な遠近の考え方について(前回のおさらい)

前回は、遠近法を用いた簡単な3D表現の考え方を解説しましたが、遠近法は最もわかりやすい3次元の平面的な考え方であり、

遠いほど物は小さく見え、近いほど物は大きく見える

といった考え方です。

さらに、いかに2次元(平面)で3次元を表現するのに大切なのは、3次元であると脳に錯覚、認識させることになります。

簡単に言えば、

遠いほど物はかすんで見える、ぼやけたり透明度が増したりして見える

ことを再現して遠さを表現する事になります。例えば、海のような広大な地形ではそのような見え方ができるでしょう(目がとらえる物の反射の光量の差が要因であったりします)。

出典:https://quickturn.jp/images/2006/060617ohshima2.jpg

今回は、物の大きさと見え方によって、3D空間を「ペン」機能で実装したいと思います!

「ペン」でできること

「ペン」機能を使うには、スクラッチ画面左下の「拡張機能を追加」から「ペン」を選択します。

「ペン」機能では、線を描けることはもちろんですが、色を変えたり、太さを変えたりすることもできます。

「ペン」の「明るさ」や「透明度」を使って、「かすみ」を表現、遠さを再現してあたかも3Dに見える様にします。

もう一つ「ペン」機能が3Dに向いていることは、スクラッチではスクリプトの形を変形する機能が備わっていません。大きさや色などは変えられますが、形を変えることはできませんよね。

コスチュームによって形の変化を再現することができても、3Dのような見る角度によって常に形が変化するような世界を表現するには現実的ではありません。

「ペン」を使って、その長さで遠い近いを再現したいと思います!

「ペン」で書く線の長さで遠い近いを表現

出典:http://www.ai-design-home.co.jp/blog/wp-content/uploads/2017/12/20171211160917_00001.jpg

画面の中心に水平線を固定し立体的な絵を描くと、左右の消失点をめがけてだんだん吸い込まれていくような見え方をします。

これをペン機能で再現したのが次となります。

コスチュームの中心(+)の視点から、四角の物体を見ている想定です。

実はy軸方向の縦の長さで、近い所を長く、遠い所を短く、かすんで描くようにしています。

このような形でペンを使って物体を立体的に再現することができるのです。

「ペン」で立体の描写プログラムを紹介

こちらが、ペンで立体を描いているプログラムになります。

①の「明るさ」「透明度」遠方がかすむを表現しています。

②のy軸の部分で近いものを長く、遠いものを短くで遠近を表現しています。

③のx軸を少しずつ変えながら、それぞれのx座標で①②の線を画面左端から右端まで縦線縦線縦線…を繰り返して描くようにしています。

この①②③を繰り返すことで画面全体の立体映像を表現しています。

あとは、各x座標における、自分から対象物までの距離を測ることができれば、それぞれの点における縦線の長さを指定することができるのです。その役割が、「距離リスト」になります。

自分の視点からそれぞれ見える点までの距離を計測するプログラム

こちらが、見ているもののそれぞれの点までの距離を計測するプログラムになります。

上の画像イメージのように、自分を中心に、目線の角度(矢印)で、対象物にぶつかるまでの距離を計測して、距離をリストに記憶していくような処理になります。

①で自分(プレイヤー)から見ているもの(マップ)にぶつかるまでの距離を測っています。

②で①で進みながら計測した距離を記憶し、「距離リスト」として残していっています。

③(角度のオフセット)で目線の角度を徐々に右に右に回しています。

①②③を繰り返すことで左の青線から右の青線まで角度を変えながら見えるものまでの距離を計測して、立体物を描く線の長さを指定する距離を記憶しているのです。

さいごに

距離を計測するプログラムで記憶した「距離リスト」を読み込み、描くプログラムで縦線を左端から右端まで描く処理を繰り返すことで、スクラッチの画面上に立体を描くプログラムができるのです。

今回、細かい数値などの解説は避け、考え方を中心に説明しましたが、より細かい解説が聞きたい方は、ぜひプロクラスの講座にお申し込みください…!

だいぶ難しい内容になってきましたが、また次回にぜひご期待くださいませ!

プロクラスにはスクラッチ講座やUnity講座があります!

よりレベルアップを図りたい皆様に、プロクラスにはプロのプログラマーが教える講座がさまざま用意されています!

興味がある方はぜひご確認ください!

大人が学べるスクラッチ講座もあります!

先生方や保護者の方が学べるスクラッチ講座Unity講座もありますので、短期間でプログラミングを習得されたい方はぜひご活用ください!

立体的思考を深められるマイクラ講座もぜひ!

マイクラ講座の詳細はこちらから

↓すべてのコースは「無料体験」が可能ですのでぜひ!