Large Display Size Middle Display Size Small Display Size

2015年11月 の日記

2015/11/29(日)

fig.
▲ソーサリアン最強の10曲

パソコンゲーム「ソーサリアン」の最強の10曲です。

曲そのものではなく「曲のリスト」です。

左の画像リンクをクリックするとページを開きます。

ソーサリアンは短編ストーリーを集めたアクションRPGで、ストーリーごとに作曲が行われた恵まれたゲームです。

じっくり聴いていると、「ハーモニー」とか「メリハリ」とかそういうキーワードが浮かんでくる。そういうところに魅かれる。

じっくり聞くときと、何気なく聞くときは、感動の仕方が違っていて、評価も変わってしまう。

じっくり聞いてやっぱり評価を落とそうと思っても、後で何気なく聞いていると急に思い立って評価を上げたりする。



2015/11/28(土)

fig.
▲「Shade3D/赤青メガネで立体視」

パソコンでの立体視体験は、専用の3Dディスプレイを買わないとできないと思っていませんか?

じつは赤青のメガネだけ用意すれば結構ハイクオリティな立体視を体験できます。

この左の小さな画像も変哲のない素人っぽい3Dモデル画像に見えますが、赤青メガネで見ると、実は立体視が可能です。

左の画像リンクをクリックするとページを開きます。



同じ猫の画像、かもめの大群の動画でも、3Dで見ると、2Dではそんな感じはしなかったのに、猫はこちらによってきて甘えてきそうな感じがして、かもめは遠くからこちらに繰り返し繰り返し向かってくる無邪気さを感じることができます。

3D立体視はブームが去ったと思っていましたが、立体視にはそういう今までになかった新しい表現があったんですね。

※「猫」についてはShade3Dに付属のサンプルのモデルで著作権があるらしいので掲載はできません。(サンプルは使ってもよさそうに思えるけど、素材ではないんですよね)

※「かもめ」は上記画像リンクのページの中にその立体映像の場所(リンク)を記載しています。

2015/11/27(金)

fig.
▲このような「OS選択画面」の消し方

ちょっと仕事でPuppy Linux(パピーリナックス、超軽量OSです)を使おうと思ったんですが、うまくいかず、インストールしかけたPuppy Linuxを削除しました。

しかし左のようなOS選択画面だけ残ってしまって…

その直し方です。左の画像をクリックするとそのページに移動します。

多くの方が はまりそうなので…。




2015/11/20(金)

本来、そんなに難しくないものをわざわざ難しくさせている。その1つが3DCGです。

3DCGの入門時に、「行列」に目を向けると非常に難しいものになると思います。行列そのものはそんなには難しくはないと思いますが、行列を使うことでややこしくなり、把握が難しくなると思います。人間の手を離れる感じがします。

しかし、3DCGの原理だけを見るととても簡単なことで3DCGを描くことができます。

  • 3DCGの原理の計算: 中学1年の数学の「文字式」 h=x*(s/z), v=y*(s/z)
  • 3DCGの原理の理解: 中学3年の数学の「図形(相似の問題)」 下図


中学校3年の数学で習う、三角形の相似の問題です。
この大小の三角形は相似しています。図中の v は何cmですか?
大小の比が 7/20 なら、大きいほうの三角形の8cmにこの比を掛ければ、v が求まります。

8 * (7 / 20) = 2.8cm

上の問題は、3次元空間にそのまま当てはまります。
 


3次元空間を考えます。
視点は3次元空間の原点の 0,0,0 の位置にあります。(左下の目のイラスト)
モデルを構成する頂点の1つは図の通り x, y, z の位置にあります。(右上の赤丸)

パソコンの画面に3D空間の様子を描こうというとき、視点とモデルの間に仮想的にスクリーンをはさんで考えます。
ちょっと難しい考え方ですが、スクリーンは視点から s だけ離れているとします。

このとき、中学校の数学の相似の問題がそのまま当てはまります。
「スクリーン」に描かれる頂点の v 座標はいくつですか?
相似の問題を考えたときのように、v = y * (s / z)で求まってしまいます。
ちなみに「スクリーン」の中の中心を 0,0 だとして、v は上方向に2.8ドットとなります。
(※モデルの原点はどこか、など考えると多少説明不足気味の図ではありますが)

