Large Display Size Middle Display Size Small Display Size
印刷用 概要 キーワード 著者

「原理で3DCG」 第3回~第17回
教材プログラムの列挙

このブラウザはcanvasに対応していません。
▲第9回 画家のアルゴリズムと回転とアニメ
(これはCANVASタグで、JavaScriptで描画しています)
(ページ看板娘として、見た目を少し変更しています)

教材プログラムの列挙

「原理で3DCG」 第3回~第17回までの教材プログラムを列挙します。

各ページは急いで書いた文章で、詳しく説明していません。

少なくとも比較ソースコードは掲載したので、前の回からの変更点を見て、方法を探ってもらえればと思います。

なお、第1回第2回は、別途、詳しいページを作ってあるのでそっちを読んでください。


では駆け足で行ってみよう!


fig.
▲キー入力なし。静止画。

第3回 面を描画しよう(ワイヤフレーム)

簡単な説明と第1回との比較ソースコード



fig.
▲キー入力なし。静止画。

第4回 陰面消去のために

簡単な説明と第3回との比較ソースコード



fig.
▲キー入力なし。静止画。

第5回 陰面消去1(画家のアルゴリズム)

簡単な説明と第4回との比較ソースコード



fig.
▲キー入力なし。静止画。


fig.
▲キー入力なし。静止画。

第7回 画家のアルゴリズムを回転して観察

簡単な説明と第5回との比較ソースコード



fig.
▲キー入力なし。アニメーション。


fig.
▲キー入力なし。アニメーション。
3D酔いに注意。

第9回 画家のアルゴリズムと回転とアニメ

簡単な説明と第7回との比較ソースコード



fig.
▲キー入力なし。静止画。

第10回 複数のモデルを表示しよう

簡単な説明と第1回との比較ソースコード



fig.
▲キー入力なし。アニメーション。

第11回 画家のアルゴリズムの不正描画 確認1

簡単な説明と第9回との比較ソースコード



fig.
▲キー入力あり。

第12回 画家のアルゴリズムの不正描画 確認2

簡単な説明と第11回との比較ソースコード



fig.
▲キー入力なし。静止画。

第13回 陰面消去2(法線ベクトル法)

簡単な説明と第4回との比較ソースコード



fig.
▲キー入力あり。

第14回 法線ベクトル法を回転して観察

簡単な説明と第13回との比較ソースコード



fig.
▲キー入力あり。

第15回 法線ベクトル法の不正描画 確認

簡単な説明と第14回との比較ソースコード



fig.
▲キー入力あり。

第16回 2つの陰面消去を組み合わせる

簡単な説明と第15回との比較ソースコード



fig.
▲キー入力あり。

第17回(最終回) 視点変更

簡単な説明と第16回との比較ソースコード



以上、3DCGの計算から視点変更まで見てきました。

これで3DCGによる風景描写がプログラムで可能になったのではないかと思います。



適当になっちゃって、ごめんね


最後に

難しいのは3D計算ではなく…

ところで、全17回のプログラムの中で、行列は1回も使っていません。内積や外積、 sin, cosは使っていますが、行列ほど難しいものではないと思います。

難しいのは3D計算ではなく、立体のデータをプログラムの中でどう表現するのか(データの整頓のしかた、データ構造の決め方)であったり、どんなふうにアルゴリズムを実現するのかとか、そういう「プログラムの流れ」のほうだと思います。

(ところで、行列が難しい難しいと言っているのは、行列を使うとどこかややこしい感じになるということであって、行列自体は変わったルールを持った掛け算のカタマリみたいなものですごく難しいものではないと思います)

(もちろん行列を使う際は、「プログラムの流れ」と「行列の3D計算」の両方が難しいです)


3DCG計算全般の基礎です

この h = x * ( s / z )、v = y * ( s / z ) という3DCGの原理は、3DCG計算全般の基礎になるものです。

この基礎を知らないで、行列の計算から始めても3DCGは勉強できますが、原理を勉強しておけば、より深く3DCGを勉強できると思います。

それに行列よりは簡単にいろいろ実現できます。


今回プログラムしなかった機能

各項目の先頭のアルファベットはこの全体図のアルファベットに対応しています。

  • N: 面ごとの色変更
    面ごとに色を設定できれば、表現力が上がります。
  • O: 陰影付け(ランバート反射)
    同じ色の面でも、光が当たる部分と光が当たらない部分とで色の明るさを変えれば、質感が上がります。
  • J: 3DCGソフト(Shade3DやBlenderなど)からのデータ移行
    JavaScriptのプログラム上でモデリング(粘土をこねるようにモデルを創作)するのは限界があります。
    3DCG作成ソフトでモデルを作成し、テキストデータへ落とすことで、複雑なモデルを表示できるようにします。
  • K: 複数モデル対応2(形状コピー)
    たとえばゲームを作る場合は、モデルは画面に複数表示する必要があります。
  • L: 複数モデル対応3(リンク形状)
    同じ形を複数画面に配置する場合、複数のモデル1つ1つに頂点などのデータを用意するのではなく、1つのデータを参照する形で実現します。
  • P: ポリゴン(面)ではなくドロー(線画)を描く
    テクスチャマッピングは低速なJavaScriptでは実現が難しいので、代替案としてJavaScriptのbeginPath()などで実現される線画を3D空間に配置することを考えます。そうすることで面に目や口など顔を描くことができます。
  • Q: スムーズなキー入力(キーセンス)
    ゲームらしいキー入力の疑似的な実現です。
  • H: アニメーション(物体切り替え)
    モデルを別のモデルへ切り替えるなどしてアニメーションを実現します。

夜更かしプログラマーと昭和の父親

みなさんは夜更かししてますか?

あまりプログラミングや趣味に没頭して夜更かしすると身体壊しますよ。

私が子供のころに父から言われた言葉をここで私自身と夜更かししてる皆さんに言っておきますよ。よく心に命じて下さい。

もう寝ろー!!

昭和の時代の父親はだいたいみんなこうでした。

この言葉を聞いたとき私や兄弟は「キャー!」と言って笑いながら寝たものです。

ゲームや趣味はほどほどにして、夜の11時にはふとんに入りましょう…。

みなさんの身体を心配して言っています。


本当はもうちょっと詳しい説明をしたいのですが、今は時間がありません。

また暇ができたら、詳しい説明を作りたいと思います。


それでは、
さようなら!

3DCGおわり
ページ制作 homepage6047


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