SVG のパスを動的に解析して 3D のメッシュ情報へと変換する svg-mesh-3d
異なるテクノロジーが組み合わさる
今回ご紹介するのは、SVG と呼ばれるパスによって図形を記述する技術と、WebGL とを組み合わせたデモンストレーションです。
github でオープンソースで公開されているので、誰でもその仕組について詳細に知ることができるようになっており、SVG はわかるけど 3D はちょっと……という人にとっても面白い題材なのではないでしょうか。
SVG についてはここでは解説しませんが、いろいろな使いみちのありそうなデモになっています。
HTML5 の技術を活用
SVG は、Scalable Vector Graphics の頭文字を取った言葉で、いわゆるベクタ系の画像表現方法のひとつです。
いわゆる広義の HTML5 に含まれる SVG は、最近のブラウザであれば特別なプラグインなしに表示することが可能で、今回ご紹介する svg-mesh-3d を利用すれば、そこからさらに三次元メッシュデータを生成することが可能です。
今回のデモでは、一般的によく知られているウェブサービスのロゴを SVG で表現したデータから、動的に 3D メッシュを生成して、それを three.js でプレビューするという体裁をとっています。
静止画だと単なる画像にも見えますが、実際には 3D メッシュになっています。これはサイトに実際に行って見てみると、よくわかると思います。
たとえば次に掲載している画像の場合だと……
まず最初に三次元のメッシュがバラバラに分割された状態のものが表示され、それがアニメーションしながらひとつのロゴへと収束していく様子がわかりますね。
ご覧のとおり、メッシュの色がエッジ部分にしか着色されていない透明な三角メッシュのバージョンと、白く塗りつぶされている三角メッシュのバージョンと、ふたつが交互に表示されるようになっています。
パスで形状を表す SVG を利用しているため、当然と言えば当然のことながら直線的なフォルムのロゴであれば、メッシュの分割数が非常に少なくなります。
逆に、曲線を多用しているような図形の場合は、分割されるメッシュの数がとても多くなりますね。
前述のとおり、github でソースも公開されています。
SVG については多少の知見があっても、WebGL や 3D となるとなんだか難しそう……と考えていた人もいらっしゃるかと思いますが、こういった簡単な 3D 化を用いるだけでも、表現としてはぐっと面白いものになりますね。
デザインやサイトのインタラクション表現にも応用しやすいと思います。ぜひ参考にしてみてください。
