Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
今年初めてのBabylonJsを触ってみた
Search
Nobuyoshi
September 15, 2023
Programming
0
250
今年初めてのBabylonJsを触ってみた
BabylonJsの基礎になります。
興味がありましたらご覧ください。
成果物はこちらになります。
https://babylonjs-tau.vercel.app/myroom/
Nobuyoshi
September 15, 2023
Tweet
Share
More Decks by Nobuyoshi
See All by Nobuyoshi
仕事では採用されなかったホスティングサービス、 せっかくなのでLTで話します
uemura
0
64
Babylon.js × microCMS でフォトギャラリーサイト作った
uemura
0
200
2年ぶりにCSSアニメーションを作ったよ!
uemura
0
730
ポートフォリオサイトのお問い合わせフォームをSendgrid + microCMSで作成したお話
uemura
1
1.4k
Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
uemura
0
300
Pug / SASS でピクロス(カービィ)を作成
uemura
0
150
僕の好きなcssプロパティ・値5選
uemura
0
460
複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと
uemura
0
130
Microcms + nuxt.jsで個人ブログサイトをデプロイした件
uemura
0
850
Other Decks in Programming
See All in Programming
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.3k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
230
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
250
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
210
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
190
Team operations that are not burdened by SRE
kazatohiei
1
190
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Raft: Consensus for Rubyists
vanstee
140
7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Designing for Performance
lara
609
69k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
33
5.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building an army of robots
kneath
306
45k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
うえむー 今年初めてのBabylonJsを触ってみた
Name:うえむー フロントエンドエンジニア Job Skill:HTML / CSS / SCSS / JavaScript
/ jQuery / PHP / WordPress / Movable Type / Shopify / Symfony / Laravel / microCMS etc... Private Skill:Next.js / React.js / Nuxt.js / Golang etc... Hobby:プログラミング学習・ゴルフ・ボードゲーム・麻雀 From:埼玉県川口市 SNS・ブログサイト Twitter::https://twitter.com/uemuragame5683 ブログサイト:https://nu-blogsite.net/ ポートフォリオサイト:https://uemu-engineer.com/ 自己紹介 BabylonJsについて メリット・デメリット オススメの記事 ハンズオンする 成果物 まとめ 自己紹介
みなさんはBabylonJSって知ってますか? 自己紹介 BabylonJsについ て メリット・デメリット オススメの記事 ハンズオンする 成果物 まとめ BabylonJSについて
BabylonJSはMicrosoft社が開発したJavaScriptのWebGLのライブラリです! 有名なThreeJSと同じ機能ですね! BabylonJSはWeb上3Dゲーム開発で主に利用されているようです。 自己紹介 BabylonJsについ て メリット・デメリット ハンズオンする 成果物 オススメの記事
まとめ BabylonJSについて
メリットその1・・・ライブエディタがある Babylon.js Playground https://playground.babylonjs.com/ 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事
まとめ メリット・デメリット
メリットその2・・・コンポーネント化できる エディタで作成したものを以下の手順で保存することができます。 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ メリット・デメリット
「Inspector」(インスペクタ)をク リック その中の「Tools」をクリックし、エク スポート することができます。出力 形式は .babylon format と GLB format を選べます。
メリットその2・・・コンポーネント化できる 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ メリット・デメリット すると左のようにxxx.babylonで保存され、以下のよう
にインポートすることができます。 このようにインポートができればコードが整理しやすくなり 編集しやすくなります。
メリットその3・・・安定性がある 今まで利用したThreeJsでデメリットを感じた所 ・パフォーマンス性が悪く表示するスピードが遅い 自分のポートフォリオサイトはThreeJsで利用してメインビジュアルを表示してるんです が、そこの改善方法に悩みました。 ・パージョンアップすると、少し古いバージョンのプラグインが使えなくなる。 今まで利用したThreeJsのプラグインが使えなくなり、フロントがでなくなったという事象が 発生したことが何回かありました。 BabylonJsは上記の2点と比べてその事象が発生している事が 1度もく安定性があると考
えられます。 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ メリット・デメリット
デメリット・・・ThreeJsと比べると認知度が低い ThreeJsと比べると認知度が低い所です。成果物を見てみると BabylonJsはThreeJsと 比べると少ないことがわかります。 デメリット・・・日本語のドキュメントがない BabylonJsは現在英語のドキュメントしかなく、日本語のドキュメントはありません。 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする
成果物 オススメの記事 まとめ メリット・デメリット
では、試しにやって見ましょう! 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする
サンプルとしてこれを作ります! 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする canvasを用意して、babylon.jsのライブ ラリを追加する
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする DomcontentLoadedイベントでmain関 数を実行させる
getElementByIdメソッドでcanvasのid 属性値を指定する
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.Engineで Babylon.jsエンジンを起動する
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.Sceneでシーンを作成させ る。
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.ArcRotateCameraでカメラを作成して、 XXXXX.attachControlでカメラをコントロールする
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.HemisphericLightで環境光源を設定 す。
環境光源を設定しないとジオメトリをいれても真っ暗 なままで見えません
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.StandardMaterialでマテリアルを作成 し、MeshBuilder.createGraundグランド用のジオ
メトリを用意して、BABYLON.color3で色を設定す る。 MeshBuilderはGraund系だけでなく、円・正方形な どいろんなジオメトリがあります!
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする BABYLON.StandardMaterialでマテリアルを作成 し、MeshBuilder.createBoxでBox型のジオメトリ
を用意して、BABYLON.Textureでテクスチャをセッ トする。
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ ハンズオンする ジオメトリの位置を変更します。 x.y.z軸のposition、x.y.z軸のrotateで上下左右前後
移動したり、回転することができます。
自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ 成果物 https://babylonjs-tau.vercel.app/myroom/
Babylon.js 公式入門チュートリアル ざっくり和訳 https://zenn.dev/chomado/books/babylonjs-tutorial-ja 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事
まとめ オススメの記事
Microsoft社が開発したJavaScriptのWebGLのライブラリです。 BabylonJSのエディタがあり、ここで編集できる。 パフォーマンス性が良い ThreeJsと比べると認知度が低い BabylonJSは面白い! 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物
オススメの記事 まとめ まとめ
Thank You! 自己紹介 BabylonJsについて メリット・デメリット ハンズオンする 成果物 オススメの記事 まとめ まとめ