EMC2NARY

#PlayCanvas

Web 1st GameEngine.

私のキャリア家系図を棚卸してみた

2026年7月31日(金) 7時51分41秒 | 41 view

#キャリア🧭#思想💭#PlayCanvas

最近、家系図ビジネスというのが流行っているらしいです。自分の祖先が何をしていた人なのかを調べてくれるサービス。私はもともとこういうのがけっこう好きなタイプです。ルーツが分かるとなんだか安心するというか、単純に面白い。 で、ふと思いました。これ、血のつながりだけじゃなくて、キャリアでもできるんじゃないか、と。自分がいま持っている技術や職能は、どこの誰から流れてきたものなのか。系図にして並べてみたら、思ったより綺麗にまとまってしまったので、せっかくだから記事にしてみます。 先に言っておくと、そんなに高尚な話ではありません。ただの自己満です。棚卸ししてみたら妙にしっくりきた、という、それだけの話です。 一点だけ。この記事は事実（実在の人物・製品・出来事）に、私自身の見立て（家系図・血・遺伝といった比喩）を重ねて書きます。事実は事実として、見立ては「こう捉えると腑に落ちる」という話として読み分けてもらえると嬉しいです。今回はAIにかなり手伝ってもらって調べたのですが、そのおかげで自分でも知らなかった先祖のつながりがいくつも出てきて、新しい視点をもらえました。それも自分の実感と紐づけながら書いていきます。

3D Gaussian Splattingで作成したplyデータのもやもやを超簡単に取る

2023年11月1日(水) 8時29分10秒 | 3442 view

#3DGaussianSplatting✨#PlayCanvas#tips💡

3D Gaussian Splatting超楽しい 3D Gaussian Splatting 楽しいですね、気づけば動画を取りまくってしまいます。 {{bench}} ただ一点、作成した際に対象物の周りに、意図しない点群データがあるせいで視界がモヤモヤしてしまうことがあります 上記サンプルでいうと、ベンチだけで良いのに周辺データがモヤモヤ入ってしまっています。 この問題を修正するにはplyデータが編集できる環境が必要でした（無料のものでいうとblenderなど） ただこの方法だとblenderのインストールが必要ですしそこそこスキルが要求されるので面倒でした SuperSplat WebGLゲームエンジンのPlayCanvasがここ最近splat対応をゴリゴリ進めていて、その中でSuperSplatなるプロジェクトを開始しました こちらを利用するとブラウザでplyの表示ができるだけでなく、編集もできてしまいます もやもやも取ることができるので、ブラウザ環境だけで3D Gaussian Splattingで作成したデータの修正ができます！ 今回はその方法を紹介します SuperSplatライブデモ SuperSplatは以下のURLにライブデモとして公開されています。アカウント作成など不要で誰でも無料で使うことが出来ます。 Luma AIなどで作成したplyデータをドラッグアンドドロップでアップロードします アップロードが終わると点群データが表示されます 青く表示されているのが点群データです。 モヤモヤが多くあることがわかりますね 対象物を中心に球状にくり抜く まず対象物（今回はベンチ）だけ中心に周囲を不要なものとして球状にくり抜いてしまいます。 左のメニューから Selection > SphereのラジオボタンをONにします するとこのように球が表示されます 左側メニューのSphere横のパラメーターから自分がほしい範囲にかさなる用にSphereのサイズを変更します こんなふうにほしい位置に球が重なればOKです。 次にSet, Add, Remove..とボタンが並んでいる箇所から「Set」を押します すると球内に入っている点群が選択され黄色になります そして次に「Invert」ボタンを押して選択範囲を逆転させます。 これで球外にある点群が全て選択された状態になりました これらは全て不要なので、Scene > Delete Selected Splatsを選択してすべて削除します するとこのように指定の範囲だけの点群のみになりました 範囲指定して点群を取り除く 範囲指定内にくり抜いてもまだもやもやが残っています。 その倍は「Rect」ボタンを押して範囲指定削除を行います 削除したい範囲（今回は上部黄色い点群）だけが独立しその他の点群と重ならない状態にカメラを移動します 「Rect」ボタンを押下すると矩形選択モードになります。マウスをドラッグして削除したい範囲を枠で囲みます 矩形に含まれる部分が選択されるので「Delete Selected Splats」を押下して削除します この作業を繰り返して不要なもやもやを削除します ダウンロード 完成したらExport to > Ply fileからplyデータでダウンロードできます ダウンロードしたplyファイルはPlayCanvas Viewer で表示できます これでブラウザで完結して3D Gaussian Splattingが作製、編集、表示ができるようになりました！ 個人的にはこれでHubサービスでも作ってみたいなと思います。

