モバイル端末とWebサーバによるCG画像製作システムの開発

全文

(1)グラフィクスとＣＡＤ 104−16 （２００１．９．１４）. Web. モバイル端末とサーバによる画像製作システムの開発. CG. 望月義典. 西田友是東京大学. 近年、ネットワークインフラの整備が進み、Web を用いたサービスの提供が盛んに行われている。また、ノー. ト PC、携帯電話の i-mode や i ppli のように、モバイル端末からの Web コンテンツの利用も多くなっている。. 本研究では、HTML FORM や Java Applet（i ppli を含む）など、Web クライアントからの指示により、Web. サーバを用いて、高い計算能力を必要とする CG 画像の作成を行うシステムの開発を行った。また、本システム. を用いて、Web を介した CAD システムや CG アニメーション製作などへの応用を行ったので報告する。. Development for CG System on Mobile Terminals and Web Server. Yoshinori Mochizuki Tomoyuki Nishita The University of Tokyo Network infrastructure building is promoted in resent years, and there are many services using the World Wide Web. Accesses to Web contents from mobile terminals such as note PC, cellular phone (i-mode, i ppli), etc., have increased. This paper proposes the Web based CG system. Users specify parameters with the Web client using HTML FORM or Java Applet (including i ppli). The Web server receives these parameters, and executes rendering process which needs a high computational cost. We also apply this system to CAD system and CG animation.. 1. 急激に増加している。しかし、モバイル端末は一般に. はじめに昨今のインターネット関連、とりわけ Web に関する. 処理能力が低く、特に i ppli では Java Applet の実行にもかなりの制約がある。レンダリングによる画像生. サービスの充実は、目覚ましいものがある。ビジネス. 成など、高い計算能力を必要とする処理は、モバイル. を始めとして、各種エンターテインメント、遠隔教育. 端末では厳しいものがあると言わざるを得ない。. など、応用範囲は多種多様な分野にわたっている。そのコンテンツには、HTML はもちろん、Java Applet. そこで、Web クライアントと Web サーバで処理を. や DHTML、VRML、XML なども用いられ、動的な. 分担させ、Web クライアントからは処理に必要な情. コンテンツも数多く見受けられるようになった。その. 報を生成し、Web サーバに指示を送り、指示を受けた. 表現技法として、CG が用いられている場面も多く、そ. Web サーバが、レンダリングなどの高い計算能力を必要とする処理を行い、出力結果を Web クライアント. の役割も非常に高まっている。一方、Web コンテンツを利用する Web クライアン. 側に渡すようなシステムを提案する。本システムによ. トとして、ノート PC、携帯電話の i-mode や i-mode. り、処理能力が低い Web クライアントにおいても、高. 対応 Java（i ppli）[1] のようなモバイル端末も、近年. 度なレンダリング結果を得ることができる。また、レ. 1 −71−.

