ヒキダスブログ

テック系や最近見たもの感じたことを書いて残す引き出しスペースです

WebGLの熱量でカイロにもなるスマホコンテンツを作った

Web JS WebGL GLSL

こんばんわ。最近寒波続きで寒くなってきましたね。
今回、「寒中見舞い」をテーマにちょっとしたコンテンツを作ってみました。

f:id:pujoru35:20180204213128j:plain

経緯

まず本コンテンツを作るきっかけの1つに、昨年10月から通い始めたdoxasさん主催 「GLSL シェーダースクール2017」 があります。これは、GLSL(OpenGL Shading Language)というブラウザ上でGPUを駆使し高速な演算・描画処理を行えるシェーダー言語を学ぶというもので、近年3Dインタラクティブコンテンツ制作に用いられるWebGLと併せて注目されつつある領域です。
スクールでの内容は後日改めて書き留めるつもりですが、これを機に今年は自主的にWebGL・GLSLを扱う機会を作ろうと考えました。

また、私の職種がフロントエンドエンジニアで、日頃クリエイティブから上がったアイデアやデザインを形にする仕事をしていますが、今後は自主制作からでもアイデアからアウトプットまで一貫したものをやっていきたいと思ったのもあります。

さて、冒頭にも触れましたが、最近寒くなってきたことと寒中見舞いの時期に合わせて何かアウトプットをしたいと考えたのが発端でした。仕事柄デジタルクラフトに絡めたものにしたいことと、寒中見舞いの葉書に合わせるならQRコード付けて、そこからアクセスするスマホターゲットにしたコンテンツにしようという漠然とした方向性からはじめました。

アイディア編

アイディアのヒントになったものとして、1つにBlue Paddleの佐藤ねじさんが考案した HOT LETTER があります。使い捨てカイロを手紙にするというアナログながら手紙の「暖かみ」をテーマにしています。
2つ目は、WebGL・GLSLに関連して時折出てくる 「暖をとる」 というキーワードです。GPUで高速な処理を行うためPCだとファンが唸ったりPC・スマホが熱くなったりします。

では、WebGL・GLSLを使って「熱」をインタラクティブ・メイン要素にしたコンテンツを作れないかを考えました。
寒空の中、スマホの熱で温まる状況から「マッチ売りの少女」を連想し、物語のキーになる「火 (≒ マッチの火)」をビジュアルの軸にして、「マッチ売りの少女」のストーリーを読み進めるコンテンツを作ることにしました。

実装編

火をWebGLで再現するにあたり、比留間さんの記事 [GLSL] WebGLで炎の揺らぎ を参考にさせていただきました m(_ _)m。どうやって揺らぐような見え方になっているのかはまだまだ力及ばずなところなので、じっくり研究したいと思います。

次に、タップ・クリックし続けると火の勢いが大きくなる部分を作ってみました。こちらは、タップ・クリックイベントによって、GLSL側のuniformで定義したsize変数の値を加算し、頂点をコントロールするVertex Shaderでsize変数とそれぞれの頂点のx・z座標で計算しています(以下式)。

gl_Position = projectionMatrix * modelViewMatrix * vec4(
  position.x * size,
  position.y,
  position.z * size,
  1.0
);

この場合、size変数は最初0でタップ・クリックし続けるとsize変数の値は徐々に上がってきます。すると、上記計算で頂点のx・z座標の値が大きくなり、火の形が徐々に横と奥行き方向に向かって大きくなっていきます。

それから、Three.jsのポストプロセスを使って 熱量を上げる 火の周りの雰囲気を調整してみました。Three.jsのプラグインで、シーンの明るい部分をより明るくするブルームエフェクト(BloomPass)を少々、画面の四隅を暗くするビネット効果(Vignette Shader)を組み合わせて、火の周りが明るく見えるようにして火の勢いに応じてビネット効果を弱め火の明るさが広がるようにしています。

ただ、このままだとさっと見て終わってしまうため、WebGLの熱量を維持する上でゲーム性を持たせることにしました。具体的には以下のルールを設けて、コンテンツの滞留性をつけるようにしました。

  • タップ・クリックし続けると火の勢いが大きくなる
  • 上下にスワイプ・ドラッグすると、テキストがスクロールする
  • 火の勢いがなくなる、または大きすぎるとゲームオーバーになる

デモ

こちらにコンテンツをアップしました。 画面左上の「?」アイコンをクリックすると先述した操作説明が表示されます。

https://qeita.github.io/SeasonsGreetings_2018/

Gitリポジトリ：
https://github.com/qeita/SeasonsGreetings_2018

振り返り

作っている中でも実感していましたが、火の勢いを維持しつつ物語を読むのはUI的にちょっと大変だなという印象を受けました。
また、「マッチ売りの少女」を作品のモチーフにするなら文字情報よりも画像が良いかもと思いましたが、今回画像の選定が定まらないことから対応しませんでした(画像検索APIを使ってランダムに画像表示もありかと思いましたが、APIの制限やAPI keyを晒す点から却下することにしました)。
今回自分で企画し作ったものの経験としては、インスタレーションに比べてWebコンテンツはWebGLのようなリッチ表現だけで成立させるのはなかなか少なく、文字情報等のコンテンツとのバランスが大事なのだなと再認識しました。

追記：
スマホケース越しにやってたり、スペックによっては思ったより熱くならないかもですが、火を見てるとうーん心理的に温かく感じるのかも。。

参考