超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
Three.js を拡張して簡単にボクセル風なレンダリングができるようになる PixelBox - WebGL 総本山
独特な雰囲気が面白いボクセル風レンダリング 今回ご紹介するのは、three.js に組み込んで利用することを前提に作られたライブラリである PixelBox です。 Example を見ると実際に動いている様子も確認できます。 なかなか面白い独特な雰囲気になっていますので、表現方法のひとつとして参考にしてみてはいかがでしょうか。 あくまでもボクセル風味 three.js をベースに、それと組み合わせて使うことを前提にしている今回の PixelBox ですが、レンダリング結果はあまり見かけない独特な雰囲気を放っています。 まるでドットを打ったかのように、四角い点として 3D モデルがレンダリングされます。 その様子はまるでさながら昔ながらのドットで表現されたゲームのよう。 きちんと影なども出ていますね。 よくサンプルを見てみればわかることですが、この PixelBox はあくまでも「ボクセル
Box2DJS（二次元物理エンジン）とthree.js（3D表現）のシンプルな組み合わせ | KnockKnock
今回は二次元物理エンジンBox2DJSとWebGLライブラリ、three.jsを組み合わせて、カーレースゲームのサンプルを作成しました。 Box2DJS Box2DJSはC++で書かれた物理演算エンジンをJavaScriptに移植したものです。質量・速度・摩擦といった、古典力学的な法則をシミュレーションするゲーム用の2D物理演算エンジンとして、現在ではActionScript、Java、C#、Pythonにも移植されています。 前回の記事ではenchant.jsとthree.jsを併用しましたが、今回は3D表現としてthree.jsを使う事は変わりませんが、メインのロジック部分にBox2DJSを使用しました。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでChromeかFireFoxで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
