Month: 1月 2009

エッジウェイトツールについて

手の部分のモデリングが一応できあがり。三角ポリゴンを作ってしまったのと、見る角度によって気に入らない形になったりするけれども(薬指が変)、まぁ後々再チャレンジしていくということで。

ゴーレムの手

ついでに手の周りが寂しかったので急遽輪っかを追加させました。その際にやっとエッジウェイトツールの使い方が分かったのでメモ。

輪っかの作成完了

穴が空いた輪っかのような形は、円柱プリミティブからエッジをベベルして、穴の部分はブリッジツールで作成します。
穴空き

しかしこれをサブディビジョンサーフェイスで表示させるとこうなります。
サブディビジョンサーフェイスあり

でもこれは自分の作成させたい形ではなく、もっとエッジを際立たせたいわけです。その時に使用するのがエッジウェイトツール。やり方はサブディビジョンサーフェイスを切った状態(の方が分かりやすい)でエッジを選択し、「頂点マップ」⇒「エッジウェイトツール」を選んで、この場合は100%とします。すると奇麗なカクカクドーナツのできあがり!気持ちいい形。
カクカクドーナツ完成

shadowboxを無理矢理入れてみた。

swfファイルをいちいちswfObjectで表示させるのはめんどくさいなと思って、shadowboxを入れました。WordPressであればいつものプラグインで簡単にできそうなものですが、javascriptに知識が全く無い自分にはなかなか難しく、結局本家のコードを無理矢理貼付けるというやり方でできました。

【設置の仕方(jquaryを使用します)】
1.shadowboxをダウンロードします(ページの下のFullのバージョンをクリック)。jquaryが無い場合はこちらもダウンロード(とりあえずDEVELOPMENTの方を)してください。

2.ダウンロード後、解凍してできたshadowbox-2.0フォルダ内の「src」の中身を、お好きな場所にアップロードします(私はhttp://www.ドメイン/press/js/にアップしました)。jquaryのファイルもjquary.jsとリネームして同階層にアップします。

3.WordPressのプラグインであればスキンや細かい設定を調整できるのですが、できなかったので標準のスキンのclassicで設定します。WordPressならヘッダー.phpの</head>内に下記のコードをペーストします。

<script type="text/javascript" src="http://www. hoge/js/jquery.js"></script>
<script type="text/javascript" src="http://www.hoge/js/adapter/shadowbox-jquery.js"></script>
<script type="text/javascript" src=" hoge/js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'js/skin');←元はsrc/skinです
Shadowbox.loadLanguage('en', 'js/lang');←元はsrc/langです
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], 'js/player');←元はsrc/playerです
window.onload = function(){
    Shadowbox.init();
};
</script>

要するに最初にjquaryを読み込み、次にアップロードした「adapter/shadowbox-jquery.js(このファイルはjquary専用のjsみたい)」、「shadowbox.js」を読み込み、次にjavascriptを発動させます。javascriptのコードの部分はスキンやロードできるファイルを設定できるみたいです。ブログなどの場合、ページにより”js/player”等のアドレスが変わってくる場合があるので絶対パスで指定した方がいいかもしれません。
使ってみた感じとしてはもちろんいい感じなのですが、どうもページの表示が遅くなったような・・・。

ShadowBoxのデモ

デモはaway3Dで色々いじってみたサンプル。しかしオブジェクトが実は反転していたのでメソッドも逆にしてます。どうしたものか。これはもしかしたらaway3Dの座標系と3D制作ソフトと違うせいかもしれません(右手系、左手系ってやつ)。タイヤも動かないし、キーボードでもうちょっとスムーズに移動できるようにしなくては。

どうせなら手も作ろう。

前回でディスプレースメントの感じをつかんだところで、やっぱり手も作ってUVの作成などを最初からやり直すことにしました。手の部分が全く表示されないのも寂しいですし。
手のモデリングは手首以外を「H」キーで非表示にして作業に取りかかります(元に表示させるのは「U」キー)。手首から手の甲の部分のエッジを引っ張って行って、親指も部分もそれぞれ引っ張っていきます。

ゴーレムの手

かなり無計画に始めた割には今のところうまくいっています。僕はなにかと早とちりなので一気に指まで引っ張ってしまいましたが、手のひらを先に作ってから指をのばした方がいいかもしれません。

手がだいたい完成

ちょっとポリゴンの調整に時間がかかってしまいましたが、だいたいの形ができました。ここからはメッシュのスカルプトでザッと調整します。結局指のディテールはそこまでこだわりませんし。

as3用のブログを作りました。

勉強も兼ねてMovableTypeでas3用のブログを作りました。

uxic.net note

