第22羽「少女はテクスチャを纏いCSSを駆りてDOMツリーを行く」

この記事はごちうさ住民 Advent Calendar 2014 22日目の記事です。

こんにちは、@spring_rainingです。これを書いてる時点でアドベントカレンダーの掲載日を過ぎてます。ごめんなさい。

ごちうさ、かわいいですね。ごちうさに登場してくる女の子はみんなかわいいですが、リゼちゃんのふとももとか、最高だと思います。

f:id:spring_raining:20141223003016p:plain

こんなに素晴らしい曲線美が地球上に存在していいのだろうか

まあ、それはともかく、まずはこちらをご覧ください。（ご覧になれない人はhttp://harusamex.com/rizeに行くとご覧になれるかもしれないです）

かわいいですね。上のリゼちゃんはドラッグやタッチで回転できるようになっていますが、実はこれはFlashやWebGLを使わず、CSSだけで実装されています。

追記(12/24)：FirefoxやSafariだとちゃんと表示されないようですね・・・Chromeで見てみてください。

f:id:spring_raining:20141222233804p:plain

この通りDOM要素です。

どういう仕組みで動いているかというと、CSSにはtransformというパラメータがあり、このパラメータの3D変形機能を用いて、各ポリゴンをゴリゴリと3D空間上に置いています。

作りかた

まず、Sculptrisというソフトを使ってモデルを作ります。モデルはブラウザで表示できる程度にまでポリゴン数を落とした後、テクスチャを描きます。

f:id:spring_raining:20141222234255p:plain

出来上がったモデルからobjファイルと画像ファイル(png)を書き出します。このobjファイルというものは、テキストエディタで開くと分かると思いますが、かなり平易な形式で記述されています。

# OBJ Exported from DrPetter's Sculptris
# symmetry 0
usemtl (null)
s 0
v 0.490645 1.694354 0.392749
v -0.074690 1.963091 -0.144505
v -0.060433 1.679857 0.671068
v 0.075310 0.478687 0.689210
v 0.237354 0.559744 0.663182
v 0.126801 0.628651 0.706207
      :        :        :

この情報を元に、テクスチャが描かれている画像ファイルから、

f:id:spring_raining:20141222234423p:plain