はてなブックマーク

AR FoundationでPeople Occlusionを試しました。 実装方法にたどり着くまでに結構遠回りしたので、知見として共有しておきます。 People Occlusionとは Native App（Swift）のサンプルを動かしてみる AR Foundationで試す AR Foundation 3.1以降の場合 AR Foundation 3.0.1の場合 AR Foundation 2.2〜3.0.0の場合 AR Foundation Samplesを見てみる HumanStencilを表示する HumanDepthを表示する シェーダーを利用してPeople Occlusionを実装する とりあえず動かしてみる シェーダーの動作を理解する おわりに People Occlusionとは ARKit 3の新機能の1つとして公開されたもので、カメラ映像から人を検出してオクル

前回の続きで、物体検知＆セグメンテーションのライブラリ調査です。 最終的にはモバイルARで使う想定で評価しています。 ↓前回 jyuko49.hatenablog.com はじめに DeepLabの特徴 DeepLabの環境設定 ライブラリのインストール サンプル実行 コードを読んでみる テストスクリプトの作成 静止画（ローカルファイル） リアルタイム動画 性能比較 実行環境 Mask R-CNN 処理結果 処理時間（sec） DeepLab 処理結果 処理時間（sec） 結果まとめ 今後 はじめに Mask R-CNNをカメラでキャプチャしたリアルタイムの動画に適用したところ、すごくカクカクで思うように速度が出ませんでした。 GPU性能を活かせば速くなるらしいのですが、モバイルARで使うとなると、マシンスペックに頼るのは難しいです。 そこで代替のライブラリを探したところ、以下の動画を見つ

AR x AIで使えそうなMask R-CNNというOSSを教えてもらったので動かしてみました。 github.com Mask R-CNNでできること 環境構築 Jupyter Notebookのインストール 必要ライブラリのインストール COCO APIのインストール コードを読んでみる In[1] In[2]: Configurations In[3]: Create Model and Load Trained Weights In[4]: Class Names In[5]: Run Object Detection 使ってみる 結果の画像を表示する 検知結果の中身を確認する rois masks class_ids scores コードを書く 矩形の描画 ラベルとスコアの描画 マスクの描画 実行結果 完成版のコード 今後 リアルタイムの動画でテストする Unityで使えるか調べ

久々の投稿デス。 WebXRやろうかなと思ったのですが、手持ちのARCore対応デバイスがAndroid7.xのため試せず・・・で気分転換にWebVRをやりました。 はじめに three.jsでVRMを扱う UniVRMでエクスポートする ボーンアニメーションで動かす three.jsのシーンをWebVRに対応させる Daydreamコントローラーを使う Gamepad Extensionsを有効化する Ray Inputで代用する 空間内の移動を実装する まとめ はじめに three.jsに関する基礎知識を持っている前提で書いているので、three.jsをさわったことがない！という方は、他の記事やサイトも合わせて読んでください。 開発環境については、以下となっております。（WiFiルータ経由でローカル通信） Webサーバ Macbook Pro http-server クライアント AS

ARの開発環境では、Unityがデファクトスタンダードだと思いますが、Unityに使いにくさを感じることもあり、Unreal Engineも試してみることにしました。 そもそもなんでUnityを使ってたんだっけ？ Unityのつらみ Unreal EngineのAR対応 ARKit ARCore UEでARプロジェクトを作る プロジェクトテンプレートから作る ARCoreのサンプルプロジェクトを使う その他UE関連 ヒストリアさんのブログが半端ない Unity引っ越しガイド まとめ 結論 そもそもなんでUnityを使ってたんだっけ？ ARを始めた当初（といっても1年半くらい前ですが）、最新のARデバイスと言えばHoloLensとTangoで、ネイティブ環境を除くとどちらも開発環境がUnity一択でした。 元々はUnityを一度も触ったことがなくて、積極的に選択したという訳ではなかったと思い

アプリをストア申請するにあたり、Webサイトがあった方がよさそうだったのでVue.jsで作りました。制作期間は2-3日くらい。 jyuko's playground Vue.js JSフレームワークを選定するにあたり、軽くて扱いやすいライブラリを用いたかったので、Vue.jsにしました。 jp.vuejs.org Angular.jsとReact.jsは今までに触ったことがあるのですが、いずれも学習コストは若干高めに感じましたし、Reactに至ってはJSXとなかなか仲良くなれない。 せっかくならば・・・と使ったことのないVue.jsを試してみたら、かなり良かったです。 Vue.jsの特徴としては、 軽い 扱いやすい 拡張性がある 軽量なライブラリの方が、サイト表示のレスポンスを向上させやすく、AWSなどのクラウドサービスで運用する際に通信量＝コストを抑えられます。 Vue.jsのインストー

先日Vue.jsで制作＆公開したWebサイトは、AWSでお安く運営しています。 Vue.jsでWebサイトをサクッと作る - じゅころぐAR Vue.jsで作ったサイトをPWAに対応させてみる - じゅころぐAR 構成はよくある"静的WebサイトのS3ホスティングパターン"ですが、必要な設定を全部まとめておきたかったので書きます。 構築手順 独自ドメインを取得する SSL/TLS証明書を取得する S3バケットを作成する CloudFrontを設定する Route53にサブドメインを登録する S3アップ時に自動でCache Invaridationを行う 請求アラートを設定する メリット 機能面 コスト面 まとめ 構築手順 2018年4月時点の画面および手順です。 ※Managed ConsoleのUIは頻繁に変わるので注意 独自ドメインを取得する "Route53"を選択し、Domains

2018年はPWA(Progressive Web Application)が注目されつつあるので、先日Vue.jsで作成したWebサイトをPWA対応させてみたいと思います。 jyuko49.hatenablog.com PWAとは？ PWAのメリット SPAのアプリ化が簡単 WebのOSSを使い放題 Webアプリの機能を拡張 PWAに対応する Vue.jsプロジェクトをPWAボイラープレートで作成する アイコンを作る Lighthouseでチェックする PWAを動かしてみる iOS11.3 Android7.0 まとめ PWAとは？ "ホーム画面に追加"を行うことでネイティブアプリのように動作するWebアプリケーションです。オフラインキャッシュで快適に動作したり、Webプッシュ通知が受けられたりします。 Googleが提唱していた技術で、以前から気になってはいましたが、Microsoft