(2) ンダリングを Web サーバで行うため、Web クライア. より情報をエンコードする必要があるが、これは通常. ントがあれば、プラットホームに依存しない処理が可. Web ブラウザが自動的に行う。 Java Applet では、視点位置や物体位置などをインタラクティブに決定することが可能となる。Web サーバとの接続は、URLConnection クラスを用いることで CGI を呼び出して行う。HTML の FORM のときと違. 能となる。. 2. システム概要. 2.1. システム構成. い、情報を送る際のエンコードは自動的には行われな. 本システムの構成を、図 1 に示す。まず、Web クライアント側で、HTML の FORM や Java Applet から、. いので、URLEncoder クラスの encode メソッドを用いてエンコードする。. 処理に必要な情報を生成し、処理の指示を CGI を通じ. CGI へ必要な情報を送ると、Web サーバが画像生成. て Web サーバに伝達する。Web サーバには取得情報. をして結果を返すのを待つ。画像生成が完了すると、. 解析パーサとレンダリングアプリケーションがあり、. Web クライアントからの情報は取得情報解析パーサ. Web サーバから画像が送られるので、それを受け取って Web クライアントで表示を行う。. が受け取る。取得情報解析パーサは、受け取った情報を、レンダリングアプリケーションが用いるパラメータに適合するように加工する。レンダリングアプリケーションは、受け取ったパラメータをもとに画像生成を. 2.3 2.3.1. 行う。生成された画像は、Web サーバから CGI を通じて Web クライアントに返される。. サーバの処理. 取得情報解析パーサ. Web クライアントから CGI に渡された情報は、Web サーバの取得情報解析パーサが受け取る。情報は文字列として渡されるので、取得情報解析パーサは、文字. Web client. Java Applet・HTML FORM. Web. 列操作に適した perl 言語により記述されている。情報を受け取った取得情報解析パーサは、その情報をデ. 結果表示 Window. コードする。そして、デコードされた情報を、レンダリングアプ. 処理に必要な情報処理の指示. リケーションが利用できるような形式に加工し、設定. 処理結果（HTML、画像）. ファイルとして一旦サーバに保存する。設定ファイルの内部形式は、起動するレンダリングアプリケーショ. 取得情報解析パーサ. パラメータ. ンにより異なる。. レンダリングアプリケーション. 2.3.2. Web server. レンダリングアプリケーション. レンダリングアプリケーションは、C、C++で記述された実行形式や、Java などで記述されており、perl で. 図 1: システム構成図. 記述された取得情報解析パーサからは、外部アプリケーションの呼び出しの形で起動する。レンダリングアプリ 2.2. Web. ケーションには、後述する POV-Ray[2]、Radiance[3]. クライアントの処理. Web クライアントでは、まず画像生成に必要な情報を、HTML の FORM や Java Applet により生成する。 HTML の FORM では、メニュー形式により、物体の種類や色など、いくつか用意された情報から選択する。Web サーバとの接続は、CGI を呼び出すことによって行われる。CGI の呼び出しは、Web ブラウザ上で FORM の SUBMIT ボタンを押したときに実行さ. などがある。起動されたレンダリングアプリケーションは、取得情報解析パーサにより生成された設定ファイルを読み込み、画像生成を行う。生成された画像はファイルに保存され、CGI を通じて Web クライアント側に返す。. 3. Web レンダリングの応用例. れ、それによって、選択された情報が Web サーバに送. 本システムの応用例として、メタボール編集システ. られる。CGI において情報を渡す際には、ある規則に. ム、照明設計システム、モーフィング生成システムを. 2 −72−.

(3) 実装した。以下、各システムの詳細を述べる。 3.1. 3.1.3. 簡易レンダリング. Web クライアント側には、配置したメタボールがどのように見えるかを簡易表示する Java Applet も備. メタボール編集システム. メタボールは、球と球をなめらかに融合させ、有機. わっている。これは、配置したメタボールの融合が、. 的な形状を生成する技法である。その表示にはかなり. 意図した通りに行われるかを確認するのに役立つ。レ. の処理能力が要求されるので、Web を用いてメタボー. ンダリングには、Bezier Clipping 法を用いた西田らの. ルの表示及び編集を行うシステムを構築する。. 方法 [4] を用いる。このアルゴリズムは、比較的高速にメタボール表示を行えるが、反射、屈折属性、影付. 3.1.1. 機能概要. けなどの処理は行っていない。これらの処理は、Web. 本システムは、Web クライアント側に Java Applet によるメタボールエディタを備えている。エディタによりメタボールの編集を行い、その位置や半径、視点. サーバにより行う。 3.1.4. レンダリング処理の流れ. 位置などの情報を Web サーバに渡す。情報を受け取っ. メタボールのレンダリングは、POV-Ray[2] という. た Web サーバ側で画像生成を行い、その結果を Web. レイトレーシングアプリケーションにより行われる。. クライアント側で表示する。. POV-Ray では、視点情報や物体の位置、属性などの情報を、シーンファイルと呼ばれる設定ファイルから. 3.1.2. メタボールエディタ. 読み出し、それをもとにしてレンダリングを行う。. メタボールエディタの操作画面を図 2 に示す。エディタ本体は、Java Applet により実装されている。右側. エディタから、各メタボールの中心座標、半径、濃度などの属性情報、視点情報などが CGI に渡され、Web. の編集画面と、左側の操作パネルおよびステータス表. サーバが情報を受け取る。Web サーバでは、受け取っ. 示により構成される。. た情報が取得情報解析パーサにより解析され、それをもとにシーンファイルが生成される。そして、POV-. Ray が外部アプリケーションとして呼び出され、取得情報解析パーサにより生成されたシーンファイルを読み込み、レンダリングを行う。 3.1.5. 出力例. 本システムにより、Web サーバでの生成画像を、Web ブラウザに表示した例を図 3 に示す。(a) では、メタボール数 6、(b) では、メタボール数 48、影付け処理を含む。 3.2. 照明設計システム. 照明設計には 2 つのアプローチがある。1 つは、配. 図 2: メタボールエディタ. 光特性が既知の照明器具を所定の位置に設置し、そのときの室内の照度分布を求める方法である。この方法編集画面右上が透視図、右下、左上、左下がそれぞれ yz、zx、xy 平面図となっており、透視図には現在の. では、照度分布を可視化し、希望する照度分布が得られるように、光源位置や配光特性を逐次変更して試行. メタボールの配置がワイヤフレームで表示され、マウ. 錯誤を繰り返す。可視化において、種々の高速化、高. スをドラッグさせることで視点をインタラクティブに. 精度化の方法が提案されている [5] [6][7][8]。. 変更することが可能となっている。. もう 1 つは、希望する照度分布を与え、それを実現. 操作パネルには、各機能のボタンやスライドバーが. する光源の位置や配光特性を求める方法である。この. あり、メタボールの追加、移動、削除などを行うのに. 方法では、光源により照らされた部屋の照度分布と希. 用いる。メタボールは、中心座標、半径、濃度、色、. 望の照度分布との差の二乗和をエネルギーとし、その. 反射や透過の属性などを指定することができる。. 3 −73−.

(4) 3.2.2. 照度入力 Java. Applet. 照度入力 Java Applet では、透視図と操作パネルにより構成される。透視図内でマウスドラッグをすることで視点移動を行い、まず視点位置を確定する。続いて照度値入力対象範囲の入力を行い、操作パネルにおいて、対象範囲における照度値の入力を行う。希望する照度値を全て入力したら、視点位置情報と照度値の情報を Web サーバに送る。. (a). 3.2.3. (b). 図 3: Web ブラウザにおけるメタボール出力画像例. 照度分布の計算と最適化. Web クライアントからの視点位置情報を受け取った Web サーバは、その視点位置での照度分布を、各光源位置候補において、光源が単独で点灯している場合について、中間画像としてそれぞれ算出する。光源位置. エネルギーが極小値へ収束するように最適な光源位置と配光特性を算出する。過去の研究例では、高橋らの方法 [9]、土橋らの方法 [10] などがある。. 候補が m 箇所、光源の配光特性が n 種類用意されて. いる場合、m. n 枚の中間画像を生成することになる。. 照度分布は、Radiance[3] というレンダリングアプリ. いずれの方法でも、照度分布の計算には相互反射光. ケーションを用いて計算を行う。. まで考慮する必要があり、ラジオシティ法が必要不可欠となる。ラジオシティ法は高い処理能力を必要とするので、本研究のシステムが有用と考え、Web を用い. 中間画像により、各光源が単独で点灯したことで、どれだけの照度値上昇が起こるかがわかる。いくつかの光源が点灯した場合、ある位置での照度値は、点灯. て照明設計を行うシステムを構築する。ここでは、試. している光源の各中間画像における照度値の合計とな. 行錯誤の不要な後者のアプローチを採用する。また、. る。このようにして、点灯させる光源の位置、種類に. 光源位置は、いくつかの候補から選択し、配光特性は. よる照度値の変化が算出できるので、どの光源がどの. すでに既知のものから選択することにする。. 位置で点灯した場合に、Web クライアントから渡された照度値にもっとも近くなるかを求めることができる。. 3.2.1. 機能概要. 最適化を行うには、まず各光源の位置と種類を Chaos. 本システムはまず、照度入力 Java Applet により、対象となる建築物のデータを読み込み、視点を決定して、建築物内の複数の点において、それぞれ照度値を指定する。指定された視点位置、照度値などの情報は、. Web サーバに渡される。 Web サーバ側では、与えられた視点位置において、どの光源位置に、どの配光特性を持った光源を選択して配置すれば、Web クライアントから渡された各点の照度値に近くなるかを、最適化によって求め、光源を配置する位置、種類を特定する。特定された光源の位置、種類によって最終的な画像を生成し、Web クライアントに返す。. Neural Network における各 Neuron に割り当て、各 Neuron が発火した状態を、その光源が点灯している状態とする。Neuron の発火状態により、照度値が変化するので、Web クライアントから渡された各点の照度値と比較し、その差の二乗和をエネルギーとして、そのエネルギーが極小値へ収束するように最適化を行う。最適化により、点灯すべき光源の位置と種類が決定されるので、それをもとに Radiance により画像生成を行う。生成された画像は、最終画像として Web クライアント側に返される。 3.2.4. 出力画像例. 最適化手法には、Hop

(5) eld Neural Network を用い. 図 4 に、本システムにより生成された最終画像を示. た方法 [9]、遺伝的アルゴリズムを用いた方法 [10] な. す。今回は、光源位置は 12 箇所、光源の種類は、60W. どがあるが、ここでは局所最小解を回避した最適解探. 電球、100W 電球、60W 蛍光灯、100W 蛍光灯の 4 種. 索の可能な Chaos Neural Network を採用した。. 類に限定した。. −74− 4.

(6) ここでは、メッシュワーピング [11] とフィールドモーフィング [12] から選ぶことができる。. 図 5: 対応関係指定 Java Applet. まず、ソース画像とターゲット画像を読み込み、モーフィング手法を選択する。メッシュワーピングでは、各. 図 4: Web ブラウザにおける最終画像例. 画像にメッシュが表示され、各メッシュの制御点をマウスでドラッグして対応関係を指定する。メッシュの. 3.3. モーフィング生成システム. 分割数は変更することもできる。フィールドモーフィ. モーフィングは、2 つの入力画像（ここではソース画像とターゲット画像とよぶ）の間に対応関係を指定し、それをもとに補間を行って中間画像を生成する手法である。モーフィングによって、ソース画像からターゲット画像へとスムーズに変化するアニメーションを作成することができる。ここでは、中間画像の生成と、それらを連結してアニメーションにする処理を Web サーバが行うようなシステムを構築する。 3.3.1. ングでは、線分の組により対応関係を指定する。線分は追加、移動、削除ができる。また、両モーフィング手法とも、ソース画像とターゲット画像に対応して、対応関係のプリセットデータを読み出すことができる。画像の対応関係が決まったら、その情報を Web サーバに送る。メッシュワーピングでは各メッシュの制御点の座標が、フィールドモーフィングでは各線分の両端点の座標の組が情報として送られる。 3.3.3. 機能概要. 本システムは、Web クライアント側で対応関係指定. Java Applet によりソース画像とターゲット画像の対応関係を指定し、その対応関係の情報を Web サーバに渡す。Web サーバは、対応関係の情報から、ソース画像とターゲット画像の補間を行い、複数の中間画像を生成し、それらをもとに mpeg ファイルにする。生成された mpeg ファイルは、Web クライアント側からダウンロードできるように、HTML 内にリンクとして. アニメーション生成. Web クライアントから対応関係の情報を受け取った Web サーバは、モーフィング画像生成アプリケーションを起動し、モーフィング手法に応じて、対応関係の情報をもとに、ソース画像からターゲット画像への補間を順次行い、複数の中間画像を生成する。生成された中間画像は、それぞれ一旦画像として保存され、mpeg ファイル生成アプリケーションに渡される。mpeg ファイル生成アプリケーションは、保存. 埋め込まれた形で Web クライアントに返される。ま. された画像を読み取り、それらをもとに mpeg ファイ. た、中間画像をアニメーションとして表示する Java. ルを生成する。. Applet も、Web クライアントに返され、Web クライアント上でアニメーションとして確認できる。 3.3.2. 対応関係指定 Java. 3.3.4. 出力画像例. 図 6 に、ソース画像とターゲット画像、それをもと. Applet. に生成した中間画像の一部を示す。モーフィング手法. 対応関係指定 Java Applet の外観を図 5 に示す。対応関係の指定は、モーフィング手法によって異なる。. はフィールドモーフィングを用い、16 枚の中間画像を生成した。. 5 −75−.

(7) [2] POV-Ray - the Persistence of Vision Raytracer, http://www.povray.org/ [3] G. W. Larson, R.Shakespeare, \Rendering with Radiance," Morgan Kaufmann Publishers Inc., ISBN 1-55860-499-5. ソース画像. [4] T. Nishita, E. Nakamae, \A Method for Displaying Metaballs by using Bezier Clipping," Computer Graphics Forum, Vol.13, No.3, pp.271-280, 1994.. ターゲット画像. [5] T. Nishita, E. Nakamae, \Continuous Tone Representation of Three-Dimensional Objects Taking Account of Shadows and Interre ection," Computer Graphics, Vol.19, No.3, pp.23-30, 1985. [6] J. R. Wallace, K. A. Elmquist, E. A. Haines, \A Ray Tracing Algorithm for Progressive Radiosity," Computer Graphics 23-3, pp.315-324, 1989. 中間画像. [7] S. E. Chen, \Incremental Radiosity: An Extension of Progressive Radiosity to an Interactive Image Synthesis System," Computer Graphics 24-4, pp.135-144, 1990.. 図 6: モーフィング例. 4. まとめ. [8] Y. Dobashi, K. Kaneda, T. Nakashima, H. Yamashita, T. Nishita, \A Quick Rendering Method using Basis Functions for Interactive Lighting Design," Computer Graphics Forum 14-3, pp.C299-C240, 1995.. 本稿では、Web を通じて CG 画像を作成するシステムを提案し、いくつかのシステム実装例を示した。これにより、高い処理能力を要求されるようなレンダリングを Web サーバで行うことで、処理能力の低いクライアントでも高品質の画像を得ることができるよう. [9] K. Takahashi, K. Kaneda, T. Yamanaka, H. Yamashita, E. Nakamae, T. Nishita, \Lighting Design in Interre ective Environments Using Hop

(8) eld Neural Networks," The illuminating Engineering Institute of Japan, Vol.17, No.2, 1993.. になった。今後は、さらに種々の実装例を作成し、応用分野を広げていく予定である。. 謝辞元福山大の吉津氏にはメタボールエディタに関して、西田研究室の難波氏には照明設計の基礎実験に関して、同小磯氏にはモーフィングに関して、それぞれ協力を. [10] Y. Dobashi, H. Nakatani, K. Kaneda, H. Yamashita, \An Interactive Lighting Design System Integrating Forward and Inverse Approach," 画像電子学会誌, 第 27 巻, 第 4 号, 1998.. いただいた。ここに感謝の意を表する。. [11] G. Wolberg, \Digital image warping," IEEE Computer Society Press, 1990.. 参考文献. [12] T. Beier, S. Neely, \Feature-based image metamorphosis," Computer Graphics (Proc. of SIGGRAPH '92), Vol.26, No.2, pp.35-42, 1992.. [1] Java コンテンツ, http://www.nttdocomo.co.jp/mc-user/i/java/. 6 −76−.

(9)