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フォルダにソースをコピーできます。
WSLにRails6環境を構築する方法メモ
Macでは難なく入ったのですが、、、WindowsのWSLではちょっとてこずったので、現状行ける方法をメモしておきます
【前提】
あらかじめWSLのubuntuが入っているものとします。ない場合はMicrosoftStoreからインスト―ル
Ruby: 2.6.3
Rails: 6.0.2.2
Windows10のWSLを使っていきます
# VSCodeをインストール
VSCodeのリモートがとても便利なので入れていきます。
サイトに行ってダウンロードしてきます
Visual Studio Code – コード エディター | Microsoft Azure
Remote-WSLのプラグインをインストール
起動後に左下の緑の「><」マークからWSLへRemote接続します
接続できたら上のメニューのTerminalからNewTarminalします。
# 準備 これから使うライブラリを入れておきます
> sudo apt-get update > sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm5 libgdbm-dev
# Node.js(最新安定版)のインストール(既に入っている人は不要)
Rails6からはwebpackを利用するためにNode.jsを利用するようになったため
Node.jsもあらかじめ入れておきす
まず普通にインストール
> sudo apt install -y nodejs npm
次にnで入れる
> sudo npm install n -g > sudo n stable
古いものを削除
> sudo apt purge -y nodejs npm > exec $SHELL -l
入ったか確認
> node -v
# Rubyのバージョン管理システムであるrbenvを入れる
> cd ~/ > git clone https://github.com/sstephenson/rbenv.git .rbenv > git clone https://github.com/sstephenson/ruby-build.git .rbenv/plugins/ruby-build > echo 'export PATH=~/.rbenv/bin:$PATH' >> ~/.bashrc > echo 'eval "$(rbenv init -)"' >> ~/.bashrc > source .bashrc
# ここからRuby(2.6.3)インストール
> rbenv install 2.6.3 > rbenv local 2.6.3 > ruby -v
使いたいバージョンをローカル登録
.ruby-versionという隠しファイルができます
（そのディレクトリ以下では指定したバージョンのrubyになります）
失敗する場合
aptからrbenvを入れていると古いので2.6系がありません。
git cloneで入れてても失敗している場合はrbenv initあたりが失敗してます。
# sqlite3のインストール(既に入っている人は不要)
> sudo apt install sqlite3 > sqlite3
コマンドリストが表示されればインストール完了
Rails環境を構築する上でsqlite3系の問題はかなり多くて
ネット上に多々解決法が出てますが
突破できず。結局、Ruby2.6.3だとエラーにならないのでオススメ。
# Railsのインストール
> gem install rails > rails -v
Rails 6.0.2.2
Railsの6.0.2.2がインストールされました。
次にbundlerを入れたいところですがRuby2.6からはbundlerがすでにRuby本体に
入っているためインストールは不要です。
# プロジェクトの作成
> rails new hello_rails
# yarnを入れましょうとでるので入れていきます
> sudo apt install yarn > cd hello_rails > yarn
もしyarnと入力して「ERROR: There are no scenarios; must have at least one.」みたいな
エラーを吐いたらyarnを入れなおします(aptのyarnが古いようです)
> sudo apt remove yarn
apt-getのパッケージ情報を更新
> curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - > echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list > sudo apt-get update
yarnを入れ直します
> sudo apt-get install yarn
マジで長いですね。もう一息です
# webpackerを入れます
これを入れないとrails6は起動しません
rails webpacker:install
# プロジェクトを起動！！
> yarn install > rails s
rails serverもしくはrails sで起動できます。
localhost:3000をブラウザで開いたら・・・
いぇええあ！！
ここまでたどり着くのに数々のエラーに逢いました
sqlite3がどうたら、pumaどうたらなど。
コツとしてはMacでうまく動いたRuby2.6.3を入れたことでしょうか。
あんまり最新のRubyを入れるとgemのメンテが追い付いていないのか起動しないことがあります。
あと、何も考えずにaptからインストールすると結構古いことが多く、エラーになること多数なので
本記事のようにところどころapt-get使ったり(apt-getも結構古い)、git pullで持ってきたりが大事です。
それにしてもVScodeとWSLのコラボレーションは本当に便利。
macもいいけどWindowsも中々ですね
あとこの本↓↓↓いい感じです。rails6について纏まっていて