PlayCanvasを使用してLooking Glassアプリを作成する：Looking Glass WebXR SDKの利用ガイド

2023年6月9日(金) 23時55分47秒 | 103 view

#PlayCanvas#tips💡#開発👨‍💻

demo 実施手順 Looking Glass Portraitの準備 Looking Glass Portraitを用意し、電源とHDMIを接続します。電源をONにすると、LookingGlassのLEDが青色に点滅します。 Looking Glass Bridgeのインストール Looking Glass BridgeはLooking Glass Factoryのウェブサイトからダウンロードしてインストールします。インストール後、タスクバーのLooking Glass Bridge iconをクリックしてLookingGlassをリセットし、デスクトップを表示します。 LookingGlass用のPlayCanvasプロジェクトの作成 PlayCanvasで新しいプロジェクトを作成します。プロジェクトのテンプレートとして、Model Viewer Starter Kitを推奨します。 プロジェクト内でのスクリプトとHTMLの作成 プロジェクト内で、スクリプト(LG.js)とHTML(LG.html)を作成します。 LG.htmlの作成 LG.htmlを以下のように記述します。 import { LookingGlassWebXRPolyfill, LookingGlassConfig } from " const config = LookingGlassConfig config.tileHeight = 256 config.numViews = 20 config.targetY = 0 config.targetZ = 0 config.targetDiam = 3 config.fovy = (14 * Math.PI) / 180 new LookingGlassWebXRPolyfill()LG.jsの作成 LG.jsを以下のように書き換えます。 var Lg = pc.createScript('lg'); Lg.prototype.initialize = function() { pc.app.xr._available["immersive-vr"] = true; var htmlAsset = this.app.assets.find('LG.html'); var div = document.createElement('script'); div.type = "module" div.innerHTML = htmlAsset.resource; document.body.appendChild(div); htmlAsset.on('load', function () { div.innerHTML = htmlAsset.resource; }); }; Lg.prototype.update = function(dt) { if(this.app.keyboard.wasPressed(pc.KEY_ENTER)){ this.camera.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR); } };アプリケーションの実行 アプリケーションを実行し、エンターキーを押すとLookingGlass用のコンテンツが別ウィンドウで再生されます。そのウィンドウをLookingGlassに移動させ、F11キーを押します。 以上で、LookingGlass用のPlayCanvasアプリケーションが実行されます。 動作原理 webxr.jsはWeb標準のWebXR APIをラップし、オープンソースで提供されています。このライブラリは3Dエンジンに依存せず、カメラの位置を取得し、複数のレンダリングを立体視可能な画像に変換して出力します。 LookingGlass用のウィンドウはマウスイベントの受け取りと最終レンダリングを行います。実質的には、このウィンドウはPlayCanvasのLaunchタブそのものです。そのため、タブを閉じたりバックグラウンドに移動すると、動作が停止します。また、複数のレンダリングを行うため、描画負荷が増大する点には注意が必要です。 問題点 PlayCanvasでアプリケーションを実行すると、webxr.jsにより定義されたcanvasのサイズ変更アルゴリズムがBufferの問題で誤った数値を出力する可能性があります。その結果、画像が意図せずにトリミングされる可能性があります。立体視画像の生成には複数の画像が必要なので、一部の画像が欠落したり黒くなったりすると、立体視が一部見えなくなる欠点があります。この問題は、canvasのサイズをオーバーライドすることで一時的に対処可能です。 まとめ 裸眼立体視技術は以前から存在していましたが、その技術を5万円程度の手頃な価格で利用できるポータブルデバイスに組み込み、しかもWeb技術のみで実行可能という点で、その革新性を感じます。Bridgeの導入などまだ一部制限はありますが、Webとの接続性により、環境構築の手間が減少し、さまざまなAPIとの接続によるコンテンツ開発が進むでしょう。

【マジカルミライ2023 プログラミングコンテスト】PlayCanvas製リリックアプリ StarterKit - DEMOを公開しました

2023年4月19日(水) 2時15分36秒 | 178 view

#マジカルミライ プログラミングコンテスト#PlayCanvas#リリース🎉

今年も開催されるマジカルミライ2023プログラミングコンテスト向けに、PlayCanvasですでにTextAlive App APIと今年の対象楽曲がセットアップ済みのStarterKit - DEMOを公開します。

PlayCanvasのOrbit-cameraを制御して指定位置にカメラを移動させる

2023年2月27日(月) 10時7分43秒 | 369 view

#PlayCanvas#開発👨‍💻#tips💡

