2023-02-08
VRと違ってリアルなその場の空間を使えるのが便利なAR。three.jsサンプルにあったVRでハンドトラックするアプリをAR化しました。Quest1/2/Proでご覧ください。(Meta社からリリースされたエミュレーター「Immersive Web Emulator」でもいけるかも?)


「AR-handbutton」
src on GitHub
目の前に浮かぶトーラス形状。 まずは手をゴーグル前にかざして、ARな手を呼び出します。 手元の3つのバーチャルなボタンを手で押すことでその色を変更できます。

VRButtonをARButtonに変更し、scene.backgroundを設定しないようにして、THREE.WebGLRendererの生成時に alpha: true を加えるのがポイントです。(commit log)

ARでハンドトラックすると未来感が増します。

福井で見たい方、週末のイベントへどうぞ!
Tokyo OSS Party!! 2023 Day 1 福井会場の編集 | Peatix
東京で見たい方、再来週のイベントへどうぞ!

「電脳メガネサミット in Tokyo」

links
- 楽しいARデモの改造から始めるJavaScript入門 - HTML内のimportmapをごっそり書き換えるsetimportmap

2023-02-07
GeoFUKUIメンバー、福井高専の先生より提供してもらった1948年、史上初の震度7、福井地震後の2枚の航空写真。視差を付けると立体視できるので、AR/VRデバイスで表示するアプリを作りました。


「AR/VRで見る1948年「福井地震航空ステレオ写真」 with three.js」
src on GitHub
3Dライブラリthree.jsで作ったプログラムはindex.html、1ファイル。右目用と左目用の 1m x 1m の板(THREE.PlaneGeometry)を作って、テクスチャーをそれぞれに出し分けています。

近寄って見ることもでき、リアリティーあります(視差が大きすぎるので、高さが強調されすぎて見えます)。ぜひVRデバイスでご体験ください!

links
- 福井の地盤オープンデータを活用するプロジェクト「GeoFUKUI」ハッカソンレポート
- VR東尋坊 - 東尋坊をフォトグラメトリで3Dモデル化、VR Tojinbo on GitHub

2023-02-06
インキュベイトファンドの新年会。

実はすごい日本。日本の得意のつなげる力。まだまだチャンスあり!


未来のメガネアプリ、AR例の鐘、好評!
ご興味ある方「電脳メガネサミット2023 in Tokyo」へぜひ!


お土産の枡と、チロルチョコ。本間さんでした!


ペットボトル上だと全体スキャンできるかも?


Scaniverseで3Dスキャン。そこそこいい感じに撮れたので、アプリ内でクロップ編集。


デジタルツイン、完成!


「AR-cube」
src on GitHub
早速Three.jsのサンプルを活用して、ARでじっくり見られるようにしました。トリガーオンでバババッと景気よく飛ばす機能付き。お手持ちのVRデバイスでご覧ください!


謹賀新年!こちらも3Dスキャンすればよかった!


日本から世界へ、インキュベイトファミリー!

2023-02-05
C言語、C++、C#、Python、Rubyなどは使っているけどJavaScriptはあんまり・・・という人でVR/ARに興味がある方は、ぜひこちらのデモをVRデバイスで見てみましょう!

「three.js examples - webxr」
src on GitHub
three.jsで作られたWebXR(WebVRとWebAR)のサンプルが楽しめます!

three.jsは、WebXRにも対応したオープンソースの3Dライブラリ。ESモジュールでできているのでimportするだけで簡単に開発可能です!追加ライブラリ(addons)の扱いが面倒だったので、forkしてGitHub Pagesにて公開。

まだSafariでは対応していない script type="importmap" を使っているので、polyfillとしてes-module-shimsが使われていました。


「setimportmap/README.md at main · code4fukui/setimportmap」

デモをHTMLをコピーしてそのまま改造して楽しめるように、addonsのimportmapもまとめて書き換えるツール、setimportmapを作成しました。

WebXRで未来のメガネづくりを楽しみましょう!


2023/2/21「電脳メガネサミット in Tokyo」開催です!

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS