Large Display Size Middle Display Size Small Display Size

2016年1月 の日記

2016/1/29(金)

>2016/1 /17(日)

>このホームページの「ソースコードの表示機能」でバグがあるみたいです。

>表示される場合と表示がおかしい場合があります。

>あと、忙しくなるはずが、なんか忙しくなくなっちゃいました。

直しました★

2016/1/24(日)

fig.
▲ファンタシースターみたいな3D表示。

3DCG計算による3Dダンジョンゲーム(JavaScript)です。

ストーリーはないし、何かをやったらゴール、っていうのもないですが、見どころは、3Dのなめらかなアニメーションです。

CPUが Intel core i5 のPCで作っていたので、低スペックのPCではもしかしたら処理が遅くて遊べないかもしれません。

左の画像のリンクをクリックするとJavaScriptが動きます。動き回るにはキーボードが必要です。BGMも付けました。

キー入力がちょっとひっかかる感じがするのが今後の課題です。

Firefoxで開発、Windows10のEdgeでも動きました。InternetExplorer11ではBGMが鳴りませんでした。



* 3D酔い対策になるか *

世の中には3Dの画面がダイナミックに動くと、酔ってしまう人がいるようです。

気が付いたんですが、3D酔いする人が3D酔いする原因は、焦点距離(画角)にあるんじゃないかと思いました。

焦点距離を短くすると立体感、奥行きが出て、画面がダイナミックに動き、ペットの鼻デカ写真のようなゆがみも出てきます。ペットの鼻デカ写真では6~12mmとか極端に短い焦点距離のレンズを使ているそうです。

逆に焦点距離を長くすると立体感がおさえられて、画面が比較的そっけなく動き、ゆがみが少ないです。焦点距離が長いのは望遠鏡です。(車酔いも、遠くの景色を見ると良いって言いますよね)

この、焦点距離を短くしたときのダイナミックな動きやゆがんだ動きが、目の感覚を狂わせ、酔うんじゃないかと…。

だから焦点距離を長くとるようにすれば、落ち着いた画面になり、3D酔いしなくなります。たぶんですけど。

ちなみにこのプログラムでは焦点距離を 250 mmにして計算しています。普通のカメラが50mmで50mmが人間の肉眼に近いといわれています。それに対して250mmの設定なので、かなり長い設定です。

どうですか? 酔いますかね?


* 使った3DCGの技術 *

  • 3DCGの原理 h = x * ( s / z )、v = y * ( s / z ) …小学校算数
  • 三角関数 sin(), cos() …高校数学
  • 陰面消去1 画家のアルゴリズム …ただの大小比較だから小学校算数~高校数学
  • 陰面消去2 法線・ベクトル法 …ベクトルの内積外積を使うから高校数学

合わせて、このプログラムのための試作品も開発順に掲載しておきます。

  1. 3Dではない単純マップ。これをもとに3D画面を別途作成するという意図です。小中
  2. 3D画面を別途作成したところです。「パタパタ表示」でウィザードリィみたいです。中
  3. それを「スムーズ回転」させたものです。ファンタシースター1みたいです。高
  4. 「画家のアルゴリズム」で陰面消去をしたところです。
  5. 「法線・ベクトル法」でさらに陰面消去をしたところです。プログラムがゴツイ感じに…。

2.の「パタパタ表示」のウィザードリィプログラムも意外と難しく感じました。どこが難しかったかというと、マップデータからプレイヤーが向いている方向を考慮しつつデータを取り出し、3D画面のために90度方向を転換して並べるところが、難しかったです。

3.の「スムーズ回転」は三角関数を使っています。そして5.の「法線・ベクトル法」による陰面消去はベクトルの内積や外積を使っていて、これらは高校生の数学の分野です。(でも公式に当てはめて掛け算するだけだから意味は分からなくても計算だけなら中学生でもできるような)

4.の「画家のアルゴリズム」はただの大小比較なので、中学生くらいでもできるのではと思います。(いつも思いますが、実際、中高生がやるには私の説明は不十分だと思っていてまた今度くわしく説明したいと思っています)

数学の一つ一つの計算よりは、『複数のモデルを1枚の面ごとに分解してそれを1つの配列に全部入れて、Z座標でソートを掛けてから描く…』(つまり、2体以上のガンプラのパーツを全部バラバラにして1つの袋に入れちゃう、というようなこと)とかそういったプログラムの考え方のほうが難しいと思いました。

最終的に出来上がったプログラムは、もう「動けばいいや」的なやっつけプログラムになっていて、エレガントから かけ離れています。

直進しているときに左右両側がちょっとパカパカとおかしな描画になっていますが、これはその描画物体のZ座標が原点(x,y,zが0,0,0の点で、視点でもある)を超えていることが原因です。


2016/1/18(月)

「管理者紹介」のページを新調しました。

このページの上部のメニューを開いて、左側にリンクがあります。

面倒ならこれでも開きます。→

2016/1 /17(日)

このホームページの「ソースコードの表示機能」でバグがあるみたいです。

表示される場合と表示がおかしい場合があります。

あと、忙しくなるはずが、なんか忙しくなくなっちゃいました。

2016/1 /6(水)

あけましておめでとうございます。

今年もよろしくお願いします。

今年は1月の始めから忙しくなる予定です。

本当はこうやってホームページの更新をしている暇もないんですが、告知なり更新なりしないと、これを読ん でいる皆さんは『ほかのよくあるホームページと同じようにもうやめちゃったのか』と思ってしまうと思います ので…。


fig.
▲JavaScript「3D映像と焦点距離」

3DCGを学ぶとき「焦点距離」とか「画角」とかいう用語が出てきます。これらはなかなか理解し づらいのではないかと思います。

そこで、これらを視覚的に理解できる教材を用意しましたので、試してみてください。左の画像リンクをクリックすると新しいウィンドウでJavaScriptを開きます。

カメラのレンズの性能で、「50mmレンズ」とか「200mmレンズ」とかよく言われると思いま すが、この50や200が焦点距離です。

私がよく説明している3DCGの原理の h = x * ( s / z )、v = y * ( s / z ) の式の s も焦点距離です。

この式は3次元のある点 x, y, z を、2次元のスクリーン上の h, v に変換してくれる式でした。

この s とカメラのレンズの性能のmmは同じものとして考えて問題ありません。50mmレンズのカメラと同じ画像にしたいから s = 50; にする、という発想で問題ありません。ただ、計算結果の h, v は思ったよりも小さい画像になると思うので、h, v それぞれ、h = h * 17.6、v = v * 17.6 のようにして 17.6 倍にするといいです。そうすれば3DCG作成ソフトのShade3Dとそっくり同じ画面になります。

この焦点距離を 50 にすれば、普通のレンズで人間の肉眼により近いとされる映像になります。200にすると望遠レンズとなり、遠くのものが拡大されます。望遠鏡と同じです。

極端に小さく5とか10にすると、広角レンズといわれるものになり、ペットの鼻デカ写真みたいに ゆがんだ映像になります。

3DCGでは望遠もゆがんだ映像も通常は必要ないと思うので、人間の肉眼を模した50でいいと思 います。

「画角」は焦点距離に反比例します。このJavaScriptでは画角を表示する機能を取り付け ましたので、反比例の様子を見てみてください。画角と焦点距離の関係が理解できると思います。



これ以降は、私の生活が安定しないと、ホームページ更新はできません。


ページ制作 homepage6047



ページの上端へ (もくじ開く)