PlayCanvasのStarter Kitで用意されている「Model Viewer Starter Kit」では360°ビューワーを簡単に作る事ができますが、常にインプット情報からカメラ位置を制御しているため、スクリプトやボタンで指定位置にカメラを移動する方法にやや癖があります。 この記事ではスクリプトからorbit-camera.jsを利用した状態で指定位置にカメラを移動する方法を説明します。 これを使うとコンフィギュレーターなどを開発する際に、基本は自由移動でボタンを押したときだけ特定の部品に寄るなどの処理ができるようになります。

PlayCanvas Editor APIで面倒な作業を自動化する

2022年4月18日(月) 6時39分30秒 | 199 view

#PlayCanvas#tips💡

この記事は「PlayCanvas | GWアドベントカレンダー」8日目の記事です。 PlayCanvas Editor APIが便利です。 ユーザーマニュアル（触りはこちら） ドキュメント（詳しく調べる場合はこちら） 本記事ではGUIでやると超大変だけどEditor APIでやると楽勝になることを紹介します

3Diframe x model viewer starterkitを利用したときに右クリックでブラウザメニューが出るのを防止する

2021年1月15日(金) 13時58分32秒 | 26 view

#PlayCanvas#tips💡

@yausterの3Diframeサンプルを利用して3Diframeを実装すると、model viewerで右クリック→ドラッグ操作でPANをしたときに、メニューが出て煩わしいことがあります。 iframe-plane.jsのinitialize()内に以下コードを追加するとメニューが出力されなくなります document.body.oncontextmenu = function () { return false; }; なんでこれサンプルに含まれていなかったんだろう。。。PlayCanvasにプルリクの機能があればしたい。。。

【Web表現チェンジャー】PlayCanvasに追加された3Diframeサンプルが控えめに言ってヤバい

2021年1月13日(水) 15時21分41秒 | 126 view

#PlayCanvas#開発👨‍💻#VOXELCANVAS

最近PlayCanvasで3Diframeのデモが@yausterによって追加されました これがなかなかに面白い機能でPlayCanvasの3D空間内に好きなだけiframeでWebページを埋め込めてしまうのです。 バーチャルゲームセンターも実装できた これをもう少し工夫すればバーチャル美術館とか、展示場とか、何でもできそう。 ポートフォリオもこれで構築すればすごい差別化できそう。 しかも実装はスクリプトを板ポリにアタッチしてattributeでURLを指定するだけ。すごい。 実装自体はCSS3Dでやっていて、PlayCanvasの3D座標系とCSS3Dの3D座標系を完璧に正しくマッピングしきっている。美しい。。 また3D空間でCSS3Dの前にEntityが映り込んだ際は正しくCSS3Dがエンティティ背景に回り込むようになっていて、より没入感を高めている。これはすごすぎる。。。 なおこちらの3Dモデルは全部VOXELCANVASでちゃっちゃっと作成。リソース作成からアプリ開発、デプロイまで全部Webでできてしまった。。。 VOXELCANVASではvirtual-deskkitというタグでパブリック公開中。ぜひダウンロードして使ってみてね。 これで好きなYouTube動画に囲まれるWebサービスとか作ったらおもしろそう。 YouTubeで検索ワード入れたら候補の動画が10個くらい帰ってくるようなAPIないかな 試してみたい。

健康生活

2020年11月5日(木) 14時57分32秒 | 20 view

#日常👨‍👩‍👧‍👦#開発👨‍💻#PlayCanvas#仕事🖥️

送り迎え 今日試しに保育園の送り迎えをどちらも歩いて行ったところ、合計13000歩、9.5km踏破していた。このうち半分は息子を担いで歩いている。 今日の体感としては、慣れれば楽になりそうだと思った。だが、早めにいい靴がほしい。 仕事 仕事の方は、3回目のPlayCanvas Japan TVを配信した。今日のテーマは「PlayCanvas 日本の歩み」と言う事で、色々振り返ってみた twitter埋め込み実装 ブログについてTwitter埋め込みがかんたんに実装できた。 だがwiget.jsの読み込みが走らないと処理が開始されないためF5を押さないと表示されない。 なんとか外部からメソッドを叩けるといいのだが… 次回実装予定 [2020/11/06 追記] twttr.widgets.load()で実装完了 twtterはwidgets.jsを読み込んでいればグローバルに存在している まとめ 今日はようやくルーチン化してきて早めに終わったのでこの時間に就寝。 おやすみなさい。

8時間ゲームジャム

2020年10月26日(月) 11時45分38秒 | 28 view

#PlayCanvas#ゲーム🎮

PlayCanvasで4人、8時間でゲームを作りました。 こちらからプレイ！ 制作風景はこちら 楽しかった。 あとやりたいことリスト undo完成させる スピードアップ、ダウン 広場で休憩