現時点で3000件以上投稿されています。
いろんな作品があって楽しいです。
特に上手な作品をピックアップしてみました。
作者別：
POKEMONさん
景色、建物：
キャラクター：
ゲーム機、コンピュータ：
乗り物：
その他：
| パーマリンク
| コメント (0)
| トラックバック (0)
立体ブロックを使ってお絵描きできるサイト「Q-BLOCK」を公開しました。
ぜひ遊んでください。
メモリを大量に消費しちゃいます。動かない人は新しいＰＣ買うと良いよ。
短期間でサクッと作れたので割と満足してます。
Papervisionのおかげ。
| パーマリンク
| コメント (0)
| トラックバック (0)
FLV動画をマテリアルにする場合は、VideoStreamMaterial()を使います。
//FLV読み込み
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns: NetStream = new NetStream(nc);
var video:Video = new Video();
video.attachNetStream(ns);
ns.client = {};
ns.play("http://kyucon.com/nekotv/012.flv");
//マテリアル生成
var material:VideoStreamMaterial = new VideoStreamMaterial(video,ns);
//平面にマテリアルを適用
plane = new Plane( material, 320, 240);
scene.addChild(plane);
| パーマリンク
| コメント (0)
| トラックバック (0)
オブジェクト同士の接触判定はhitTestObject()で可能です。
if(objA.hitTestObject(objB)){
//接触している
}
ただしバウンディングボックス同士での判定なので、
形状によっては本当は当たってないのにtrueになったりします。
回転やスケールを変えてもバウンディングボックスは変化しないようです。
正確に判定したい場合は自前で実装するしかないですね。
・サンプルSWF
・ソースファイル
関連する情報として下記があります。
DisplayObject3D.geometry.boundingSphere バウンディングスフィア情報
DisplayObject3D.geometry.aabb ローカル座標軸に沿ったバウンディングボックス情報
Vertices3D.boundingBox() ローカル座標でのバウンディングボックス情報
Vertices3D.worldBoundingBox() グローバル座標でのバウンディングボックス情報
| パーマリンク
| コメント (0)
| トラックバック (0)
被写界深度のぼかし表現をシンプルに再現してみます。
ポイントは下記です。
・ぼかしをかける対象となるVieportLayerをviewport.getChildLayer()を使って作成。
・カメラからオブジェクトまでの距離はcamera.distanceTo()を使って求める。
・距離に応じてVieportLayerにBlurFilterをかける。
//ぼかし対象となるビューポートレイヤーを格納する配列
private var layers:Array = [];
//カメラから注視点までの距離（この距離にある物が一番はっきり見える）
private var offset:Number = 1000;
//レンダリングのたびに更新
override protected function onRenderTick(event:Event):void {
for (var i:uint = 0; i < layers.length; i++) {
//注視点からオブジェクトまでの距離
var distance:Number=Math.abs(camera.distanceTo(layers[i].displayObject3D)-offset);
//距離に応じてぼかし量を調節
var v:uint = Math.min(30, distance* 0.02);
//ViewportLayerにフィルターを掛ける
layers[i].filters = [new BlurFilter(v,v,2)];
}
}
・サンプルSWF
・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
頂点を指定してポリゴンを作成するには下記のようにします。
//メッシュのマテリアル var material:ColorMaterial = new ColorMaterial(0x00AA00); //メッシュを作成 mesh = new TriangleMesh3D(material, [], []); scene.addChild( mesh ); //頂点作成 var v0:Vertex3D = new Vertex3D(-25, 0, 0 ) ; var v1:Vertex3D = new Vertex3D(25, 0, 0 ) ; var v2:Vertex3D = new Vertex3D(0, 50, 0 ); //表面からみて反時計周りになるように頂点を選ぶ var vertices:Array = [v0, v1, v2]; //メッシュに頂点の配列を追加 mesh.geometry.vertices=vertices; //メッシュに面を追加 mesh.geometry.faces.push( new Triangle3D(mesh, vertices)); //頂点の法線計算実行（やらなくても支障ないかも、シェーディングに使うのかな） mesh.geometry.ready = true;・サンプルSWF ・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
BitmapViewportMaterialを使うとBitmapViewport3Dをテクスチャにすることができます。
別のカメラで映している景色を壁面に投影したい時や、または鏡の表現を行う時などに使います。
//ビューポート生成
bmpView= new BitmapViewport3D(600, 600, false, false, 0xeeeeee);
//ビューポートをマテリアル化
var material:BitmapViewportMaterial = new BitmapViewportMaterial(bmpView);
//平面のマテリアルとして適用
var plane:Plane= new Plane(material, 200, 200);
//レンダリングのたびに更新
override protected function onRenderTick(event:Event = null):void {
//cameraで映したsceneをbmpViewにレンダリング
renderer.renderScene(scene, camera, bmpView);
super.onRenderTick();
}
・サンプルSWF
・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
ReflectionViewを継承することで、床(XZ平面)の反射表現を行えます。
public class World extends ReflectionView{
public function World(){
super(600, 600, false);
//鏡面のＹ座標を設定
surfaceHeight = -100;
//鏡面の色を調整
setReflectionColor(0.7, 0.7, 0.7);
//鏡面をぼかしたい場合は下記フィルターを使う
viewportReflection.filters = [new BlurFilter(10,10,2)];
}
}
・サンプルSWF
・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
残像エフェクトをかける場合は、通常のViewport3Dは使わずに
BitmapViewport3Dクラスを使います。このエフェクトは描画負荷がかなり高いです。
//BitmapViewport3Dを生成 viewport = new BitmapViewport3D(600, 600, true, true, 0xcccccc); addChild(viewport); //残像効果を描画するためには下記をfalseにする viewport.fillBeforeRender = false;そして、レンダリングのたびに残像をぼかす処理と徐々に消す処理を行う
override protected function onRenderTick(event:Event = null):void {
var bmd:BitmapData=viewport.bitmapData;
//残像をぼかす
bmd.applyFilter(bmd, bmd.rect, point, blur);
//古い残像が消えていくように
bmd.colorTransform(bmd.rect, alphaTrans);
super.onRenderTick();
}
| パーマリンク
| コメント (0)
| トラックバック (0)
ベクターデータの文字を表示したい時はText3Dクラスを使います。
//マテリアル生成(色とアルファ指定)
var textMaterial:Letter3DMaterial = new Letter3DMaterial(0xFF0000,1);
//フォント生成
var font:HelveticaBold = new HelveticaBold();
//テキスト３Ｄ生成
var text3D:Text3D = new Text3D("Hello World.", font, textMaterial);
scene.addChild(text3D);
Papervision3Dライブラリに付属しているフォントクラスはHelveticaファミリーだけですが、
他のフォントを使いたい場合は、PotrAsなどを使ってフォントクラスを作るみたい。
参考：Papervision3DのText3Dで日本語使ってみたのをWonderflでforkした
追記：09/06/16 19:54
フォントクラスの作り方は下記に載っています。FIVe3Dのmake_typographyツールを使います。
MAD VERTICES: PV3D Text Primitive
※日本語フォントを全文字変換するのは非常に時間がかかるので現実的ではないです。
※全角スペースはエラーが出るので変換対象に含めてはいけないようです。
| パーマリンク
| コメント (0)
| トラックバック (0)
環境マッピングを使った映り込み表現。
金属っぽい質感を出すときに使いますね。
ライトの位置によって映り込む方向が変わります。
使い方は、下記のようにEnvMapShaderの引数に
ライトと環境用ビットマップデータを渡してやります。
var shader:EnvMapShader = new EnvMapShader(light, env_bmd, env_bmd); var shadedMaterial:ShadedMaterial = new ShadedMaterial(bitmapMaterial, shader); var sphere:Sphere = new Sphere(shadedMaterial);・サンプルSWF ・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
背景(風景)の作り方。
風景のテクスチャを張った巨大なボックスを置いて
中にカメラを置くだけですね。
ポリゴンの裏表をひっくり返すには下記のようにします。
material.opposite = true;
立方体よりも球体のほうが自然な感じになると思うけど
パフォーマンスとのトレードオフですね。
大気のテクスチャはLightwaveのSkyTracerで作りましたが
一般的にはどうしてるんだろう？
| パーマリンク
| コメント (0)
| トラックバック (0)
カメラの視野角が広い(パースがきつい)場合に
テクスチャーの歪みが目立つことがあります。
これを補正するのがマテリアルのpreciseプロパティです。
var material1:BitmapMaterial = new BitmapMaterial(bmd); material1.precise = true; var material2:MovieMaterial = new MovieMaterial(clip); material2.precise = true;
camera.fov=30とか視野角が狭く設定してある場合は
precise=falseのままでも歪みは目立たないです。
追記：6月10日21:25
未検証ですがprecise=trueはかなり負荷が高いらしいのでむやみに使わないほうが良いかもしれません。
| パーマリンク
| コメント (0)
| トラックバック (0)
デフォルトではテクスチャーのジャギーが目立ちますが、
マテリアルのsmoothプロパティをtrueにするとスムージングが掛かって滑らかになります。
var material1:MovieMaterial = new MovieMaterial(clip); material1.smooth = true; var material2:BitmapMaterial = new BitmapMaterial(bmd); material2.smooth = true;・サンプルSWF ・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
１つのオブジェクトを任意の平面で分割して、2つに分ける方法について。
下記のようにMeshUtil.cutTriangleMesh()を使うと
2つに分割されて配列が返ってきます。
//分割実行 var meshes:Array =MeshUtil.cutTriangleMesh(originalMesh, cuttingPlane); //表示リストに加える scene.addChild(meshes[0]); scene.addChild(meshes[1]);・サンプルSWF ・ソースファイル
| パーマリンク
| コメント (0)
| トラックバック (0)
Papervision3Dを勉強しなさい、とのお告げを受けたので
主要ポイントを押さえていくことにします。
まずは、QuadrantRenderEngineクラスについて。
これはポリゴン同士が交差したり接近した時に
表示が欠けるというか、前後関係がおかしくなる問題を
解決するためのクラスです。
使い方は下記のようにレンダラとして指定するだけです。
renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);
引数は下記の3種類あります。
・QuadrantRenderEngine.CORRECT_Z_FILTER
→ポリゴンの前後関係を正しくなるよう並び替える。
ただし交差し合っているポリゴンは補正できない。
・QuadrantRenderEngine.QUAD_SPLIT_FILTER
→必要に応じて交差ポリゴンを分割する。
・QuadrantRenderEngine.ALL_FILTERS
→上記２つを両方実行する。
処理が遅いので、相当ローポリゴンの場合にのみ使うのが
良さそうです。
| パーマリンク
| コメント (0)
| トラックバック (0)
久しぶりにPapervisionでも試してみようと思ったら、DAEクラスがアップデートされてるじゃないですか。
Papervision3D 2.1 - alpha | Floorplanner Tech Blog
念願の複数アニメーションの再生がサポートされています。
下記のようにAnimationClip3Dを使うことでアニメーションを切り分けて再生することができます。
//開始時間0秒～終了時間0.5秒のモーションを"walk"と名づける
var anim1:AnimationClip3D = new AnimationClip3D("walk", 0, 0.5);
//開始時間0.5秒～終了時間1.5秒のモーションは"bow"と名づける
var anim2:AnimationClip3D = new AnimationClip3D("bow", 0.5, 1.5);
//DAEインスタンスにアニメーションクリップを追加
dae.animation.addClip(anim1);
dae.animation.addClip(anim2);
//"walk"モーションをループ再生
dae.play("walk", true);
Lightwaveからアニメーションつき.daeへのコンバートはUnwap3Dで問題なくできました。
ようやく3Dゲームとか作れる環境が整ってきたかな。
| パーマリンク
| コメント (0)
| トラックバック (0)
Lightwave9.6のCollada Exporterではボーンモーションをきちんと書きだせないようなので、諦めかけていたんだけど。
詳しい解説がありました！この情報を探してたんですよ、感謝です。
LightwaveからColladaファイルを書き出すよ | Yellow Soup
今からBlenderとかMax覚えるの大変だからUnwrap 3D買いますよ。
| パーマリンク
| コメント (0)
| トラックバック (0)
そろそろPV3Dの勉強をしようと思い、colladaファイルの読み込みしようとしたら
ムービープレビューで下記のエラーがトレースされ、テクスチャが表示されない...
ERROR: BitmapFileMaterial: Unable to load file
ERROR: MaterialObject3D: transformUV() material.bitmap not found!
ちなみにブラウザで再生すると問題ない。
原因はDAE.asの1443行目にある下記。
material.texture = url + "?nc=" + Math.random();
単純にmaterial.texture = url ;とすれば解決するけど、
上記は同じdaeのインスタンスを複数作った時のためにあえてやってるらしいので
触らないほうがいいのかもね。
Lightwave9.5.1Trialから直接collada書き出ししてちゃんと表示できた。
が、なぜか２回目以降の書き出しが正しくできないので、毎回Lightwave終了させないといけない。
BasicViewのデフォルトではcamera.z=-1000だが、それだとカメラが遠すぎて見えない。
Lightwave上で数メートルのオブジェクトの場合はcamera.z=-10くらいが適切。
| パーマリンク
| コメント (0)
| トラックバック (0)
http://labs.getoutsmart.com/archives/2007/05/02/3d-engine-demo/
さすがにアバターはビルボードだけど、壁に2Dのコンポーネントが貼り付けられるのが良いな。
| パーマリンク
| コメント (0)
| トラックバック (0)
今日もちょっとだけPapervision3Dを触ってみる。
http://www.kyucon.com/blog/archives/papervision_2.html
いずれはゲーム作りたいなぁ。
| パーマリンク
| コメント (0)
| トラックバック (0)
Papervision3Dを試してみたよ。
これが本命かな。ＭＩＴライセンスなのが良い。
ASCII Scene Export(.ase)形式とCollada(.dae)形式のオブジェクトデータを読み込める。
先日のsandyのテストと同じaseを読み込んでみたのがこれ。
SVNからチェックアウトしたasファイルそのままだとimportに失敗するのは何が原因かな？
いったんFlashで開いて保存しなおさないといけなかった。
知ってる人いたら教えて欲しいです。
追記：asファイルのタイムスタンプ絡みらしいけどイマイチはっきりせず。
| パーマリンク
| コメント (0)
| トラックバック (0)
すごいの見つけた。エンジンはまだ未公開だけどこれからが楽しみ。
Irrlicht Engine(C++用のオープンソースエンジン)がベースとのこと。
http://www.custommedia.co.nz/lab/swfz/demo2/
http://www.custommedia.co.nz/swfz-engine/
Irrlicht Engineは、Director用Xtraにもなっていて気になる。
| パーマリンク
| コメント (0)
| トラックバック (0)
僕の中でFlash 3Dが盛り上がってきたのでSandyに続いてWireEngine3Dを試してみた。
Sandyよりもシンプルで扱いやすい感じかな。
OBJ形式のモデルデータを読み込めるのが良いです。
今回作ったのはこちら。
(OBJデータのパースに時間がかかるようです)
| パーマリンク
| コメント (0)
| トラックバック (0)
前のエントリーで「Flashで3Dなんて考えただけで萎える」とか書きつつも、本当は興味津々な訳でしてSandy(オープンソースの3Dライブラリ)をいじり始めました。
色々つまづきながらようやくできたのがこれ。.ase形式のモデルデータを読み込んでテクスチャ張っただけ。
576ポリゴンもあるのでさすがにフレームレート落ちるね。
Sandyの力を借りれば、ちょっとした3Dコンテンツなら出来なくもないかなと思いました。
| パーマリンク
| コメント (0)
| トラックバック (0)
http://www.burg-halle.de/~st2520/
よく作るなぁ。
Flashで3Dなんて考えただけで萎える。
| パーマリンク
http://roxik.com/pictaps/
http://roxik.com/toy1.html
いやぁ、久しぶりに衝撃を受けました。
ほんとすごいとしか言いようがない。
| パーマリンク
| コメント (0)
| トラックバック (0)