Flashで3Dなお絵描き

大学の時にブラウザ上で3Dモデルに絵を描くアプリケーションを作りました。

長い間ブログを放置していたので、それの紹介でもしたいと思います。

まずブラウザで3Dを扱うというのはあまりない話です。重いですし。
下のリンクでは描いたテクスチャを3Dモデルに貼り付けるようなことをやっていました。
http://labs.logosware.com/archives/21

なんやかんやあってFlashで作るのがいいだろうって話になって、そこからは自分がいろいろ試して作っていくことになりました。
Flashもそんな詳しいわけではなかったし、3Dは全く分からないというぐらいだったので開発には苦労しました。
ブログの過去記事などを見ると試行錯誤の跡が少し見られると思います。

まず3Dモデルをどうするかという話でしたが、開発メンバーが有料のモデリングソフトもってない、Flashの3Dライブラリでサポートされてるといった点などを考えた結果、Collada(.xml)形式にしました。

で、3Dライブラリは当時（今でも？）一番メジャーなPapervision3Dにしようと考えていました。

http://blog.r3c7.net/?p=333
上の記事を参考にサンプルを作っていきました。3Dモデルの作成や、マウスイベントなど苦労しましたがなんとかそれっぽいものはできました。
じゃあ次はシェーダーを試そうと思った時に問題が起きました。
http://aaharu.blogspot.com/2009/10/pv3duv.html
UVマッピングを使用したモデルにシェーダーを適用すると黒い線が出てきました。
これの解決方法は結局わからず、Papervision3D以外のライブラリではどうなのか試してみることにしました。

で、試したのがAway3Dです。
まあFlashの3Dライブラリといってもメジャーなのは、Papervision3DとAway3DとAlternativa3Dぐらいでしたし、Papervision3Dから派生したものだと聞いて今までのが移植しやすいかなーと。

それで試した結果、Away3Dは問題なく動作することがわかり、3DライブラリはAway3Dを使用することに決めました。
Away3Dにして良かった点はいくつかありました。
・上の黒い線の問題が解決したこと
・3Dマウスイベントが豊富なこと
・シェーダーなども豊富で、きれいであったこと
絵を描くということを考えると3Dのオブジェクトのマウスイベントがあるのはとてもよかったです。
悪いと思った点もいくらかあります。
・重い
・そんなに移植しやすいわけではなかった

とそんな感じでぐだぐだと作りました。
せっかくなので、FlashDevelopで書き直した、一部機能削除版をソースコードごと公開します。（開発時はFlashBuilderを使いました。学生だったので無料ライセンスで）
今見るといろいろと直したくなりますがそこらへんは許してやってください。

Flexアプリ http://www.aaharu.com/data/UruLabCreater.swf
ソースコード(Flex) http://www.aaharu.com/data/srcview_urulabcreater/index.html
ソースコード(ライブラリ)http://www.aaharu.com/data/srcview_urulab/index.html

ソースコード書き出し後に修正行ってるのでソースコード最新じゃないですけどだいたいあってます。

無料で3Dモデルデータを作成する-回転体 その３

前回の続きです。

その３ Google SketchUp

SketchUp（無料版）での回転体の作り方を紹介します。
他にもっといいやり方があるかもしれませんが、とりあえず自分がやった方法を紹介。

最初に起動したときの画面はこんな感じです。
まずはマウスのホイールを操作して、視点移動の操作に慣れます。難しくはないと思うのですぐに慣れると思います。


１．長方形ツールで適当な平面を描きます。


２．線ツールで線を描きます。これは回転軸なので、先ほど描いた四角形の辺と直角に交わるようにして下さい。


３．線ツール、円弧ツールなどを使い、断面図を描きます。
　　断面図の画像データがあるのなら「ファイル＞インポート」で読み込み、それをなぞるといいです。

画像の断面図は適当に描きました。


４．円ツールを使い、２．で描いた回転軸を中心に円を描きます。
　　回転軸とは垂直に交わるようにして下さい。


５．先ほど描いた円と、断面図の面以外のものは選択ツールで選択し、Deleteしてしまいます。


６．選択ツールで円の面を選択。
　　邪魔だったので定規みたいなのも削除しました。


７．「ツール＞フォローミー」を選択。


８．フォローミーツールで断面図をクリックすると一瞬で回転体ができます。
　　円を削除して、完成です。


書き出せる形式が少ないですが、SketchUpは使いやすいと思います。
単純な立体を扱うならSketchUpはちょうどいいんじゃないかな。
始める前に3Dギャラリーを覗いて他の人の作品を見ておくといいでしょう。


その４に続きます。

無料で3Dモデルデータを作成する-回転体 その１＆２

その１ 紹介

最近断面図から立体モデル、つまり2Dの画像データから3Dのモデルのデータを作成する作業を勉強してました。

メモついでにやり方を紹介します。
ちなみに私は3Dについて全然詳しくありません。専門用語はほとんどわからないレベルです。

そもそも3DCGソフトは値段が高く、操作が複雑なものが多いので敷居は低くありません。
お金もないので今回は無料のソフトを使用し、断面図から回転体を作成してみました。

自分が今回使ったソフトは、Blender、Google SketchUp、Metasequoiaの3つです。

Wikipediaから引用

Blender

特徴的で効率の良い独自のユーザインタフェース(UI)を持つ。
現在、急速な勢いで機能拡張・整備が進んでおり、まだまだ発展途上な部分はあるものの、商用のハイエンド3Dツールと肩を並べるほどの機能群を擁する。

Google SketchUp

米Google Inc.が開発・提供している3Dデザインツール。元々、SketchUpは米@Last Software社が開発と販売を行なっていたが、Googleが同社を2006年3月に買収して全ての権利を引き継いだ。

Metasequoia

3Dモデルの作成（モデリング）に特化した3DCGモデラーであり、トゥーンレンダリング・Pythonスクリプト・プラグイン等の機能を備える。

3DCGモデラーとしての高機能性、ユーザフレンドリーな操作性、フリーウェア版などの入手性の高さなど、日本における3DCGモデラーとして非常に人気が高く、参考書籍も多い。開発者用にライブラリやソースコードを公開しているため、シェアウェア版では多くの開発者によるプラグインを利用することができるようになっている。また、シェアウェア版ではフリーウェア版には無い三面図法を取り入れており操作性が非常に良い。

その２　Blender

まず自分がBlenderを使ってみてどうだったかを紹介します。

一言で言うと、操作性が悪すぎて操作が難し過ぎてまともに使えませんでした。
アニメーションも扱えたり、様々な形式の読み込み＆書き出しに対応していて高機能なのは理解できますが、自分のような初心者には扱えません。
「それでもBlenderを勉強したい！」という方はこちらのサイトで勉強するといいと思います。
わかりやすく丁寧に説明されていると思います。


その３に続きます。