実際のところは以前にFC2でやっていたんですけど、色々と不都合が出てきたのでレンタルサーバーに引っ越したんですが、これまた色々と大変だったので過去の記事に関しては表示されなかったりリンクしてなくても放置ということでアップしてしまいました。こっちのブログはas3メインでやっていく予定です。
しかしMovableTypeで作ってはみましたが、WPの方が楽な感じですね・・・。投稿もサックリと更新してくれますし、ブログのデザイン、機能のカスタマイズもシンプルにできます。MovableTypeなんて記事を書いて保存したら「構築中・・・」って15秒ぐらい待たされるしデザインのカスタマイズもこんなに細かくやらねぇよってぐらい項目があって最初テンパりましたよ。今のところxmlを簡単に書き出してくれること以外はいいところ見つけれてないです。最近WPでもxml書き出せるってのもあったけど。

ゴーレムの制作

前回の続きから、ディスプレースメントしてみてからテストでレンダリングしてみました。
照明は2つでUVの切り方がひどいためにテクスチャとバンプの解像度がグチャグチャなのですが、写真ぽくなるところがmodoのレンダリングの凄いところ。なんか安っぽいフィギュアみたいになりました。

実はここまでくるのにすら色々と悩みました。ディスプレースメントが設定してあるのにレンダリングされなかったのです。

右はディスプレースメントが効いているのにプレビューは効いていない。マテリアルのディスプレースメント距離をいじってもダメ。どうしたものかとコミュニティに質問する気になってた矢先に、スケールがエラいことになってるのに気づきました。

コレを正常に戻したらちゃんとできました。よかったよかった。カメラの大きさも変だなぁ〜と思っていたのですが、それも併せて解決できました。

さて次は兜を作らなくてはいけないんですが、こちらはエッジのウェイトがうまくいかなくて苦戦中!

次のモデルの作成。

今までED209を作っていましたが、UVとテクスチャの枚数が多くてさっぱりワケが分からない状況になってしまったので、もう少しUVとテクスチャの基本を勉強しようと思い、別のモデルを作成してみることにしました。ファンタジーなマッチョ野郎のゴーレムです。の上半身です。よく3Dのギャラリーサイトとかでありそうな感じだったのと、ディスプレースメントの勉強もやらないとな〜と思ったので。

モデリングは落書きとかを右面図と正面図に取り込んで、それをトレースするのが普通なのかもしれませんが、奇麗な横面図、正面図が書けない自分の画力の無さに幻滅したので、何も無いところからいきなりモデリングすることにしました。資料は自分の落書きのみ。

正面図で書いた板ポリゴンを右面図で「拡張(Z)」とShiftキーを使ってどんどん引っ張っていきます。それを横(X)方向にまた引っ張ります。胴周りは比較的簡単です。

後は顔に向けてポリゴンを埋めていくだけなんですが、やっぱり顔の部分は難しいです。特に顎から首に向けての部分のつなぎ目の処理が難しい。今回のモデルは兜があるので、顔のディテールは適当にしました。適当といっても難しいんですけど。

このあたりのモデリングになると、片方だけだと良く形が想像しにくいので、もう鏡面コピーしています。対象を「X」にするのを忘れずに。

ここからもうUVの作成をしてディスプレースメントに進んだのですが、UVの切り方を失敗したもようです。
当初作成したUVは以下。

問題の肩の部分の切り方

上記のように肩のつながった部分にメスを入れてUVを作成してしまうと、ディスプレースメントする際につなぎ目がスムーズになりません。

UVの比率(大きさ)が違うために、ディスプレースメント具合も変わる訳です。これに対処するには
・UVの大きさを揃える
・目に入る部分にはUVを切らない
くらいしか思いつかなかったのですが、そもそもポリゴンのディスプレースメントでもっと形を作ることにしました。

ポリゴンのディスプレースメントはそこそこポリゴン数を増やしてやらないと効果がない(やりにくい)ので「D」キーでポリゴンを増やしてやります。モデルに関して言えば、首の筋を奇麗に出してやる為にポリゴンを増やしました。まずは途中経過の画像。いい感じだ。

長くなったので次のエントリーに持ち越します。

体感スピードへのこだわり。

最近Flashやブラウザなどのスピードについて興味深い記事がカブッたのでメモ。

ウェブデザイナーの中村勇吾氏「旧世代サイトを見直したい」
上記のサイトの中で中村勇吾氏がflashなどのコンタンツがサクサク動くことがとても重要だと言っています。

僕のようなインターフェースマニアからすると、高速でさくさく動いて、きれいに整備されたインターフェースにしたら、それが売りになるに決まってるじゃん、と思う部分があるんです。

