WebGL 環境上でメタセコイアで作った 3D モデルを見られる, メタセコイアビューアを作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

先日作った mqo.gl.enchant.js を使って そこそこちゃんとしたモデルビューアを作りました.

gl.enchant.js と dat-gui を使用しています. enchant.js と dat-gui は相性が悪かったので中身をそれぞれ少しイジッたりしています.

メタセコイアを起動するまででもないがちょっとモデルを確認したいって時に, ちゃちゃっとドラッグ & ドロップで確認できるのでそんなときに活用してくださいな♪♪

Read More

gl.enchant.js 上でメタセコイアのデータを読み込めるようにするプラグイン mqo.gl.enchant.js を修正しました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

gl.enchant.js 上でメタセコイアのデータを読み込めるようにするプラグイン mqo.gl.enchant.js を作りました

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

gl.enchant.js は標準で collada.gl.enchant.js という COLLADA(.dae) ファイルを読み込めるプラグインが付いています. ですが, dae はちょっと学生さんには馴染みがないかなぁ~と思い Metasequoia(メタセコイア)形式(.mqo) ファイルを読み込めるようにするプラグインを作ってみました.

なんとなぁ~く表示できたら良いかなぁ~という感じで2時間ぐらいで作ったので色々と怪しいですが一応表示できているみたいです. 基本的に使い方は callada.gl.enchant.js と同じで game.preload でロード, game.assets で取得できます.

サンプルは File API を使ってドラッグ & ドロップに対応しているので, ローカルにある mqo ファイルをバンバン放り込んで遊んでみてください.

Read More

gl.enchant.js 用に作ったプラグイン debug-camera3d.gl.enchant.js を, 機能を絞って使いやすくしてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

以前『gl.enchant.js 上でカメラを自由に動かせるようにするプラグイン debug-camera3d.gl.enchant.js を作りました』 で公開したプラグイン debug-camera3d.gl.enchant.js を少し修正して使いやすくしてみました.

Read More

gl.enchant.js で球同士の衝突プログラムを作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

前回書いたエントリー『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』の 3D バージョンを gl.enchant.js を使って作ってみました.

やっているのは, 前回同様

  • 球同士の衝突判定
  • めり込みの補正
  • 衝突後の反発

です.

ベクトル周りの処理は glMatrix.js にある vec3 でできるのですが, C言語っぽい使い方と最後の引数を省略すると動作が変わるという いかにもバグの温床になりそうな仕様に馴染めなかったので自作のベクトルクラス(TM.Geom.Vector3)を使用しています.

衝突関連の処理は単純に前作で TM.Geom.Vector2 を使っていた箇所を TM.Geom.Vector3 に変更しただけです.

トップページでサンプルを起動する前に球体の数やフィールドの大きさなどを指定できるようにしてあります. ぜひ遊んでみてください.

Read More

gl.enchant.js で3D空間を動き回るウォークスループログラムを作ってみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

gl.enchant.js で 3D 空間を動きまわるウォークスルー(Walk Through)プログラムを作ってみました.

3D プログラミングで基礎を学ぶにもってこいなウォークスループログラム. プレイヤーの移動やカメラの挙動など基本的な部分を学ぶことができます.

コードはダウンロードできるようにしてあるので, よかったらイジって遊んでみてください.

image

Read More