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

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

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

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

f:id:spring_raining:20141223003016p:plain

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


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

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

追記(12/24):FirefoxSafariだとちゃんと表示されないようですね・・・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

canvasを使ってこのような三角形を切り出します。*1

f:id:spring_raining:20141222234451p:plain

これを、transformを使って全てのポリゴンを3D空間に配置すると、3Dモデルが出来上がります。

f:id:spring_raining:20141222234643p:plain

ただしtranslate3dを使うだけではペラペラになってしまうので、transform-stylepreserve-3dに、perspectiveに適当な値を入れておきます。

このプログラムはgithubに上げてるので、objファイルを持ってる人はよければ試してみてください。

spring-raining/CSSRize · GitHub

まとめ

無理せずWebGLを使ったほうが良いと思います。

*1:canvasを使ってる時点でCSSだけで表示するという目的とは外れてる気がしますが、三角形自体はJavaScriptを使わなくても作れます!!という苦しい言い訳???