僕はflashのゲームっぽいコンテンツなどは、まず面白いこと、分かりやすいことが最重要で、多少もたつくのはしょうがないだろ〜と思っていましたが、その考えを改めないといけませんね。
また若干ズレますが、高速なブラウザとして今や1%のシェアをとったと言われているGoogle Chromeですが、こちらもブラウザの体感スピードにはかなり尽力されている様子です。

Chromeはなぜ速いのか

この記事ではコンテンツ表示結果のスピードによりどれだけユーザーが離れてしまうかが具体的に発表されています。

 1つは検索サービスに関するユーザーテストの結果だ。通常、検索結果には1ページ当たり10のリンクが含まれるが、ユーザーにどのぐらい検索結果数がほしいかと尋ねると、ほとんどの人がより多くと答えたという。ところが、実際に結果数を30に増やして実験したところ、トラフィックも収益も20%も落ちてしまったという。理由は、10の結果を返すのに0.4秒だったものが、30の結果を返すのに0.9秒と0.5秒余計にかかっているから、だったという。

 メイヤー氏は、Googleマップでは、Webページを100KBから70~80KBに減らしたことで翌週にトラフィックが10%、その後3週間で25%伸びたことがあるとも指摘する。

1秒以下の応答性の違いでここまでユーザーの動向に違いがでるとは驚きです。

UVを展開中。

昨年に作ったED209のUVの作成にとりかかります。
UV展開ツールで一気にバッと開けたらよいのですが、これはどうも人間のような有機的でポリゴン同士が全部がつながったものには有効でも、各パーツに分かれてしまっている機械部品等には向かないのかな?なので各パーツを一つ一つUVを作ってやる必要があるみたいです。(便利な機能があるのかもしれません)

やり方としては、細かいディテールが必要な部分に関しては正面図、または上面図などで一番表面の画像がゆがみにくいと思われるビューからUVツールの「ビューからプロジェクト」を使ってマップを作ります。その後は「移動を縫合」を使ってチマチマくっつけていきます(現時点でこれがよいやり方なのかわかりません)。細かいディテールが必要ない部分、例えば色が1色の部分やあまり見えない部分に関してはとっても小さいマップで対応してしまいます。そして歪んでいても無視!現段階のUVが以下。

いろいろ問題はありますが、まずはできることが第一目標です。なんか背景に線があるのですが、これがなんなのかよくわかってません。これも気合で無視です!

《2009.01.09追記》
上の記事の背景になんかあるやつの原因がわかりました。メッシュごとにテクスチャが設定してあったからなんですね。
もともとモデルをASで動かす予定だったので稼動する部分ごとにメッシュを分けていたため、メッシュごとのUVが重なっていたという。さっそくUVを削除して作業開始。

やっていくうちに少しずつ要領がわかってきました。作業の流れとしては

1)ビューポート上で作成したいポリゴンを選択

2)UVプロジェクションツール(投影タイプはアトラス)か、展開ツールでUV作成

3)大抵は作成されたUVが斜めになっているので、「UVのバック」で水平にする。ここでUVの線が気に入らない場合はエッジを選択して「UVの整列」を行う

以上で出来上がるのですが、ポイントとして1)のポリゴンの選択はポリゴンが”繋がっていない”ように選択することです。

全部選択して「展開ツール」した場合(UVがかぶってしまいます)

繋がっていないように選択(斜めだけど形は近い)

繋がっていないように選択すれば形もあまり崩れませんし、残りのポリゴンを選択してUV作成し、エッジを選択して繋げればバッチリ(のはず)です。

今年の抱負。

今までブログで新年の抱負とかやっていなかったので。

新年の抱負は「modoとasの鍛錬」です。
そしてその成果をセミナーで発表することです。

旧年の出来事として一番大きかったのがWCANに参加できたことでした。それまで勉強会というのは「宣伝会議」のセミナーとかだったので、もっと早くこれを知っていれば!とかなり悔しい思いをしました。WCANのようなイベントに参加すると、モチベーションもあがりますし、知らない方とのコミュニケーションが生まれたのは大きかったです。

その新しい出会いの中で「modo」というすばらしいソフトに出会えたのはラッキーだと思っています。Zbrushにも惹かれましたが、このソフトだとas用のローポリゴンモデルの作成には向かないようだし、lightwaveの方が高機能なのかもしれませんが、とりあえず高度なアニメーションは必要ないですし、プラグイン無しで(面とりぃプラグインとか)必要な機能が揃っていてレンダリングも強力なので現時点ではベストな選択だったと思います。このソフトを紹介していただいて感謝です!(その方のブログ

というわけでまずはmodoを勉強して、最終的にはmodoの勉強会をやれたらいいな~と思っています。僕の出し物はasで動かすっていう(ちょっと卑怯か)。

そんなわけでこのブログを見てくださった方含めてて今年もよろしくお願いします。

© 2017 UXIC.net

Theme by Anders NorenUp ↑