| INDEX |

[f5]簡単なtextureを描画できるようにしてみた

6月 30, 2008

相変わらずおフロをごにょごにょしております。
さて、Processing には texture というメソッドがあって、画像をuv指定で Triangle や Quad を描画できるのですが、その辺り、Astro の drawTriangles メソッドを使うと楽なので、Astroさん待ちかなぁ、と思っていたのですが、やっぱりできたほうがいいなぁと思って限定的ながら実装してみました。
その関係で、drawTriangles もどきなメソッドも実装してみました。

texure を貼り付けた 3D描画はこんな感じです。

画像はPapervisionのサンプルを使わさせていただいています。（※問題あれば変えます。と誰となく)

上のサンプルのコードはこんな感じです。 

import flash.display.Shape;
import flash.events.Event;
import frocessing.core.F5Graphics3D;
import frocessing.f3d.model.F3DSphere;
import frocessing.math.FMath;
var w:Number = stage.stageWidth;
var h:Number = stage.stageHeight;
var a:Number = 0;
var camera_pan:Number = 0;
var camera_pth:Number = 0;
var sp:Shape = Shape( addChild(new Shape()) );
var fg:F5Graphics3D = new F5Graphics3D( sp.graphics, w, h );
var earth:F3DSphere = new F3DSphere( 30, 12 );
earth.setTexture( new Earth(0,0) );
var bgspace:F3DSphere = new F3DSphere( 400, 12 );
bgspace.setTexture( new Space(0,0) );
stage.quality = "medium";
fg.noStroke();
function draw( e:Event ):void
{
fg.beginDraw();
camera_pan += ( FMath.radians( mouseX - w/2 ) - camera_pan )*0.2;
camera_pth += ( FMath.radians( mouseY/2 ) - camera_pth )*0.2;
var camera_x:Number = 100.0*Math.cos( camera_pan );
var camera_y:Number = 100.0*Math.cos( camera_pth );
var camera_z:Number = 100.0*Math.sin( camera_pan );
fg.camera( w/2 + camera_x, h/2 + camera_y, camera_z );
fg.translate(w/2, h/2, 0);
fg.pushMatrix();
fg.rotateY( -a*0.2 );
fg.backFaceCulling = false;
fg.model( bgspace );
fg.popMatrix();
fg.rotateY( a );
fg.backFaceCulling = true;
fg.model( earth );
a += 0.01;
fg.endDraw();
}
addEventListener( Event.ENTER_FRAME, draw );

frocessing.display.F5MovieClip3D を DocumentClass にした場合はこんな感じ。ちょと簡単に見えます。 

var w:Number = fg.width;
var h:Number = fg.height;
var a:Number = 0;
var camera_pan:Number = 0;
var camera_pth:Number = 0;
var earth:F3DSphere = new F3DSphere( 30, 12 );
earth.setTexture( new Earth(0,0) );
var bgspace:F3DSphere = new F3DSphere( 400, 12 );
bgspace.setTexture( new Space(0,0) );
QMedium();
noStroke();
function draw():void
{
camera_pan += ( radians( mouseX - w/2 ) - camera_pan )*0.2;
camera_pth += ( radians( mouseY/2 ) - camera_pth )*0.2;
var camera_x:Number = 100.0*cos( camera_pan );
var camera_y:Number = 100.0*cos( camera_pth );
var camera_z:Number = 100.0*sin( camera_pan );
camera( w/2 + camera_x, h/2 + camera_y, camera_z );
translate(w/2, h/2, 0);
pushMatrix();
rotateY( -a*0.2 );
fg.backFaceCulling = false;
model( bgspace );
popMatrix();
rotateY( a );
fg.backFaceCulling = true;
model( earth );
a += 0.01;
}

3D関係をごにょごにょしている関係で、ソースがわりと荒れているのですが、ぼちぼち落ち着けていきたいです。あと、となりの人の意見など聞きながら、3D関連のクラス名とかメソッド名とか変わりそう。

個人的には、FBitmapGraphics や FMatrix2D.createUVBox() あたりが便利に使えるのかなぁとか思ったりしてますが、どうでしょうか。drawTriangles もどきは、F5Graphics3D.drawBitmapTriangles() あたりです。

なんだか PV3D やら Away3D やらあるから今更いいじゃないかって向きもあると思いますが、ぼちぼち楽しんでやっております。

追記：ちょっと3Dまわりを整理して、backfacecullingを入れたので若干ソースを修正しました。（2008/7/15）

| INDEX |