koudenpaのブログ

趣味のブログです。株式会社はてなでWebアプリケーションエンジニアをやっています。職業柄IT関連の記事が多いと思います。

プラモの写真を光らせたい x Blazor WebAssembly x OpenCV

デジラマを作るほどの気持ちはないのだれど、プラモの写真を少し加工してカッコよくしたい程度の気持ちがある。

Blazorのカレンダー | Advent Calendar 2023 - Qiitaの14日目です。昨日は"ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた" を Blazor で実装してみた #Blazor - Qiitaでした。ぼちぼちHTML要素のネイティブなイベントでフォローされたい。

一応はてなエンジニア Advent Calendar 2023 - Hatena Developer Blogの14日目でもあります。こちらの昨日はid:Windymeltシンプルで使いやすいマイクロHTTPフレームワーク『Cask』を紹介するよ - Lambdaカクテルでした。←これは一昨日で、13日目はid:maiyama4iOS アプリのマルチモジュール開発とインターフェースモジュール - maiyama logでした。実践的な記事の後にプラモを光らせて笑って終わりな記事でスマン。

はてなのエンジニアの日曜プログラミング感のサンプル数1を垣間見ることができます*1

自分の趣味の大部分はプログラミングとプラモデリングで、後者の記事である好みのシェルエットのガールズプラモを作る - koudenpaのブログでは、フォトレタッチソフトで少し剣を光らせたのだが、以下のような気持ちが強い。

今の時代ならAIに「剣を青く光らせて!」と指示したらもっといい感じにしてくれそうなものだけれど、どういうAIツールなら実現できるかなど分からなかったのでとりあえずは諦めた。

もっと泥臭く、

  1. 画像中の物体検出する
  2. 物体を選択させる
  3. 深度を得て3次元データを作る
  4. 選択した物体に光源を置いてレンダリングする

このような実装をできる人ならできるような気はする。

できる人ならな。

僕には画像処理ライブラリのコマンドを叩く程度のことしかできない。

それでも、エッジ検出して再度の高い色で塗れば多少それっぽくなるんじゃないか?

スーパーファミコン時代のステータス異常的な?

というわけでそういうBlazor WebAssemblyアプリを作った。

技術選定はスマホでポチポチしたい。WebAssemblyのOpenCVをちょっと触っておきたい。程度の理由による。

こうなった。

7474.github.io

無敵か? だがこれはプラモではない

魔炎気か? だがこれもプラモではない

リポジトリ GitHub - 7474/HikaraseTatiner

感想。

  • Blazor WebAssemblyはWebブラウザで動くGUIアプリをサッと作れて便利
  • OpenCVSharp)はWebAssemblyでも結構すばやく動く
  • .NETのWebAssemblyランタイムで画像のエンコード・デコードは遅すぎて地獄(試せばわかる遅さ)(WasmのOpenCVにはPNGJPEGのエンコーダ・デコーダの実装はない)
  • ラインデバッグVisual Studioでブラウザにアタッチ)が異様に重いのが厳しかった
  • Wasmの世界でCLIラッパー経由でWasm実装のOpenCVを使う意義があるかというと謎
  • 良い感じの画が欲しいならAdobeに課金した方が良い

以上、日曜プログラミング&プラモデリングでした。


余談

皆さんの職場にガンプラはありますか?

2023年12月下旬に株式会社はてなの京都オフィスに行くと、HGUCデンドロビウムを組み立てている様子を見学できるとの噂があります。

僕にはオフィスに完成すると全長1m超のプラモデルを持ち込むクソ度胸はない(そもそも普段出社してないし)のだけれど、自宅で組むのも厳しいサイズなのは確かなので東京オフィスで競作するのも悪くはないような気がしなくもない。

目下最大の悩み事である。

*1:記事内容と仕事の関連はほぼゼロです