babylon.js ステップ4 位置、回転、スケーリング
babylon.js やってみようシリーズのステップ4
位置、回転、スケーリングのお話です
位置の話
babylon.jsには２つの座標系があります
- ワールド座標系
- ローカル座標系
ワールド座標系
ワールド座標系の原点は変わりません。
通常、メッシュが作成されると、その中心はワールド軸の原点に配置されます。
移動しても、ワールド座標系はそのワールドの中心(原点)を元に判断されます
ローカル座標系
ローカル軸はメッシュの場所によって動きます。
でもローカル軸の原点は、ワールド座標における位置に関係なく、常にメッシュの作成された中心にあります。
初期状態
ワールド座標とローカル座標は一致しますが
メッシュが動くとズレることになります。
配置
mesh(メッシュ)に対して positionで位置を設定出来ます
mesh.position = new BABYLON.Vector3(2, 3, 4);
例えばワールド軸にしたがって、2,3,4の位置に配置します
この意味は
obj.position.x = 2; obj.position.y = 3; obj.position.z = 4;
です。
赤がX軸、緑の線がY軸、青がZ軸
回転
meshに対して rotationで回転させることが出来ます
mesh.rotation = new BABYLON.Vector3(alpha, beta, gamma);
回転もVector3型でメッシュに設定します。
alpha、beta、およびgammaはラジアンで設定します。
mesh.rotation.x = alpha; //rotation around x axis mesh.rotation.y = beta; //rotation around y axis mesh.rotation.z = gamma; //rotation around z axis
これも同じ意味になります。
また、addRotationを使ってmesh(メッシュ)を連鎖的に回転させることも出来ます
mesh.addRotation(Math.PI/2, 0, 0).addRotation(0, Math.PI/2, 0).addRotation(0, 0, Math.PI/2);
スケーリング
meshに対して scalingで大きさを設定出来ます
mesh.scaling = new BABYLON.Vector3(scale_x, scale_y, scale_z);
または、個別に
mesh.scaling.y = 5;
とか出来ます。
y軸に対してスケーリングした物を、z軸を中心に回転させたらこんな感じです。
まとめ
メッシュに対して、position, rotation, scalingを設定することで
それぞれ、位置、回転、大きさを制御できることがわかりました
次回はマテリアルです
babylon.js ステップ3 線Lineを使ったいろいろな形状を表示
いろいろな形状シリーズです。
いきましょう！
線
//Array of points to construct lines
var myPoints = [
new BABYLON.Vector3(0, 0, 0),
new BABYLON.Vector3(0, 1, 1),
new BABYLON.Vector3(0, 1, 0)
];
//Create lines
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);
BABYLON.Vector3型で繋いでいきます
螺旋
//Array of points to construct a spiral with lines
var myPoints = [];
var deltaTheta = 0.1;
var deltaY = 0.005;
var radius = 1;
var theta = 0;
var Y = 0;
for (var i = 0; i<400; i++) {
myPoints.push(new BABYLON.Vector3(radius * Math.cos(theta), Y, radius * Math.sin(theta)));
theta += deltaTheta;
Y += deltaY
}
//Create lines
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);
線400個を螺旋状に繋いでグルグルな物も作れます
babylon.js ステップ2 いろいろなプリミティブを表示
早速いきます
BABYLON.MeshBuilderを使っていろいろ作っていきます
Three.jsならジオメトリを作って、マテリアルを設定してメッシュを作るのですが、babylonは一行です。
球体
// Add and manipulate meshes in the scene
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameterX: 1, diameterY: 0.75, diameterZ: 0.25}, scene);diameterとは直径のことです。x,y,x好きなサイズに出来ます
箱
// Add and manipulate meshes in the scene var box = BABYLON.MeshBuilder.CreateBox("box", {height: 1, width: 0.75, depth: 0.25}, scene);
height高さ, width横幅, depth奥行きを設定出来ます
Plane平面
// Add and manipulate meshes in the scene var plane = BABYLON.MeshBuilder.CreatePlane("plane", {height:2, width: 1}, scene);
箱の奥行きないバージョンですね
地面Ground
Three.jsには無いプリミティブ
// Add and manipulate meshes in the scene
var ground = BABYLON.MeshBuilder.CreateGround("ground", {height: 1.5, width: 2.5, subdivisions: 4}, scene);subdivisionsとはsquare（正方形）の数です。これは4個ですね
まとめ
プリミティブには球体、箱、平面、そして地面がありました。
どれも１行でシーンに追加出来て、Three.jsよりシンプルです。
Three.jsには無かった、地面Groundが気になる所です
次回は、その他の数学的な形状です
Three.jsに物理法則を導入できるPhysijs を入れてみたいけど、、
前回の記事で、Three.jsはゲームに使えない的なことを言ってしまったのですが。。
実は、物理法則を簡単にいれる方法があったっぽい。
それが、外部ライブラリPhysijsだ！！
特徴はこうだ！
- オブジェクトが重力の影響を受け、お互いに衝突するようになる
- シーン内の物体の摩擦係数と反発係数を触れる！
- Physijs がサポートしているさまざまな形状がある
- 単純な形状を組み合わせた合成形状もある
- ハイトフィールドを使用した複雑な形状もできる
- オブジェクトの動きの制限する点制約、ヒンジ制約、スライダー制約、コーンツイスト制
約、自由度制約
- 左右の音量がカメラの位置に基づいて決定される音源
何と盛り沢山な！！
いこう
babylon.jsで3D表現の初めの一歩
こんにちは
どうしても3Dでゲームっぽい物をWeb上で作りたくて、ここ数ヶ月Three.jsを勉強していたのですが、、
どうやらゲームを作るにはbabylon.jsの方が良さそうです。
なぜ、Three.jsではダメなのか？
それは純粋な3D表現ツールだからです。
- キャラクターが簡単には歩いたりはしない
- 地面もただの平面オブジェクト
- 重力は自前でプログラミング
などなど。
何ていうか・・・・全て自作が前提なのです。
Unityであるように、重力を付与するモジュールとか無いです。
誰かが作ってるかもしれないけれど、公式では無いです。
これがとても辛いです。(あったら御免なさい。教えていただきたいです)
ぽぽん！とゲーム作りたい！
じゃあUnityやりなさいよ！！
という話なのですが、どうやらWeb上では動作が遅いらしく家庭用ゲーム機とかPCやスマホにインストールする形式じゃ無いと辛いらしいです（未検証）
あとは、JSで動かしたいんだ！！既存のWebサービスにシームレスに組み込みたいんだ！という話です。
そこで検討したのが、babylon.js(バビロンジェイエス)名前が、人類の愚かさの象徴であるバベルの塔を作り出したバビロンということで、全然いけてないのがとても気になるのですが。。。
果たして、これは目的の物なのか、、
頑張って検証していきます。
執筆時点の最新版は4.1です。
Microsoftのエンジニアが作った物らしく、フリーで使えますし、定期的にアップデートもされており、良さげです。
Microsoftと言えばマインクラフト！！
きっとマインクラフトみたいな物も、簡単に作れるんじゃないかと予想していますw
ただ、babylon.jsにも、一つも問題が。。。。
それは、、、
babylonには日本語のドキュメントが一切ない！！ 書籍もない！！
ということです。
Three.jsには素晴らしい書籍がありました。
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
- 作者:Jos Dirksen
- 発売日: 2016/07/23
- メディア: 単行本（ソフトカバー）
ですが、babylon.jsにはありません。
なので、このブログで説明しつつ、頑張って使っていきたいと思います。
それでは使っていきましょう。
なお、Three.jsがある程度使える方を前提に買いていきます！
もし、分からない場合は、コチラのThree.jsの書籍を買って、基本的なWebにおける3D表現のお作法を学んだ方がいいかもしれません。
初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ
- 作者:Jos Dirksen
- 発売日: 2016/07/23
- メディア: 単行本（ソフトカバー）
まず球体を置いてみる
コード全容
まずは、コード全容です
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Babylon Template</title> <style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style> <script src="https://preview.babylonjs.com/babylon.js"></script> <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script> </head> <body> <canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP --> <script> var canvas = document.getElementById("renderCanvas"); // Get the canvas element var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine /******* Add the create scene function ******/ var createScene = function () { // Create the scene space var scene = new BABYLON.Scene(engine); // Add a camera to the scene and attach it to the canvas var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene); camera.attachControl(canvas, true); // Add lights to the scene var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene); var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene); // Add and manipulate meshes in the scene var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene); return scene; }; /******* End of the create scene function ******/ var scene = createScene(); //Call the createScene function // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); }); // Watch for browser/canvas resize events window.addEventListener("resize", function () { engine.resize(); }); </script> </body> </html>
解説
まず、この部分
<canvas id="renderCanvas" touch-action="none"></canvas>
これはcanvasタグをidを付けて置いているだけです。
<style> html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0; } #renderCanvas { width: 100%; height: 100%; touch-action: none; } </style>
スタイルシートで全画面表示しています。
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>babylon.jsと、babylonjs.loaders.min.jsの本体とローダの読み込み。
そして、スマホでタップを取り扱いたい場合はpep.jsも読み込んであげます。
var canvas = document.getElementById("renderCanvas"); // Get the canvas element
var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engineキャンバス要素をID指定で取得して、それをバビロン3Dエンジンに紐付けます！
この3Dエンジンにいろいろ、要素を追加していくことになります。
/******* Add the create scene function ******/
var createScene = function () {
// Create the scene space
var scene = new BABYLON.Scene(engine);
// Add a camera to the scene and attach it to the canvas
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);
// Add lights to the scene
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);
// Add and manipulate meshes in the scene
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);
return scene;
};
/******* End of the create scene function ******/
var scene = createScene(); //Call the createScene function3D表現では、シーンという概念を扱います。
一つの画面表現をシーンとして扱うのですね。
で、
var scene = new BABYLON.Scene(engine);
でシーンを新しく作ります。もちろんバビロン3Dエンジンを使います。
// Add a camera to the scene and attach it to the canvas
var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, new BABYLON.Vector3(0,0,5), scene);
camera.attachControl(canvas, true);次に、カメラの追加です。
今回は、「ArcRotateCamera」です。球形に回転するカメラですね。
場所はVector3型でz軸に5個進んだところに配置です。(手前に５歩って感じでしょうか)
そのほかにも、いろいろカメラがあるっぽいですが。それは別の記事で
// Add lights to the scene
var light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 1, 0), scene);
var light2 = new BABYLON.PointLight("light2", new BABYLON.Vector3(0, 1, -1), scene);ライトの追加です。２個追加してますね。
一つは、「HemisphericLight」ヘミソフィックライト（環境光）ですね。
場所はVector3型でx軸(左)に1, y軸(上)に1, z軸に0の場所に配置です。
もう一つは「PointLight」スポットライトみたいなやつでしょうか。
場所はVector3型で上奥に設置してますね。
// Add and manipulate meshes in the scene
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter:2}, scene);球体(sphere)のプリミティブの配置です。
var scene = createScene(); //Call the createScene function
でこの関数を実行していると。
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});で、このエンジンを使ってレンダリングするわけですが
それをループさせてシーンの描画を繰り返します。
そうすることでアニメーションとか、カメラの位置変更が常に反映されるようになります。
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
engine.resize();
});おまけで、ウィンドウサイズのリサイズ対応ですね。
Three.jsなら自前で各所をbabylonならengine.resize();で一撃です。便利
整理
- まずライブラリを読み込む
- HTMLにcanvasを作っておく
- ３Dエンジンを起動！
- canvasと３Dエンジンを紐付け
- シーン作成！！
- シーンには「カメラ」と「ライト」と「物体」をVector3型で設置！！
- ループ処理を設置
- リサイズ対応も書いとく
この順番を覚えておきましょう！
Three.jsよりちょっとだけシンプルかな。
感想
いけそう！
Three.jsを学んだあとなら、babylon.jsは簡単そうな気がする
どんどんブログにあげていこうと思います
追記：Three.jsでもPointerLockカメラというのがあって
それを使えばマイクラフト的な視点のカメラはできるっぽい。
https://threejs.org/examples/#misc_controls_pointerlock
あとは、Physijsというライブラリを使うと物理演算を導入することができるっぽい！！
この辺りも検証したい
私はサル以下なのか、、、と思ったあなたに。RPGに例えたGitの概念
ヒトにはもっと良い例えがあるはず！
そんなわけで、サルには理解できないRPGで、誤解を恐れずに例えてみた。
いつも教えるときに例えて説明しているので、自分で整理するためにメモ。
概念だけなので正確には、こっちのGithubが出してるチートシートを確認してね。
https://github.github.com/training-kit/downloads/ja/github-git-cheat-sheet.pdf
git clone
友達のセーブデータをメモリーカードにダウンロード。cloneから始める場合はinit不要。
git add
セーブするものを選ぶ
(RPGの中の状況のうち、セーブするものを選べる。お金だけとか、経験値だけとか、このキャラだけとか)
git commit
addした状態をメモリーカードへのセーブ
git checkout
セーブデータのロード(読み込み)
git push
git remoteで設定したインターネット上のメモリーカードに保存。
git commit（手元のメモリーカードに保存）した後にやると、そのデータがネットにもコピーされる。
これで、手元にあるメモリーカードを紛失しても、水に濡らしてもセーブデータは失われない
git pull
インターネット上のメモリーカードカードの状態を
自分のメモリーカードに反映する。
友達が更新していた場合に、ちょくちょく、git pullしてやらないと、自分だけ古いデータで置いてきぼりを喰らう事があるよ。
git branch
セーブデータの系列
条件分岐する箇所で、一旦セーブすると思います。
masterブランチは、メインのセーブデータ。
そのほかのブランチは、サブイベント回収のセーブデータみたいなイメージ。
サブイベントを回収し尽くしたら、masterブランチにマージして、常にmasterブランチのセーブデータに統合させる事ができます！
それを、自分だけじゃなく、友達同士で、協力してサブイベント回収して、masterブランチに統合する事もできる！
git rebase
自分のセーブデータに、別のセーブデータを混ぜる事ができる。
混ぜる作業は手動なので、熟練した技量が必要
git marge
セーブデータを結合する。
git rebaseと似ている。こちらも熟練した技量が必要
git reset
セーブデータを巻き戻す。
無かった事にする。
git revert
差分を打ち消す。差分を部分的に戻す。
お金だけ、前回のセーブデータの状態にするとか、あの街には行かなかった事にするとかできる。
git diff
セーブデータと現在の状態の差分を見れる！
便利！
git stash
現在の差分を一時待避できる。
友達のセーブデータをロードしたい場合、今の自分の変更はrevertするか、stashすることで、初めてロードできるようになる。
何気に使います。
git reflog
自分の冒険履歴を見られる
「右うでを上げた」並の細かさで記録されている。
そして、git reset -hard で、そのログをリプレイできる！その時に戻れる！
git log
過去のセーブデータを閲覧できる
こっちの方が、大雑把な冒険履歴を見れる。
Nuxt.js × Cordvaでスマホアプリを作ろうとしたメモ
Nuxt.jsでcordovaを利用してiOS,Andoroidアプリが作れたらいいなという
意欲的な事をふと思ったのでやってみたメモです。
Nuxt.jsで作成したWebサイトを簡単にCordovaアプリ化する方法【ホームページを簡単アプリ化】 – こまめ
この設定をやって
Cordova公式のGet Startedを実行
cordova platform add browser
をやって実行するとブラウザで開けます。
意味ないやん。Webブラウザで開いても。。
なので、andoroidプラットフォームを追加します。
ちなみに、npm generateしてdistフォルダにソースが履かれたら
windowsの場合は
robocopy dist/ cordova/www/
を実行するとcordovaフォルダにソースをコピーできます。
