ARCHIVE  ENTRY  COMMENT  TRACKBACK  CATEGORY  PROFILE  OTHERS
<< January 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

ねんどたにあんシリーズ [NDS] サガ2・プレイ日記 Diablo HD MOD 週刊 ちょうさを作る

JavaScriptでポリゴーン

  〜 2013/06/01 〜
以前、「DOPPO CREATOR」なるWEBサービス(と呼ぶのもおこがましいですが・・・)を作りました。ドットなポリゴン(略してドッポ)をポチポチ打っていって、それを3Dモデリングソフトで読めるOBJ形式で出力するプログラムです。んまぁー、多分、誰得?俺得!なサービスだとは思うのですが…。

この「DOPPO CREATOR」ですが、技術的な実験も含めて作った代物でして、コンセプトは「FLASHみたいなリッチな技術じゃなくて、JavaScriptとかPerlとか、あまりリッチじゃない技術で頑張ってみよう」でした。配布型のアプリケーションとかは嫌だった(わざわざ得体の知れない人が作ったEXEファイルなんて実行したくないよね!)ので、ブラウザアプリにしようと思っていて、操作インタフェースはJavaScript、OBJ変換処理はPerlでガシガシ実装してみました。意外とリッチじゃない技術でも、それなりにリッチな表現って出来るんだなーっていう当時の感想でした。

さてさて、そんな「DOPPO CREATOR」だったのですが、1つだけずっと悩んでいたことがありました。それは「直感的なプレビュー機能」が無い事。16*16*16というかなり広大なドットマップをポチポチ打っていくので、実際に出力すると「ぉぉぅ、1ドットミスっとる・・・orz」ということもしばしば。そういう時のために「前回の出力データを読み込む機能」は用意しているのですが、やっぱり全体的なバランスを見るためにも「直感的なプレビュー機能」が必要だなぁ〜とはずっと思っていたのです。

直感的なプレビュー機能とは何なのか? 3D表示でしょ!(`・ω・´)

ということで、折角の3Dポリゴンサービスなんだから、3D表示でのプレビュー機能はずっと考えていたんですが、それを実現しようとするとやっぱりFLASHとかに頼ることになって、当初のコンセプトから外れるんですよね。そんなこんなでずっと断念してたのですが、昨今、JavaScriptでかなり本格的に3D表示ができること方法があるみたいなんで試してみました。

何を使って実装するのか? Three.jsでしょ!!(`・ω・´)

ってことで、やっと本題。まずは準備段階として、Three.jsを使ってポリゴン表示の習作造ってみようってことでポチポチ組んでみました。とりあえず、既作の「DOPPO CREATOR」にポン付けすることを前提にサンプル作成です。「DOPPO CREATOR」は、各種イベント(色を変えた、消した、etc)が発生すると「どの(XYZ)座標が、どのマテリアル(色)で、どうした」というトリガーを引くようにしていたので、それ前提に実装を考えました。

まずは、全体的なポリゴン表示の方針をどうするか。イベントトリガーに応じて、ポリゴン形状を頂点座標からポチポチ作っていって表示・・・とも思ったのですが、塗りつぶし機能(みたいなの)も有るので、意外とイベントが短時間で発生することもザラです。その場合、一々ドット情報を元にポリゴンを作っていくのは遅いんじゃ?ということでこの方針は断念。それなら、最初からドット単位に立方体のポリゴンを作っておいて、イベント発生時に対象のポリゴンだけ処理(色変えたり、消したり)していくのはどうだろう?その場合、すぐに思いつく懸念は「16*16*16個の立方体ポリゴンを作るので重そう!」です。断念した頂点座標でポチポチポリゴン作っていく方式は、作るのにコストが掛かるけど、作ったポリゴンは面数が最小になるのでそれなりに軽いのです(OBJ形式に出力するときはちゃんとやってるけど、見えないところにある余計な面はちゃんと削除してるからね)。でも、逐次発生するイベントの事を考えると、多少重くても使用に耐えられるのなら後者の方が良さそう〜ってことで、試しに実装してみました。

もう、文章ばっかりでやになっちゃいますね、読んでくれてる人いるのか…(;´д`)

で、結論を言うと、「グリグリ動かして描写処理が走ってるときは多少重いけど、多分イケル」でした。実装当初はかなり重かったのですが、マテリアルとかメッシュのインスタンスを出来る限り共有させてやって、何とか重さも軽減されました。まだ「DOPPO CREATOR」には組み込んでいないのでイベントを連続発生した際の描写処理がどうなるかは試せてないのですが、多分、大丈夫じゃないかな〜っと。イベント発生のトリガーも食える形で仮実装してみたので、ポン付けもすぐ出来そうですし。

とりあえず、今回作成したサンプルを↓にて。Three.js自体がWebGLに対応したブラウザじゃないと動かないので、サンプルが動くかどうかは見る人次第。IEは10でも動きません、IE11で動くようになるかもしれません(Google Chrome Frameを入れると動くとか?)。とりあえずChromeなら動きまする。ホントはCanvas、SVG、CSS3D用レンダラも扱えるのでIEとかでも見れるのですが、試してみたら実用に耐えられない重さでしたっ(・ω<)テヘペロ


画像クリックでサンプルに移動。とりあえずドラッグでポリゴン回転、ドット座標指定しての色変更と削除、縮尺変更、ワイヤーフレーム表示(トグル)が出来まする。

サンプル作ってみた感想は、JavaScriptでここまで&こんなに簡単に3D表現ができるとか凄いなーです。いや、Three.jsが優れているのと、サンプルとか見るともっともっと凄いことが出来るので、決して満足してるわけじゃないんですが。。。それでも、色んな可能性があって、今後も色々試してみたいなーThree.js。

ここまで来て為になりそうな技術的なお話無し。もし「Three.js ポリゴン 表示」とかで来られた方、すみませぬ。↑のサンプルのソースを見て頂ければと思いますが、あまりお役に立たないようなしょぼーい内容です。内容が無いよう、なんつってー(・ω<)テヘペロ


【2013/06/01追記】
あれから、サクッと「DOPPO CREATOR」へのプレビュー機能取り込みをやってみました。イベント連携のI/Fをあわせていたのでホントにそのままポン付けできました。むしろ、用意していた削除処理は色変更処理でうまいこと共有してたので、ポン付けに際して用意していた削除機能が不要に。

とりあえず問題なく動いてるっぽいので新バージョンとして公開。それと今回のバージョンアップに伴い、「[cg]向けファイル出力機能」は機能削除しました。件の[cg]さんですが、どうも運用会社が変わってから元気が無くなり、未だに接続できなくることも多いし、3Dデータ登録もまだ再開してないようですしね・・・残念です。
コメント
ぉぉ・・・・
動いてる・・・・ぐるぐるしてる

すげぃぞこいつo(´□`o)
  • ぉ茶
  • 2013.06.07 Friday 20:34
>ぉ茶さん
むふふ、動くブラウザが限られているので動いて何より!
綺麗な動きしてるだろ、これJavaScriptだけなんだぜ・・・
  • ぺいる
  • 2013.06.08 Saturday 13:22
コメントする








 
この記事のトラックバックURL
トラックバック
トップへ




ウルティマ ゲームタイム 180 をAmazonで購入する ウルティマ ゲームタイム 90 をAmazonで購入する ウルティマ ゲームタイム 30 をAmazonで購入する
ウルティマ ゲームタイムの価格推移はこちら!
more...