奥会津只見 イラスト美術館 人生2回目のLT＠Babylon.jsゆるほめLT会での発表内容忘備録です。
スライドはこちら▶ はじめてのBabylon.js
目次 非表示
- プロローグ
- 学ぶ喜びをかみしめながらも、早速の行き詰まり
- やはり刑事ドラマは正しかった
- この辺りから本題
- Your Journey Starts Here / The Very First Stepを進めます
- テンプレートの出し方までかっこいい Windows編
- テンプレートの出し方までかっこいい Mac編
- アニメーションつき.gltf オブジェクトの召喚とサイズ調整
- いい感じすぎて、サイズ調整前がどんな感じなのかが気になる
- We want our scene to be interactive だそうですが
- まだ We want our scene to be interactive
- まだ We want our scene to be interactive
- 補足（まだ We want our scene to be interactive）
- まだ We want our scene to be interactive
- そしてついに、You’ve added interaction to the scene!
- The .html File と Hosting Your Babylon Project 間違いの例
- 4度目でついに、Congratulations!
- 失敗分は削除できました（後日談）
- 緑のグラデーション
- ありがとうございました。
先ずは、Babylon.js 勉強会 vol.1 ~Babylon.js 日本コミュニティ立ち上げ記念！~を拝聴するまでのいきさつをさらりと。「ブラウザ 3D 表現に関心ある人」というターゲット設定にがっつり捕まれての視聴でした。
Babylon.js 勉強会 vol.1は、とにかく凄く面白かった。
PlayGroundってGlitchみたいなものかなぁ(゜-゜)
世の中にこんなに親切な方がいるなら、Babylon.js 公式入門チュートリアル ざっくり和訳やってみようかなぁ・・(゜-゜) と、チュートリアルを進めて進めてみることに。
CodePenを知れたり、対応非対応によってサービスを選んだりする事など、補足的な内容がとても学びになります。
ただ、すぐに非同期処理やPromiseというもので行き詰まり、調べに、行くページ行くページで、出てくる言葉を、調べに調べて深みにはまっていくスパイラルに突入。
行き詰ったときは現場に戻る。
現場に戻ったことで、原文の存在に気付くことが出来ました。
ーー 今までずっとcdnなどの正体もよく分かっていなかったけど、頭の良い人達が作ってこの世界のどこかに置いているものを、使わせてもらっているという感覚がやっと想像できるようになってきた。
ーー A-Frameは<a-scene>でデフォルトのカメラ（0 1.6 0）やライトが設定されてコントロールも操作するけど、Babylon.jsは各々追加するみたい。ぐりぐりできるのは、カメラをcanvasにアタッチするからなのか。(゜-゜)
Getting Started / Firsts の更に前にあった 、Your Journey Starts Here 。
リンクは変わってなかったけど、以前は Getting Started / First で、2022/12現在は、Features / Introduction / First になっている。色々更新されている模様。
The VERY First Step。自分はここからの人でした。
The Very First Step > Your First Creation
Sphereを消して（Playground 1）、地面を赤くして（Playground 2）、テクスチャを充てて地面をチェック柄に（Playground 2）。
行き詰ってもほぼ自己解決できる至れり尽くせりのチュートリアル。
これからイエティ（Yeti）を呼ぶのですが、これマジ凄い。こういうのは普通なんですかね、ITの世界。
CTRL + Space
1度目はWindows PCでやっていたのですが、このLTキャプチャ用にMacでやり直していたら、CTRL + Space ではテンプレートが出てこず、検索して発見。
Babylon js / Introducing Playground Templates のYoutube動画にコメントしていたAlex Liさんに感謝。
CTRL + Space で出る場合もあるようですが、出ない場合は、fn + CTRL + Space で試してみてください。
The Very First Step > Your First Creation
let’s do a few more things:のところ。
手順に沿って、１、２、３、４、５と作業。
とてもいい感じでイエティ（Yeti）召喚。
手順１、２、３の後、４のサイズ調整（newMeshes[0].scaling = new BABYLON.Vector3(0.1, 0.1, 0.1);）を飛ばして、５のシーン更新をしてみる。
こんなでした。
でか！
この動きがインタラクティブではない理由が分からない。。
静止画だと分かりにくいので動画（Playground 4）にしました。
今はFreeCameraというものを使っているようです。
取り合えず、インタラクティブになるという方法を試してみる。
大好きなかっこいい出し方でテンプレートを呼び出す。
一応、カメラに関しても調べてもいるのですが、やはりインタラクティブな感覚が分からない。。
BabylonJS を使用した VR Hello World / チュートリアル: シーンを準備する
このページも前回見たときから、どこかが更新されているようです。
初歩の初歩だから、w/Degreesでも、w/Radiansでもどちらでも問題ないだろうとの判断で、今回は、日常的に聞きなれた方の英単語という理由だけで、Degreesを選択。
The Very First Step > Your First Creation
動きが劇的に変わった！
これがインタラクティブか。。
静止画だと分かりにくいのでこちら（Playground 5）にしました。
ユーザーの入力を可能にするには、カメラをキャンバスに取り付ける必要があるとのことですが、ふぅむ・・。
カメラはまた改めて勉強します。
The Very First Step > The .html File
ダウンロードしたファイルがzipだったので、解凍するのか一瞬迷ったけど、先ずはそのままアップロード。
だめでした。
The Very First Step > Hosting Your Babylon Project
解凍していなかったり、解凍したそれぞれのファイルをどうアップロードするか、手当たり次第試しているうちに、Firstのファイルが増えて、どれがほんとのFirstかが分かりにくい状態になりつつも・・・
ついにできました！
Babylon.js sample code (a2k3ine.github.io)
時々どこかで見るアレは何だろうと思っていたのですが、これでした。
今回は、「Babylon.jsゆるほめLT会 ～最近Babylon.jsを始めた人がLTして褒め合う会、LTの最初のステップ～」というタイトルを見たときに、この最初のステップを逃したら、今後Babylon.jsのイベントでLTをやる機会はないかもしれない、と思い、迷っていたものの、やはり踏み切れないまま数日が経ちました。
数日後、覗いたら、LT枠があと１人だったので、意を決してポチりました。
何事もタイミングというものは大きなきっかけです。
自分メモ
A-Frameを使った基本的なデモの作成
A-Frame > <a-camera>
A-Frame > Installation
WebGLフレーム:Three.jsとBabylon.jsの比較
ゲーム開発 – Babylon.js: 基本的な Web ゲームのビルド
Babylon.jsはA-FrameよりThree.jsに近いっぽい。Unity使う人はThree.jsよりBabylon.jsのよう。
Visual Studioを使うチュートリアルも。