▲相似の問題で描いたワイヤーフレーム(左)、となりは元のモデル

※このワイヤーフレームの多くの頂点はそれぞれ x, y, z の座標を持っています。
頂点は相似の問題の通りパソコンの画面(平面)上の位置 h, v を決めることができます。
それで描いたのがこの子猫の画像です。

これと、あとプログラミングの経験みたいなものがあればワイヤーフレームの描画ができるんです。

プログラミングの経験とは、「基本的なプログラムができること」と、「3Dのモデルデータをプログラム上でどう表現するか自分で考える」とか、「うまく動かないとき数値はどうなっているのか追跡する力(デバッグプリントやExcelで計算してみるとか)」などです。

そのため、原理は中学生に理解できても、このプログラミングのノウハウは中学生にはひょっとしたら難しいかもしれないです。私が中学生の頃は本に載っているプログラムを打ち込むだけとか、打ち込んだものをアレンジするだけだったので…。自分でオリジナルに何かを作るというのは垣根を越える行為でした。

でも最近はプログラミングを授業でも取り上げたり、3DCGプログラミングを見据えた数学のカリキュラム(空間図形や掃引体などやってる)になっているし、解説も昔よりも充実しているしで、最近の中学生はできるかも?


▲中学校1年生の数学の参考書より
最近の中学数学は3DCGを意識している?
(著作権を考慮して他を暗転)

あと、回転をさせようとすると高校の「三角関数」が必要になるので難しいかもしれませんが、分かるとその難しさ以上に面白いです。物がグイングインと回るのですから。

下の記事の「光沢」もそうなんですが、私がやっている「行列を使わない3DCG」というのは ”3DCGという非常に重たい荷物を、てこの原理を使って片手でひょいと持ち上げる” という感じがします。

労力は2か3くらいなのに、結果が100くらいある、とも言えます。

さらに言うと、映画「スターシップトゥルーパーズ1」の女性主人公が、ハンドル一本で巨大な宇宙戦艦を操作する場面のような、そんな感じもします。見上げるような巨大なものが、簡単な式で動いてしまう。

みんな頑張って行列を使って3DCGにトライしていて、中には自分には無理だ…と言って挫折する人もいるようです。

確かに私も1年ほど3DCGを行ってきて、最初は行列にトライして一応成功したと思いますが、その中で絶望したり正直言うとちょっと泣きたくもなりました。「できない…自分には」


▲私もトライした行列

1年のうち2,3か月は行列にトライしていましたが、残りの9か月くらいはほとんど「行列を使わない3DCG」に取り組んでいました。こっちのほうがラクラクですから。

ラクラクとは言っても正直言うと、これまでたくさん試行錯誤してきたのも事実です。

下の記事の「光沢」のソースコードを見ると、重心、法線、法線ベクトル法、ライティング、回転、ベクトルの外積・内積、単位ベクトルだとか、ランバート反射にスペキュラー(下の記事の光沢のこと)など、わりと多くの難しい言葉が並んでいますが…

私は「簡単ですよ」と皆さんに言うために、どうして自分は簡単だと思っているのかとか、簡単だと思っている中で実際はどこか難しいかとか、いろいろ考えるんですが…

難しさの要因の一つに「法則の命名」があります。

「ランバート反射」。――――この響きちょっとしびれるでしょ。

このかっこよさげな、むずかしげな命名は、その法則のすばらしさを表現した結果だと思いますが、入門者にとっては、スライムのはずのものがシドーに見えて、クリボーのはずのものがクッパに見えてしまいます。まぁランバート反射の内容は、クリボーとは言い過ぎで、ジュゲムくらいは難しいかもしれません。


▲ランバート反射(自然界の面の反射に似せて再現するもの)

そのジュゲムくらいに難しいランバート反射の説明:

面があって、面を照らす光源があります。(図の赤い台形と、太陽)

面には向きがあり、光源はどの方向かという向きもあります。(図の青→と、黄→)

光源の向き次第で、面と光源の2つの向きの成す角(図の赤い扇形)は変わります。

たとえば、光源が面の真上にあるとき、成す角は0度になるでしょう。

そして、夕日のように光源が面とすれすれのような角度にあるとき、成す角は90度くらいになるでしょう。

