プログラム
今回は、面に色を塗るフラットシェーディングです。実はてっく煮のオリジナルのプログラムである「AS3.0 で 3D プログラミングを１から勉強する (4) - 面に色を塗る」は、フラットシェーディングなので光源の位置によって面の色の濃さが変わるはずなんですが…
ベクトルの正規化とは、ベクトルの方向は維持しつつ大きさを「1」にする事を指します。 この大きさが「1」のベクトルのことを単位ベクトルと呼びます。 左図の座標(3,3)にあるベクトルの大きさは、数学者は、2本の垂直な線を両脇に置くことでベクトルの大き…
今度は外積を説明します。内積は高校で習うのに対して、外積は大学で数学または物理で習うようです。■外積とは何か 外積は英語で"outer product"と書きますが、"cross product"(クロス積)とも呼ばれます。これは演算記号の「×」(クロス)に由来します。掛け合…
ワイヤーフレームから脱出してそろそろ面に色を塗りたい、カメラ機能を付けて別の視点で見れるようにしたい。 そう思って調べていくと内積と外積というキーワードに必ずひっかかる。そもそも内積とは何のことなのか、内積と外積との違いとは何なのかを掘り下…
今回は、透視投影について説明していきます。透視投影とは、視点より遠いものは実際の大きさより小さくなるように表示して遠近感を表現する方法です。例えば、100m先のものは50m先のものの半分の大きさで描くといった感じです。前回のサンプルの内容で、スラ…
前回のサンプルの内容をこれから少しずつ説明していきます。 http://jsdo.it/yaju3D/pixDAS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入 AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影今回は、3次元の回転についてです。 mouse…
前回のサンプルの内容をこれから少しずつ説明していきます。 http://jsdo.it/yaju3D/pixDAS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入 AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影このプログラムでは、大きな立方体1個の周…
このブログの最初の記事が2011/12/30の「3Dを基礎から勉強する」の記事でした。3Dを理解する前に2Dを理解しないとねってことで月日が経ってしまったわけですが、2Dの理解も深まったので、ようやく3Dの勉強に本格的に入ることにしました。再度、「てっく煮ブ…
今回は、画像をCanvasのRotateメソッドを使用しないで自前で回転させてみます。 使用する画像は、いつもの猫画像です。 画像の回転は、画像を構成する全ピクセルの回転後の座標を計算して点を打つだけです。回転をする場合の入力点(x1,y1)を、画像の中心(cx,…
前回は25にメッシュ分割して表示することが出来た。 今回は各メッシュの部分をマウスで動かせるようにツールを作成してみる。前回の猫画像では小さ目なので、ネットで猫のイメージ検索してみました。 今回テクスチャで使用するのは、このかわいい猫ちゃんで…
前回は2枚の三角形を使用して画像を表示したのですが、画面を波のように揺らすといった複雑な表現をしたい場合、1枚の画像を細かく分割する必要があります。 多数の正方形などに分割したものをメッシュといいます。今回は、5分割の計25枚に分割してみます。 …
前回のテクスチャマッピングを理解を深めるために簡単なツールを作成してみたい。テクスチャで使用するのは、この猫画像 その前に、drawTriangle()の引数の中身を理解する必要がある。 function drawTriangle(g, img, vertex_list, uv_list) vertex_listは、…
ひさしぶりの投稿である。 1年前にやり始めたのにいつのまには遠のいてしまっていたが、ふとテクスチャマッピングってどういう仕組みなのか知りたくなったので再開する。どんな単純な多角形も三角形に分割できるので、三角形が描ければテクスチャマッピング…
座標を回転した位置を求める関数として以下を使用していた。 function rotate2d(x, y, rad) { var p = new Point; p.x = Math.cos(rad) * x - Math.sin(rad) * y; p.y = Math.sin(rad) * x + Math.cos(rad) * y; return p; } ある座標位置を30度回転した座標…
３次ベジェ曲線を使用して曲線にキャラクターを移動させた時、表示範囲の右側きりきりで半回転させようとして３次ベジェ曲線の制御点を右側最大値に設定しても曲線はそれより前に曲線が描かれてしまい、自分が想っている位置よりも間が空いてしまうわけです…
とある観賞用のプログラムを作成しているのですが、キャラクターの向きを反転させる必要がありまして、単純に向きを１８０度変更するなら簡単なんですが、車と同様に動いているものは急には向きを変更できないわけで、円弧を描いて反転させたいわけです。そ…
これはバレンタインデーに向けて作成しました。 以前から花火を作ってみたいと思っていたんですが、どうせならとバレンタインデーも近かったため、花火が昇ったらハート型に広がるようにと作成しました。 実際作ってみると自分が思い描いていたようにはなら…
前回、回転と拡大縮小と平行移動を3×3行列に合わせた式が以下になります。 回転行列 拡大縮小行列 平行移動行列 | cos -sin 0 | | sx 0 0 | | 1 0 t.x | | sin cos 0 | | 0 sy 0 | | 0 1 t.y | | 0 0 1 | | 0 0 1 | | 0 0 1 |そもそも、何故行列にしたのか？…
回転で使用した式は以下となる。 r.x = cosθ * p.x - sinθ * p.y r.y = sinθ * p.x + cosθ * p.y数学的に式を単純化してみると、 (r.x,r.y)を分けているのを「r」のみに (p.x,p.y)を分けているのを「p」のみに sinとcosが入った何かを「A」と置き換えしてみ…
昨日、作成したのを応用して頂点を４つにしました。 これで四角形が回転するようになっています。プログラム的には頂点を増やせば、何角形でも出来るようにしてあります。
昨日、「てっく煮ブログ AS3.0 で 3D プログラミングを１から勉強する (1)」をJavascriptに移植してみたが、原理を理解する前になにやら回転処理が出来てしまった。いきなり3Dをやる前に2Dで理解することにする。(x,y)の点を反時計回りにθだけ回転させる場合…
昔から3次元グラフィックに興味があったものの、数学や物理が苦手なこともあって挑戦しないでいた。 (少し挑戦したこともあったが挫折した) しかしながら、ここ数年先の将来を思うと数学や物理の知識なくしては、この先プログラマとしてやっていくのは難しい…
