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

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

テクスチャマッピング

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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