現実を考えると、光源が真上にあるとき光の強さは最大になります。(正午、南中)

そして、光源が面とすれすれの時は光の強さは最小に近づきます。(夕日)

この角度と光の強さの関係を数学の式に表すと、こうなります。

面の明るさ = 光の最大の強さ × cos(成す角) 

cos(成す角)は"成す角"が大きいほど小さな値になり、"成す角"が小さいほど大きな値になります。cos()は光源と面の向きとその時の光の強さを表すのにちょうどいいです。

それでできあがるのがこういう画像です。面の向き次第で光の強さが変わっています。

▲「ランバート反射」と名付けてあります。

命名の話に戻りますが、「重心」だって難しそうな言葉ですが、その実体は平均値です。全部の合計を足して総数で割れば平均です。重心計算とはそれをやってるだけです。

しかし、ダイヤモンドをただの石だと言ってしまえば残念でしょう。「重心」も人間が知りたいものを教えてくれる計算方法で、「重心」によって道が開けるとすれば、名前なり のありがたいものなのです。

難しくないものが難しく思える原因を考えていたところでした。

難しさの要因のもう一つは、ソースコードを見ると難しそうな計算がみられますが、実はこれは公式を使っているのであって、私がすべてを理解しているわけではないということです。特に内積・外積は言葉通り難しい感じですが、公式があるので、それに当てはめれば答えがおのずと出てきます。

それと難しさを打ち砕く方法があって、それは例えば三角関数の面白さや、3DCGの面白さです。物が回るさまや、3DCGの立体を自分で描いた喜びが先にあると、そのために必要な三角関数という知識や3DCGでたまに使う内積・外積そして難しいとしている行列も、かなりの強いエンジンで理解しようという気になります。

ここまで説明してきて私が一番言いたいことというのは、下の光沢の3DCGのJavaScriptを作るにあたって、見た目はすごいものに見えるかもしれないけど、そんなに難しいことをやっているわけではないんです、ということです。

ジュゲムくらいにむずかしい

2015/11/20(金)

fig.
▲JavaScript 作

このサイトを参考にして光沢を表現してみました。

http://wgld.org/d/webgl/w023.html

視点と物体の角度によって光源自身が映り込んでできるハイライト。一番白い部分です。

左の画像をクリックすると、JavaScriptを開きます。キー操作で反射を大きくしたり弱めたりと操作できます。



fig.
▲Shade3D 作

Shade3D(左図)の場合と比べると JavaScript はずいぶんカクカク/デコボコしています。デコボコをなめらかに綺麗にするには、四角い面の表面を1ピクセルずつ計算しなくてはなりません。

JavaScript は全部ソフトウェアで計算しているので低速です(=細かい部分まで計算する余裕がない)、Shade3D は openGL というグラフィックのハードウェア(グラフィクス IC チップ)で計算させているので高速です。そういう違いです。

(JavaScript も webGL という方法で openGL のハードウェアが使えて、Shade3D と同じクオリティの画像を描けます)


ソースコード(3DCG.html)
形状データ(ball.js)

2015/11/14(土)

このホームページの上部のメニューバーに「このWEBサイトについて」というリンクがあり、そのページの「Q. ソースコードや画像を自分の作品に使いたい」という項目で、”断りなく自由に使ってもらって大丈夫です。” と明記していますが、同時に各ページに「All Rights Reserved.」の表示も行っていました。著作権保護しているのか、していないのか、わからない状態でした。

これを訂正して、各ページの「All Rights Reserved.」の表示を「ページ制作 homepage6047」という文字に変更しました。

ごく一部のページで著作権を主張する場合もありますのでその際はご注意ください。

ご注意ね。

2015/11/8(日)

fig.
▲シューティングゲーム
JavaScriptによるシューティングゲームです。
3Dのゲームを作ろうと思って、そのベースとしてとりあえず2Dで作ってみた、というものです。

スコアなし、敵は体当たりのみ、ボス無し。

しかし、サインカーブ移動、直線移動、斜め移動などなど敵の動きが多彩です。

まぁ、ちょっとつまんないかもしれませんが…。


打って打って打ちまくれ!
ひたすら!


ページ制作 homepage6047



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