2022年2月5日土曜日
以前の記事
Virtual秋葉原建設
で紹介した画像編集ツールをリリースした。
写真などを変形し下絵にし、
マインクラフトのビル壁面などのブロック配置を
デザインするツールだ。
名前はPixelEditorで
ソースは
github.com、
ツールそのものは
github.io
で使用できる。
リリースのネックになっていたのは
「遠近法ワープ(変形)機能」。
前の記事の時はAdobe Illustratorの機能で
やっていたが、それではツールとしてリリースしづらい。
その機能は
openCV.jsにあるのではないかと調べたところあった。
cv.perspectiveTransform()で座標の変換、
cv.warpPerspective()で画像の変換ができる。
変換には3x3の行列が必要だが
cv.getPerspectiveTransform()に
対応する4点の座標を与えるだけで求めてくれる。
至れり尽くせりだ。
詳しい説明は
こちらのページ
を参照。
プログラムの機能としては、
- 画像を読み込む
- 長方形が投影された4隅の位置を指定
- 変換後の長方形の高さと幅を指定
- 遠近法ワープ
- 長方形以外はマスクして非表示
というようなことを行っている。
 |
 |
 |
元画像(フリー素材)、ビル壁面の四隅を指定中 |
遠近法ワープ後の画像。指定したビルが正面を向いている。 |
ビル以外をマスクし、ブロック枠を表示 |
今回、typescriptを使用しているのでopencv.jsは
opencv-ts
を使用した。
インストールは簡単だし、型定義に加えて
opencv.js本体も含まれているので便利だ。
opencv.jsの画像データはopencvのデータ形式で
javascript/canvasから見ると特殊だが、
cv.imshow()でcanvasに直接書き込むことができる。
それを直接表示してもいいが、canvasの画像は他のcanvasに
拡大縮小なども含め自由に描画できるので
一旦非表示のcanvasに書込み、設定した拡大率などで表がしてやると
画像の拡大・縮小なども自由にできて便利だ。
PixelEditorには、近い色のブロックを自動配置する機能も実装した。
ビルの画像を1m x 1mのブロックで置き換えるので、元のビルの画像を
再現しているようには見えないが、近い色のブロックを探すのには便利だ。
Virtual秋葉原建設は、ビル建設から秋葉原駅建設に移り、神田川の
掘削などを行った。Java版マインクラフトで F3 + C キーで
プレーヤーの座標がクリップボードにコピーされることを最近知った。
このデータを読込みブロックを選択・表示する機能を
ChizuCraftに追加したところ大変便利になったので
Virtual秋葉原の地図拡張ブームが始まってしまった。
また道路の路側帯等の表示もやりたいが現状では面倒なので
これも航空写真を利用した支援機能をChizuCraftに追加したい。
やりたいことをいろいろ思いつくので
長く楽しんで行きたいと思う。
なお、Virtual秋葉原の進捗は
#Virtual秋葉原建設 というタグで時々ツイートしている。