-
gltf (.glb)ファイルをbabylon.jsを使ってWebサイト上に表示する方法
"3Dデータにおけるjpeg"と呼ばれる gltf を、Babylon.jsを使ってWeb上で表示する方法について紹介します。 サンプル Babylon.jsではcanvas要素を利用して3Dレンダリングを行います。背景を透過させることが出来ます。 基本形 <!DOCTYPE html> <ht... -
【Babylon.js】カメラについて
Babylon.jsには複数のカメラタイプがあります。必要に応じて使い分けましょう。 カメラの種類特徴Universal CameraいわゆるFPS風のカメラです。自身の視点を中心に、canvasを描画します。Arc Rotate Camera指定した位置座標をカメラの中心にとらえ、canvas... -
Promiseとasync/awaitについてメモ
久し振りに使おうとしたときに忘れていたので備忘録。 Promise await/asyncを使おうとか、アロー関数式での表現とかありますが、まずこのPromiseに立ち返った方が良さげ。 そもそもPromiseとは プロミス (Promise) は、作成された時点では分からなくてもよ... -
Project PLATEAU WebXR2 「 新 宿 」
前回の浅草に引き続き、今度は新宿を表示してみようと思います。データのダウンロードやBabylon.jsでのWebXR表示については前回やりましたが、今回はLOD2という建物の外観も含めた詳細なデータを表示してみることにします。 https://yumenomoto.com/blog/p... -
Project PLATEAU WebXR
国土交通省 都市局が公開している3DデータをWebXRで表示してみたいと思います。 こちらに目次がまとめられています。https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku 3次メッシュ、4次メッシュとは これはグローバルに一般的なハナシではなく、... -
Babylonjsで扱うことの出来るファイルフォーマットについて
Three.jsでは、非常に多くのファイルを扱うことが出来ます。https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders 一方で、Babylonjsがデフォルトでサポートしているファイル形式は多くありません。むしろかなり絞っています。これは方針の... -
Laravelでデータベースからselectした結果を使ってwhere検索する方法
とあるテーブルのデータを用いて、さらに別のテーブルのデータを取り出そうとしたのですが思った通りの結果が出ず。。JoinしたりleftJoinしているうちに何がなんだか分からなくなり、地道に組み立てようとするもソレにも時間がかかったので忘備録としてメ... -
Oculus向けにアプリを配信する方法
タイトル通り、VRデバイスであるOculus向けにアプリを配信する方法について備忘録としてまとめておきます。弊社にもOculus Quest/ Quest2があります。 Oculus とは Facebook傘下だった企業のVRデバイスブランドで、現在はFacebook子会社に吸収されています... -
Babylonjsとは(2021年4月)【WebXRサンプルコード有】
Babylon.jsとは、WebGLベースの3Dエンジンです。この場合の”エンジン”は実行環境のことであり、キーボードやマウスからの入力データを受け取り3Dグラフィックスを操作できるようにし、ブラウザなどに描画するものです。TypeScriptで開発されていますが、Ja... -
WebGLやWebGPUとは
Three.jsの記事で、Three.jsはWebGLレンダラー…というようなことを記載しました。 A-FrameとThree.jsを使ってみた 改めて、WebGLとWebGPUについてまとめたいと思います。 WebGLとは まず、Khronos Groupという非営利団体が策定しているOpenGL（Open Graphi... -
A-FrameとThree.jsの使い方
A-Frameとは WebGLレンダラーであるThree.jsベースのMR向けのWebフレームワークです。Three.js単体でもマウスなどからの入力情報を用いつつ3Dモデルをレンダリングすることが出来るのですが、A-Frameを使えばVRデバイスを活用することが出来、またUnityラ... -
WebXRについて【2021】
WebXRとは 過去、"WebVR"というのがあったのですが、VRに限らず使うものとしてWebXRが誕生しました。WebXRの仕様、対応ブラウザ、JavaScriptライブラリなどについて調べて御紹介します。 まずはWikipediaの記載やMozillaの考え方を見比べてみましょう。 Wi...
