3D ゲームも簡単に作れる! tmlib.js x three.js(WebGL) で 3D プログラミング出来るようにしてみた!!

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

Pocket

私の方でずっと作っている JavaScript ライブラリ『tmlib.js(ティーエムリブ ジェイエス)』ですが, この度, 晴れて『three.js』と結ばれることとなりました.

っとはいっても一方的にですけどねw

tmlib.js は, 2Dゲームだったりツールを作る機能は揃っていましたが 3D に関する機能は今までありませんでした. WebGL をラップして自前で作ったりもしていたのですが, なかなかピンとこず…

そこで今回は割りきって three.js をそのまま取り込んでtmlib.js の基本インターフェースと同じように使えるようにしてみました. サンプルをいくつか用意したので遊んで頂けると幸いです.

もちろん jsdo.it で♪

Table of contents

tmlib.js とは?

そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです.

詳しくは下記のリンクにて

up

three.js とは?

今最もメジャーな WebGL ライブラリです.

WebGL は複雑なセットアップだったりシェーダを自前で用意しないといけなかったりするのですが, その辺を全てやってくれるのが three.js です.

ちまたにある WebGL のサンプルは全て three.js が使われているといっても過言ではありません.

ここでは詳しく説明しませんが, こちらのサンプルを見ればどれだけ優れたライブラリかがわかるかと思います.

View

up

tmlib.js x three.js で作ったサンプル達

どれも 50~100 行程度で実装しています.

今まで tmlib.js で 2D ゲームを作ってきた仕組みをそのままに, 描画機能のみを three.js で 3D 化しているのでサクッと使えるかなと思っています.

template – tmlib.js x three.js

Cube Test – tmlib.js x three.js

Sphere Test – tmlib.js x three.js

Texture Test – tmlib.js x three.js

Intersect Test – tmlib.js x three.js

3D Text Test – tmlib.js x three.js

up

『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!!

な, な, なんと!! GlobalGameJam with tmlib.js やります!!!!

View

tmlib.js は初心者の方でも気軽に使えるライブラリなので, ゲームを作ったことが無い方や, プログラマさんじゃなくても気軽にご参加下さい.

私は基本サポートに徹するのでその場でサンプルを作ったり, 質問やバグ対応を主にやるつもりです.

また, プランナさんとしてやデザイナさんとして参加したいって方もぜひ! 私が形にします!!

今までに tmlib.js を使ったゲームとして

などがあります.

実際にこれらを作られた方も参加するので みんなで協力して楽しくゲームプログラミングをしましょう:D

up

まだ試作段階なので色々と仕様は変わると思いますが,

  • こういう機能ないの??
  • こういう使い方があると便利かも!!

的なことがあれば@phi_jpまで気軽に メッセージ下さい.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT