Webブラウザ上で“紙細工”　折ったり切ったり本格派　「飛び出す絵本」風に作った仕上がりは？

　「Experiments with Google」は、GoogleがAIやARといった最新技術の可能性を示すために、実験的な応用例を紹介するショーケースだ。膨大なコンテンツを公開しており、その多くはスマートフォンやPCで試せる。

【その他の画像】

　この連載では、多種多様な応用例の中から興味深いものをピックアップ。実際に遊んだ体験レポートを通して、裏側にあるテクノロジーや、技術の活用方法とその目的を解説する。

　読者の皆さんも、ぜひ自分の手で試しながらその仕組みを学んでもらえたらうれしい。きっと、最新技術の魅力に気付くはずだ。

●Webブラウザで“紙工作”　「飛び出す絵本」風の細工に挑戦

　連載34回目の今回は、立体的な紙細工をWebブラウザ上で再現できる「3D Pop Up Card」を取り上げる。

　3D Pop Up Cardは、1枚の紙を切ったり折ったりして作る立体的な紙細工を、Webブラウザ上でビジュアル設計できるツールだ。イメージは「飛び出す絵本」（ポップアップ絵本）だが、3D Pop Up Cardは紙を適切な角度に折り曲げると紙細工が完成する構造になっている。

　この種の紙細工を実際に作る場合、子供の工作にぴったりだし、立体が何層にも重なるような凝ったデザインに挑めば大人でも楽しめるだろう。とはいえ、複雑なものを作るのは切る場所や折る位置を決めるのが難しい。

　それが3D Pop Up Cardを使えば、直感的な操作で驚くほど簡単に設計図を作れてしまう。これを活用しない手はない。文字で説明するより、見てもらったほうが早い。実際に試していこう。

●「城の紙細工」で学ぶ“仮想工作”

　3D Pop Up CardはWebアプリなので、Webブラウザさえあればすぐに“仮想の紙細工”を実践できる。画面上で紙細工を作るように動かせばいいので、操作も分かりやすいはずだ。早速使っていこう。

　Webアプリを起動すると、サンプルとして見事な「城」の紙細工が表示された。3D Pop Up Cardは表示用の「Display Mode」と編集用の「Edit Mode」という2種類のモードを切り替えて使うようになっている。起動時の初期状態はDisplay Modeだ。

　ここでマウスの左ドラッグ操作（左ボタンを押したままドラッグ）をすると、紙細工を見る視点が変わる。見る方向を上下左右、表裏などと動かすことで複雑な構造がどのように作られたか理解できる。

　マウスの中央ホイールを回すと、紙の開き具合を変えられる。この操作も、複雑な紙細工の構造を把握する助けになる。

　画面右側の制御メニューにある「Edit Modeボタン」にチェックを入れる、紙細工を編集するモードに切り替わり、編集用のグリッドが表示される。なお、マウスの右ボタンをクリックしてもモードを切り替えられる。

●複雑な紙細工も可能　どうやって加工する？

　続いて、Edit Modeを操作してみる。画面左側にある「New」をクリックして紙細工を新たに作成しよう。

　Edit Modeでは、マウスポインタが編集用グリッド内にあるか外にあるかによって、機能が変わるので要注意だ。例えば、グリッド外の左ドラッグはDisplay Modeと同じく視点移動だが、グリッド内の左ドラッグは図形指定の操作になる。

　中央ホイールのスクロールは、グリッド位置を前後に動かす操作だ。グリッドの位置を変えながら切り取る図形を指定することで、何層もの複雑な紙細工を作れる。

　グリッドの「目」の細かさは、制御メニューの「Grid Number」で調整する。作りたい図形の形に合わせて、その都度ちょうど良いサイズに変えながら描画していくといい。紙を開く角度は、制御メニューの「Card Angle」で変えられる。

●Webブラウザ上で折って切って工作しよう

　それでは、実際に紙細工を作ろう。基本的にはグリッド上で左クリックを繰り返して図形の輪郭を描き、それを折ったり、切ったりする操作を続けて目的の紙細工に近づけていく。

　図形を右クリックしたときの動作は、グリッドの右にある「faces」「hole」「pull」によって異なる。facesとpullは図形の輪郭を切り出して起こすのだが、faceは図形上部が台紙から切り離されないのに対し、pullは図形の上部が完全に切り離される。画像で説明すると分かりやすいだろうか。

　そしてholeは、図形の表面に指定した形状の穴を開けられる。こちらも画像で説明しよう。

　文章だと分かりにくいが、百聞は一見にしかずなので以下の動画で動作の違いを確認してほしい。

●文字の細工も可能　「ITmedia」で試すと？

　3D Pop Up Cardでは若干の制約はあるものの、曲線のある図形も指定可能だ。グリッドに従って図形を作ってから、曲線の滑らかさを調整する制御メニュー「Subdivision」「Subdiv X limit」を調整する。

　文字の入力もできる。制御メニューの「Text」で文字やサイズなどを指定して「＋Add」をクリックし、紙面に置く。そこから右ドラッグで好きな場所に移動して左クリックすると、入力した文字列の形でfacesやpull、holeが実行される。

　なお、以下の例では「ITmedia」と入力したのだが、「i」は下の部分が宙に浮いた状態になってしまった。このように実際の紙では再現不可能な形になることもあるので、注意が必要だ。

●オリジナル紙細工を設計図に　“本物の紙”にチャレンジ

　気に入るデザインを3D Pop Up Card上で作れたら、次は本物の紙細工を作ってみるのがいいだろう。その際に必要な設計図は、制御メニューの一番上にある「画像」をクリックすると、折り線などが入った設計図をPNG画像でダウンロードできる。設計図の実線を切り、長破線を谷折り、短破線を山折りすれば、デザイン通りの紙細工が完成する。

　さらにデザインのデータを画面左の「Save」で保存しておき、後日「Load」で読み込むと途中から再開したり、発展させた別のデザインを作ったりできる。また、あらかじめ「House」「Bath」「CubeWave」といった凝ったデザインも用意されているので、それらをベースにするのもいい。

●まるで紙工作版CAD　Webブラウザだけでも動作するワケ

　3D Pop Up Cardは、米Yahoo!社でテクニカルリードを務めるYu-Chih Chang氏の作品だ。先ほどの「i」のように実現不可能なデザインを画面上で許してしまうなど、詰めの甘い部分はあるが、Experiments with Googleの実験的なコンテンツなので問題ないだろう。

　このコンテンツを例えるなら、3D対応の紙細工版CAD（Computer Aided Design／コンピュータ支援設計）といったところだ。3DグラフィックスをWebブラウザ上でレンダリングする技術「WebGL」などを活用している。ここまで実用性のあるツールがWebブラウザで動くということを示す優れた教材といえる。ソースコードなどはGitHubで公開されているので、参考にしてみてはどうだろう。