タグ「drawtriangles」が付けられているもの

claptaps project[4]

lightwaveで単位プリミティブのcubeを
作ってflashへ移植。

ball同様、uv反転したので
オブジェクトをz軸で上下逆にしてobj書き出し。

マッピングするテクスチャのサイズが
ある程度の高さと幅がないと
描画が荒れる。

一面のサイズが等倍より少し小さいくらいだから
いけるかと思ったが、全然綺麗さがちがった。

右の方は、photoshopでむりやり引き延ばしているので
少し緩いのはそのため。

img_150121_3.jpg

claptaps project[3]

lightwabeからobjファイルを書き出してflashで再構築。
planeはうまくいったけど、ballでいきなり問題発生。

lightwaveでテクスチャマッピングしたら
オブジェクトから見て、正面と左面のマッピングが
左右逆になってる。

img_150121_1.jpg


flash上では、そのままその2面だけ逆になって
素直に描画されているので
lightwave上でその部分のテクスチャマッピングを
反転すれば良いと考える。

1、lightwaveで単位プリミティブなballを作る
2、マップの新規UVテクスチャ アトラスでUV作成
3、色・質感編集のTでUVと画像を選択。
(この時点で左右逆になっている)
4、詳細の結合(統合)解除で反転させる部分の結合を加除
5、ポリゴン選択して該当部分をUV反転
(この時点でlightwaveできれいに表示される)
img_150121_2.jpg



で、ここからまた問題発生。
flashへ持っていくと、上下が逆になってる。
(z軸で180°回転してる)

うそーーーーーーーー。。。。

なんか、UV反転か結合解除した時点で
こうなる事が判明。obj内の順番が代わるのだろうか?
結合解除した部分を再結合してみたりしたが
一回解除するともうダメみたい。

UVが回転してるのではなく、オブジェクト自体が回転してるので
しかたなく、lightwave上で上下逆になるようにz軸回転させてflashへ。

無事表示されました。

objファイル内のくくり方が代わるんだろうけど
これはどうにもならない気がするので、
しばらくは上記対応にするか。。。






claptaps project[2]

忘れない為にメモ。

lightwaveからobjファイルを書き出す。
とりあえず一辺500mmのplaneを作った。正面の向きはxz方向。(lw上で回転させてxyにしてません。)

objファイルを分解すると
v:頂点座標
vt:uvt座標(一辺が0〜1で表される)
f:頂点座標/uvt座標/頂点番号
になっている。

fは頂点番号に対応する頂点座標ナンバーと
uvt座標ナンバーとなる・・・気がする。
ちなみに、fのuvt座標はlwでuvテクスチャをつくり
色質感編集でtでテクスチャ編集を立ち上げ、uvtextureと画像を選択してから
objファイルで書き出さないとブランクになった。
・・・lwよくわかってないので・・・すみません。

####
#
#    OBJ File Generated by LightWave3D
#    LightWave3D OBJ Export v2.3
#
####
o a.obj
mtllib a.mtl
g default
v -0.5 0 0.5 ・・・①
v 0.5 0 0.5 ・・・②
v 0.5 0 -0.5 ・・・③
v -0.5 0 -0.5 ・・・④
vt 0.0121951 0.0121951 ・・・①
vt 0.0121951 0.987805 ・・・②
vt 0.987805 0.0121951 ・・・③
vt 0.987805 0.987805 ・・・④
vn 0 1 -0
vn 0 1 -0
vn 0 1 -0
vn 0 1 -0
g Default
usemtl Default
s off
f 2/3/1 3/4/2 4/2/3 1/1/4



vが頂点座標なので図にするとこんな感じ。

img_150120_1.jpg


lightwaveの頂点座標は時計回りに書かれている・・・
といいきっていいのかわからないが、そういう事にする。

次にuvt座標。
これはuvテクスチャを書き出している時の
一辺を0〜1で表した時の座標値。
こんな感じ。時計回りではなかった・・・。

img_150120_2.jpg


ちなみに、書き出していたuvテクスチャ。

img_150120_3.jpg



んでここからが大事。

頂点座標とuvt座標のobjファイルに書かれている順番。
上で図にしているけど

頂点座標   uvt座標
①②     ①③
④③     ②④

のようになっていて、
時計回りや反時計回りなどのルールがない。
ここで登場するのがfです。

f 2/3/1 3/4/2 4/2/3 1/1/4だと、
頂点座標の②のところへuvt座標の③
頂点座標の③のところへuvt座標の④
頂点座標の④のところへuvt座標の②
頂点座標の①のところへuvt座標の①
となっていて頂点座標に対応するテクスチャ座標(vt)の順番がわかる。
あとはdrawtrianglesの時に、順番をうまく入れ替えておけばOK!なはず。
多分こんな感じ。これで時計回りで場所が同期してるはず。
頂点座標②③④①
uvt座標③④②①
頂点番号①②③④

で、f1つで1面を構成している気がするので
f 2/3/1 3/4/2 4/2/3 1/1/4だと
頂点4つで四角形になっている。
多角形の一つの頂点から各頂点に線を引いて
三角形が何個できるかだが
両辺には線が引けないので4から2ひいて
2つ三角形が出来る。

三角形の頂点の結び方は
カリングに関係していて、これは自分で決めれるので
TriangleCulling.NEGATIVEのときに
反時計まわりに三角形をつくると画面に対し
正面で描画されることにする。
裏側は同じパス順で描画すると時計回りになるので描画されない。
TriangleCulling.NONEにしてると両面描画で
裏側は逆回りなので反転して描画される。

