3Dを基礎から勉強する　テクスチャマッピング陰影付け

3D テクスチャマッピング

前回の「3Dを基礎から勉強するテクスチャマッピング」では、テスクチャを貼り付けたことにより陰影が消えてしまいました。陰影(シェーディング)については、以前に「3Dを基礎から勉強するフラットシェーディング」をやりました。これを応用すれば、陰影は…

2015-07-06

3Dを基礎から勉強する　テクスチャマッピング

3D テクスチャマッピング

前回の「3Dを基礎から勉強するアニメーションの表示」から半年が経ってしまいました。今回はテクスチャマッピングとなります。2Dでは「テクスチャマッピングを理解してみる」でやっているのですが、3Dだとどうなのか？ってことですね。理解するには一番単純…

2015-01-04

3Dを基礎から勉強する　アニメーションの表示

3D HTML5

今年、最初のブログです。前回の「3Dを基礎から勉強する複数モデルの表示」から２ヶ月経ってしまいましたが、また再開したいと思います。 jsdo.itにて、han.kuroさんが馬の3Dモデルにてアニメーション表示していたのを見かけました。プログラムも3Dライブ…

2014-11-02

3Dを基礎から勉強する　複数モデルの表示

3D HTML5

前回の「3Dを基礎から勉強するカリング処理」から２ヶ月経ってしまいましたが、また再開したいと思います。今回は複数モデル(立方体、球、円柱、円錐、トーラス)の表示となります。基礎からなのでライブラリを使わないで自前で表示するのが今回の目的です…

2014-09-01

3Dを基礎から勉強する　カリング処理

3D HTML5

前回、jsdo.itに投稿「３D入門３Dモデルを表示」したんですが、ある角度にすると欠けたような表示になっていて少し気にはしていたんです。原因を調べると、奥行きの小さい順に描画しているが、裏面の方が奥行きが大きくなる面があり、その部分が黒色で表…

2014-08-18

3Dを基礎から勉強する　再開

3D

このブログはもともと３Dのことを勉強したいと思って始めたわけだが、途中で射影変換やコンピュータビジョンに興味が移ってしまったので、原点に戻る意味でも３Dについて再開する。私の場合、ある程度理解してからでないとブログを書かないので、理解するま…

2014-02-28

射影変換(ホモグラフィ)について理解してみる　その１３

3D 2D 射影変換

前回、猫画像1枚を3D回転させてみたが、CSSの3D回転ジェネレータの「3D CSS Tester(github)」を見つけたので、これをCSSでなく敢えてCanvasで動きを真似てみます。3D回転する際には、一般的には三角形に分割して表現します。参照：テクスチャマッピングを理…

2013-06-10

3Dを基礎から勉強する　フラットシェーディング

3D プログラム

今回は、面に色を塗るフラットシェーディングです。実はてっく煮のオリジナルのプログラムである「AS3.0 で 3D プログラミングを１から勉強する (4) - 面に色を塗る」は、フラットシェーディングなので光源の位置によって面の色の濃さが変わるはずなんですが…

2013-06-09

3Dを基礎から勉強する　正規化

3D プログラム

ベクトルの正規化とは、ベクトルの方向は維持しつつ大きさを「1」にする事を指します。この大きさが「1」のベクトルのことを単位ベクトルと呼びます。左図の座標(3,3)にあるベクトルの大きさは、数学者は、2本の垂直な線を両脇に置くことでベクトルの大き…

2013-05-26

3Dを基礎から勉強する　外積

3D プログラム

今度は外積を説明します。内積は高校で習うのに対して、外積は大学で数学または物理で習うようです。■外積とは何か外積は英語で"outer product"と書きますが、"cross product"(クロス積)とも呼ばれます。これは演算記号の「×」(クロス)に由来します。掛け合…

2013-05-25

3Dを基礎から勉強する　内積

3D プログラム

ワイヤーフレームから脱出してそろそろ面に色を塗りたい、カメラ機能を付けて別の視点で見れるようにしたい。そう思って調べていくと内積と外積というキーワードに必ずひっかかる。そもそも内積とは何のことなのか、内積と外積との違いとは何なのかを掘り下…

2013-05-12

3Dを基礎から勉強する　透視投影

3D プログラム

今回は、透視投影について説明していきます。透視投影とは、視点より遠いものは実際の大きさより小さくなるように表示して遠近感を表現する方法です。例えば、100m先のものは50m先のものの半分の大きさで描くといった感じです。前回のサンプルの内容で、スラ…

2013-05-11

3Dを基礎から勉強する　3次元の回転

3D プログラム

前回のサンプルの内容をこれから少しずつ説明していきます。 http://jsdo.it/yaju3D/pixDAS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入 AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影今回は、3次元の回転についてです。 mouse…

2013-05-11

3Dを基礎から勉強する　立方体の表示

3D プログラム

前回のサンプルの内容をこれから少しずつ説明していきます。 http://jsdo.it/yaju3D/pixDAS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入 AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影このプログラムでは、大きな立方体1個の周…