デジタル・デザイン・ラボラトリーな日々

アラフィフプログラマーが数学と物理と英語を基礎からやり直す。https://qiita.com/yaju

2013-01-01から1年間の記事一覧

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

パネルを3D回転させるようなことをやってみたいなと思っていたので作成してみました。 jsdo.itで見かけるものはパネルを三角形で分割して処理しているので、これを三角形で分割しないで射影変換で処理して表示してみます。 Image 3D rotation - jsdo.it Imag…

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

射影変換についてツールも作成して、まーそれなりに理解は出来てきたわけですが、初回の記事で取り上げたHomography HIDIHO!サイトの射影変換の下記ソースリスト(actionscript)の疑問が残っていたわけです。(cv.jsのgetPerspectiveTransformも同様) static p…

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

今回は、透明画像の対応について説明します。今回、使用する透明画像はこのボール(png形式)になります。 背景画像には、このかわいい猫ちゃんを使います。 前回のプログラムのままでは透明画像に対応していないため、ボールの周りが黒色になってしまいます。…

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

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

今まで射影変換するにしても、入力画像より小さくする方向しかパラメータを変更してませんでしたが、いざ、大きくしようとすると画像の位置が取れないために例外エラーになってしまいましたので、これを修正していきます。 また、入力画像の表示位置を原点(0…

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

画像補完の予定でしたが、その前段階でおかしな現象を見つけてしまいました。 「射影変換(ホモグラフィ)について理解してみる その4」から射影変換のパラメータを逆行列変換して描画処理に渡していました。ところが今頃気が付いたのですが、その方法では実…

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

前回は、自前の行列クラスを使用して射影変換を行いましたが、Javascriptの行列演算用のライブラリが有志によって公開されています。 glMatrix.js mjs.js minMatrix.js tmlib.js Sylvester.js closure TDL J3DIMath.js(以前はCanvasMatrix.jsという名前だっ…

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

前回までは、代数ライブラリsylvesterを使用して行列計算を求めてきましたが、今回は代数ライブラリを使わずに8次元連立方程式を4x4行列で求める方法を説明します。ARToolKitを参考に様々な言語に実装し直したARToolKit互換のクラスライブラリNyARToolKitの…

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

前回は、転送元座標と転送先座標を内部的に入れ替えて射影変換パラメータを求めて画像に穴が空かないように表示していました。 しかし、下記サイトのCSSのtransformで渡している8個のパラメータを求める際には、特に転送元座標と転送先座標を入れ替えたりし…

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

前回は、代数ライブラリを使って8個のパラメータを取得しました。今回は、8個のパラメータを使って画像を変形して表示させます。 CSSでは、matrix3dに3x3の正方行列として9(8+1)個のパラメータをセットして画像を変形して表示していましたが、これをmatrix3d…

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

前回の続きです。 ただ、私としては台形に変形させたいので、8次元連立一次方程式を解いた方式をさらに模索していた中で、下記サイトを見つけました。 ホモグラフィ- Shogo Computing Laboratory 内容的には私が目指していたものですが、残念なのは中身はCSS…

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

「3Dを基礎から勉強する フラットシェーディング」の記事を書いて、次は立方体のテクスチャマッピングに取り掛かろうと思ったんですが、ふとアフィン変換で台形は出来ないってことを書いたことを思い出したんです。テクスチャマッピングについては、「テクス…

2元連立1次方程式の解法

文字係数を使った2元連立1次方程式の解き方の理解が乏しかったので、解法を学んでいく。 2元連立1次方程式なので、未知数が2つある連立1次方程式です。連立方程式 このように未知数以外に文字係数となっている場合にどのように求めるのか?連立方程式の…

逆行列を理解してみる

画像の変形処理を行う上で逆行列を行う処理があり、理解がとぼしいためか頭が混乱してきます。 以前、テクスチャの仕組みを理解しようとした際にも、逆行列が出てきました。あらためて、逆行列とはなんなのかをイチから理解していこうと思います。 行列には…

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3Dを基礎から勉強する 行列の導入

このブログの最初の記事が2011/12/30の「3Dを基礎から勉強する」の記事でした。3Dを理解する前に2Dを理解しないとねってことで月日が経ってしまったわけですが、2Dの理解も深まったので、ようやく3Dの勉強に本格的に入ることにしました。再度、「てっく煮ブ…

画像の回転処理 穴が空かない方法

今回は、画像をCanvasのRotateメソッドを使用しないで自前で回転させてみます。 使用する画像は、いつもの猫画像です。 画像の回転は、画像を構成する全ピクセルの回転後の座標を計算して点を打つだけです。回転をする場合の入力点(x1,y1)を、画像の中心(cx,…

テクスチャマッピングを理解してみる その4

前回は25にメッシュ分割して表示することが出来た。 今回は各メッシュの部分をマウスで動かせるようにツールを作成してみる。前回の猫画像では小さ目なので、ネットで猫のイメージ検索してみました。 今回テクスチャで使用するのは、このかわいい猫ちゃんで…

テクスチャマッピングを理解してみる その3

前回は2枚の三角形を使用して画像を表示したのですが、画面を波のように揺らすといった複雑な表現をしたい場合、1枚の画像を細かく分割する必要があります。 多数の正方形などに分割したものをメッシュといいます。今回は、5分割の計25枚に分割してみます。 …

テクスチャマッピングを理解してみる その2

前回のテクスチャマッピングを理解を深めるために簡単なツールを作成してみたい。テクスチャで使用するのは、この猫画像 その前に、drawTriangle()の引数の中身を理解する必要がある。 function drawTriangle(g, img, vertex_list, uv_list) vertex_listは、…

テクスチャマッピングを理解してみる

ひさしぶりの投稿である。 1年前にやり始めたのにいつのまには遠のいてしまっていたが、ふとテクスチャマッピングってどういう仕組みなのか知りたくなったので再開する。どんな単純な多角形も三角形に分割できるので、三角形が描ければテクスチャマッピング…

スポンサーリンク