POSITIVEだと時計回りで正面を描画。

これで全てがつながった。気がする。
後は細かい部分を、つめてきます。



claptaps project[1]

ふと、子供をわくわくさせる物を作りたいと思い
自分の書いた絵が踊りだす物を作る事にしました。

構想や、仕組みを忘れない為にブログに綴っていきます。

流れとしては・・・
1、3Dソフトでobjファイルとして書き出し。
2、flashで利用できるようにobjファイルを解析。
(アニメーションもつけたい!)
3、drawtrianglesで3D描画。
(planeなどアニメーションさせる場合は、xmlかなんかでタイムライン管理)

4、shapeにdrawしているので、それに対して移動/回転

5、各頂点に対して、各軸周りの回転で調整

6、shapeのz値に応じて、各頂点のパース調整

7、視点(カメラ)と描画物を内包するもの(shape)との距離/角度を計算。4、5、6辺りで反映できるようにしておく。

ちょっと、構想段階なので流れメモ。

drawtriangles基本[3]

drawtrianglesの3D表現で
表面/裏面/両面の描画を選択したい時は第4引数のTriangleCullingを設定する。

パターンは3種類で
三角形の頂点番号を時計回りに設定した場合
・TriangleCulling.NONE//両面
・TriangleCulling.POSITIVE//z軸で正となる奥向きの面が描画されない
・TriangleCulling.NEGATIVE//z軸負の手前に向く面が描画されない
*反時計周りで頂点番号を設定した場合は逆になります。

画面に向かってどっちがz軸の正方向かというのは
flashは右手座標系で奥が正方向。
papervision/three.jsなどは左手座標系で手前が正方行。

少しいじってみたが、こんな感じ。
反時計回りで、頂点番号を設定した場合で・・・

TriangleCulling.NEGATIVE

img_150115_2.jpg



TriangleCulling.POSITIVE
内面が表示される。

img_150115_3.jpg



ちなみに、planeなどでないと
NONEに設定するとおかしくなる。


参考URL
07 三角形分割によるテクスチャマッピング - Graphics.drawTriangles()メソッド - ActionScript 3.0 for 3D
Adobe ActionScript 3.0 * カリング

drawtriangles基本[2]

drawtrianglesで3D表現する場合は
頂点の設定にvector3Dを使います。

例えば、cubeの場合、頂点は8つなので・・・
こんな感じ。

cube.push(new Vector3D(-50, -50, -50));
cube.push(new Vector3D(50, -50, -50));
cube.push(new Vector3D(50, 50, -50));
cube.push(new Vector3D(-50, 50, -50));
cube.push(new Vector3D(-50, -50, 50));
cube.push(new Vector3D(50, -50, 50));
cube.push(new Vector3D(50, 50, 50));
cube.push(new Vector3D(-50, 50, 50));

あとはディスプレイで見るので
3D座標から2D座標へ変換していく感じです。
(z値をパース化)

drawtriangles基本[1]

drawtrianglesで行う
3D表現や、変形処理などは三角形を組み合わせて
行われます。

as3のdrawtrianglesを使う時際に必要になってくる物がコレ。
vertices:頂点座標
indices:頂点番号の組み合わせ
uvtdata:テクスチャマッピングのuv座標

で、いつも「あれ?どうだったけ?」となるのが
verticesとuvtDataの順番があってれば
三角形の3ポイントの各順番は順不同
indices.push(3, 1, 2);  1,2,3でもOKということ。

頂点座標のverticesと、0~1であらわされる
テクスチャのuvtdataの示す場所は
アウトプットするときに同じ場所になるように値を入力しておいて
それをindicesで三角形のセットにしていくYO。

忘れないようにメモ。


参考ソース

// 第1フレームアクション 
var mySprite:Sprite = new Sprite(); 
var myGraphics:Graphics = mySprite.graphics; 
var myTexture:BitmapData = new Pen(0, 0); 
// 頂点座標のVectorインスタンス生成 
var vertices:Vector. = new Vector.(); 
// 頂点番号のVectorインスタンス生成 
var indices:Vector. = new Vector.(); 
// uvtデータのVectorインスタンス生成 
var uvtData:Vector. = new Vector.(); 
addChild(mySprite); 
// 三角形の頂点座標を加える(第1引数) 
vertices.push(0, 0);   
// 頂点0 
vertices.push(100, 0);   
// 頂点1 
vertices.push(0, 100);   
// 頂点2 
vertices.push(110, 110);   
// 頂点3


/*******************************************
verticesとuvtDataの順番が会ってれば
三角形の3ポイントの各順番は順不同
indices.push(3, 1, 2);  1,2,3でもOK
********************************************/
// 三角形の頂点番号の組合わせを加える(第2引数 
indices.push(0, 1, 2);   
// 左上半分: 頂点0-1-2 
indices.push(3, 1, 2);   
// 右下半分: 頂点1-2-3 
// テクスチャマッピングのuv座標を加える(第3引数) 


uvtData.push(0, 0);   
// 頂点0 
uvtData.push(1, 0);   
// 頂点1 
uvtData.push(0, 1);   
// 頂点2 
uvtData.push(1, 1);   
// 頂点3 
myGraphics.beginBitmapFill(myTexture); 
myGraphics.drawTriangles(vertices, indices, uvtData);