[B! 画像処理][Web] otori334のブックマーク

otori334 id:otori334

画像処理とWebに関するotori334のブックマーク (6)

WebGPUとRustでネコチャンを点描した話
はじめに昨年１２月にこんなツイートを見かけました。かわいいですね。幸いにして論文と実装が公開されていたので、自分でもやってみようと思って、その結果を書いたのが前回の記事です。読んでいただければわかるとおり、前回の記事の中ではGPUを使わずにアルゴリズムやデータ構造を工夫して近似的に計算しています。結果の画像についてはそんなに悪くないと思っていますが、限界もありました。パーティクルの数も少ないし、一部の画像ではうまく行きませんでした。やっぱり、もっとちゃんとネコチャンを点描してみたいですよね。なので、今回の記事ではGPUを使ってアルゴリズムを再現し、よりヴィヴィッドなネコチャンの点描を作成しようと思います。GPUを使って計算するために、WebGPUのRust実装であるwgpuを使用します。ネコチャンの画像を点描にしたい人と、WebGPUに入門してcompute shaderで何か計
otori334 2022/05/03
Web

画像処理

アルゴリズム

シミュレーション
リンク
なぜGoogle Meetの背景ぼかしが最強なのか（一般公開版）
はじめに最近ついに、Google Meet に背景ぼかし機能が利用可能になりましたよね。日本語だとインプレスのケータイ Watchの記事などで紹介されてます。確か 2020 年 9 月末前後で順次リリースされていたと記憶しています。このときは「背景ぼかし」の機能しかなかったのですが、最近（私が気づいたのは 2020/10/30）更にアップデートされました。アップデートで「背景差し替え」機能が付いて、ぼかし機能もぼかし効果が強弱 2 つから選べるようになりました。まだ日本語のニュース記事は見てないですが、Googleによるアップデートの発表はちゃんとされています。そして、Google AI Blog でBackground Features in Google Meet, Powered by Web MLという記事が公開され、実装についての解説がされました。この記事はその解説記事を
otori334 2022/02/14
機械学習

画像処理

Web
リンク
ブラウザで動くリアルタイム画像/音声処理アプリをStreamlitでサクッと作る
Overview 画像/音声処理をリアルタイムで行う、Webブラウザから利用できるアプリをStreamlitで作る方法を解説します。 StreamlitのおかげでPythonだけでwebアプリが作れます。さらに、一番簡単な例なら10行程度のPythonコードで、webカメラを入力にしてブラウザから利用できるリアルタイム画像処理アプリケーションになります。 Webベースなのでクラウドにデプロイでき、ユーザに簡単に共有して使ってもらえ、UIもイマドキで綺麗です。人物・物体検知、スタイル変換、画像フィルタ、文字起こし、ビデオチャット、その他様々な画像・音声処理の実装アイディアをデモ・プロトタイピングするのになかなかハマる技術スタックではないでしょうか。 Webブラウザから利用できる物体検知デモの例。実行中に閾値をスライダーで変えられる。オンラインデモ🎈 同様にスタイル変換デモの例。実行中にモ
otori334 2021/12/09
Web

Python

信号処理

音

画像処理
リンク
HTMLファイルの中に画像を埋め込んで表示させる方法 [ホームページ作成] All About
ウェブページ内に画像を表示する際、一般的にはHTMLファイルと画像ファイルは別々に存在します。例えば、index.html ファイル内に記述されたHTMLソースから画像として image.png ファイルが指定されている場合は、index.html と image.png は別々に存在するファイルです。当たり前ですね。そもそも、HTMLファイルはテキストデータなのに対して、PNGやJPEGなどの画像ファイルはバイナリデータです。ですから、画像とHTMLを1ファイルにまとめることはできなさそうに思えます。 ※テキストデータ：人間に読める文字だけで構成されたデータ。 ※バイナリデータ：人間用ではない(画面に表示できない)文字などを含んだデータ。
otori334 2021/08/10
画像処理

Web
リンク
SVGで「文字を書いていくアニメーション」を作る – コーヒーサーバは香炉である
かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。テクニックの概要はこんな感じだ。「ものすごく荒い破線で線を表示し、破線のオフセットがちょっとずつ変化するようにする」ステップ0 : 破線を使って「書きかけの線」を作るこちらはベジエ曲線1本で作った「の」である。ソリッドな線で表示される。SVGのソースはこんな感じだ。 <?xml version="1.0" encoding="UTF-8" standalone="n
otori334 2021/07/25
画像処理

フォント

G-Code

Web
リンク
SVG画像のHTMLでの使い方 | バシャログ。
こんにちは。koyaです。今回は「コロナに負けない！シーブレイン的、withコロナ時代の楽しみ方」でも使用したSVG画像の使い方について説明をします。 svgを使用した理由今回は牛の肉の部位毎にマウスホバーの判定が欲しかったため、svgを使用しました。もしpng画像を使用すると、透過された部分にも画像の判定が入ってしまいます。その点svgを使用すると動画のように見た通りの範囲のみ判定があるため、今回のようなケースではsvgを使用します。 svg画像の出力今回はAdobeXDを使用したsvg画像の出力を行います。書き出す際の設定は下の画像のように形式→svg スタイル→内部CSS 画像を保存→リンクと設定します。ファイルサイズの最適化については、ファイルサイズを縮小したものは改行が消えたり、pathのidが消えてしまうのでもしコードを参照する場合はチェックを外した方が使いや
otori334 2021/03/02
“png画像を使用すると、透過された部分にも画像の判定が入ってしまいます”

画像処理

規格

Web
リンク
1