Fork
5
Fav
3
View
10272
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 463 lines
  • HTML 19 lines
  • CSS 46 lines

以前、作成したテクスチャマッピング入門では、2つの三角形に分割した方法でした。
テクスチャマッピング入門

今回は、4つの点からホモグラフィ行列(平面射影変換行列)を使った方法になります。
shogo82148氏のCSS3 Transform 3D Testでは、CSSで実現していましたが
Canvasを使った方法はどうすれば出来るのか挑戦してみました。

アルゴリズムに関しては、下記サイトを参照してください。
射影変換(ホモグラフィ)について理解してみる

■パラメータ説明
degreea 回転角度
0度の時に回転させる形状を保存します。
0度以外で形状を変形しても元に戻ってしまいます。
本当は、形状を回転途中で変形しても保持して回転出来るようにしたかったんですが、
面倒くさそうだし、今回の目的とは違うので追求するのはやめました。

drawType 画像補間方法
・Nearest(ニアレストネイバー)
・Bilinear(バイリニア補間)

ソースリストはTypescriptで作成し、Javascriptに変換したものにコメントを追記して公開しました。

追記 2016/10/08 glMatrix-0.9.5.min.jsがgooglecodeのサイトから消えてしまって動作しなくなっていたため、修正
"http://glmatrix.googlecode.com/files/glMatrix-0.9.5.min.js"
 ↓
"http://jsrun.it/assets/K/2/w/t/K2wty"

  • テクスチャマッピング入門 射影変換(ホモグラフィ)
  • テクスチャマッピング入門 射影変換(ホモグラフィ)

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

yaju3D

Author

静岡県島田市在住のアラフォープログラマー http://twitter.com/yaju/ http://blogs.wankuma.com/yaju/

http://jsdo.it/Yaju がログインできなくなってしまったので 別アカウントで再作成

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by