時間の変化を少しずつ重ねて立体にしてみたら、どんなふうに見えるんだろう。
ちょっと面白そうだなと思って、「Chrono Sculpture」というWebアプリを作ってみました。
ブラウザでカメラを使って5秒間撮影すると、その間の20枚の画像が奥行き方向に並びます。できあがったものは、マウスや指でくるくる回したり、近づけたり、裏側から眺めたりできます。
カメラを使うのは「カメラを準備」を押した後だけです。音声は使いません。カメラ映像と撮影した画像はアプリの処理としてブラウザ内で扱い、サーバーへ送信しない作りにしています。
※PCとAndroid Chromeで動作を確認しています。iOS Safariは未確認です。端末やブラウザによっては、表示や保存方法が異なる場合があります。
この記事では、どんなことを試しながら作っていったのかを、覚え書きとして残しておこうと思います。
時間の変化を立体にしたらどう見える？
少し前に、時間のずれを一枚の画像に残す「タイムスキャンカメラ」を作りました。
今度は、時間の変化を平面ではなく、奥行きのある形にしたらどう見えるのかが気になりました。
そこで、一つの瞬間を一枚の板のようにして、少しずつ奥へ並べてみることにしました。古い画像は奥に、新しい画像は手前に置いています。
3Dの部分にはThree.jsを使っています。難しく考えすぎず、まずは画像を貼った板を何枚か並べて、回せるところから始めました。
最初の段階ではカメラを使わず、Canvasで作った仮の画像を並べています。いきなり全部を作るのではなく、まず立体としてどんなふうに見えるのかを確かめました。
思っていたような残像にはならなかった
作る前は、画像を重ねると残像のように動きが見えるのかなと思っていました。
ところが、実際に正面から見てみると、手前の画像が重なって、奥の画像が思ったより見えませんでした。一枚ずつを半透明にしても、何枚も重なると、だんだん向こう側が隠れてしまいます。
そこで、全体の透明度を変えられるようにしたり、過去側と現在側のどちらを薄くするか調整できるようにしたりしました。
真正面では見えにくくても、少し斜めから見ると、画像が時間の順番に並んでいることが分かりやすくなります。正面だけでなく、いろいろな角度から眺めることも、このアプリの楽しみ方の一つになりました。
もう一つ、最初の画面では、それぞれの板の中に斜めの線が見えていました。
3Dの四角形は内部では三角形を組み合わせて作られていて、その境目まで線として表示されていたためです。今回は中の線までは必要なかったので、板の外側だけが見える形へ変えました。
小さな違いですが、外側だけになった方が、時間の層として見やすくなったと思います。
ブラウザで5秒間撮影する
立体の見え方が分かってきたところで、ブラウザのカメラから画像を取り込めるようにしました。
「カメラを準備」を押すと、初回はブラウザからカメラの利用を確認されます。準備ができたら、5秒間の撮影を始めます。
この5秒間を20の瞬間に分け、それぞれを画像として残します。撮影が終わると、20枚の画像が古い順に奥から並び、3Dで見られるようになります。
カメラの映像と撮影後の3Dは、同じ16:9の場所に表示しています。撮影前に見えていた範囲と、撮影後に並ぶ画像の範囲が大きく変わらないようにするためです。
撮影の途中で止めたときや、カメラを準備できなかったときは、もう一度やり直せるようにしました。撮影が終わった後はカメラも停止します。
動いているところだけを残してみる
元の画像をそのまま重ねるだけでなく、動いているところだけを残したら、また違った見え方になるかもしれません。
そこで、前後の画像を見比べる方法を試してみました。前の画像から明るさが変わった部分を探し、変化が大きいところだけを残しています。
やってみると意外と動きが見えたので、今回はこの方法を使っています。
この方法は、人や物をきれいに切り抜くものではありません。動かずに止まっている部分は消えやすく、動く前と動いた後の輪郭が残りやすくなります。
照明が変わったり、カメラそのものが揺れたりした場合も、変化として拾います。思ったとおりの形にならないこともありますが、その違いも含めて、いろいろ試してみると面白いところです。
記事用の画像では、文字やロゴのないタンブラーをゆっくり動かして試してみました。同じ撮影結果でも、「元画像」と「動体のみ」を切り替えると、かなり違った形になりました。
角度と透明度で見え方が変わる
できあがった3Dは、ドラッグや一本指で回せます。ホイールやピンチで近づけたり離したり、右ドラッグや二本指で表示位置を動かしたりもできます。
正面から見ると画像が重なって一枚のように見えますが、斜めから見ると、少しずつ位置の違う画像が奥へ続いているのが分かります。
さらに裏側へ回すと、同じ撮影結果でもまた違った見え方になります。どの角度が正解というものではないので、くるくる回しながら気になる形を探してもらえたらと思います。
透明度にも少し幅を持たせました。全体を薄くしたり濃くしたりするだけでなく、過去側と現在側のどちらを薄くするかも変えられます。
途中では、過去から現在へ色を変える「時間色」も作ってみました。ただ、実際に触ってみると、映像全体の色が変わるだけで、時間の重なりが特に見やすくなるわけではありませんでした。
今回はなくてもよさそうだったので、時間色は外しています。作った機能を全部残すのではなく、触ってみて合わなかったものは減らすことにしました。
スマホでは画面の並べ方も変えた
PCでは、3Dの横に設定を置いています。画面が狭いスマホでは、そのまま横へ並べられません。
最初は、設定を画面の下から重ねて表示してみました。ただ、実際にスマホで見ると、肝心の3Dが隠れてしまいました。
次に、設定を普通のページと同じように下へ並べてみました。重ならなくはなりましたが、設定を見ている間に3Dが画面の外へ出てしまいます。
いくつか試した結果、設定を開いている間だけ、上に3D、下に設定を表示する形にしました。これなら、3Dの変化を見ながら透明度や奥行きを変えられます。
Androidで触っていると、二本指で操作している途中に三本目の指が3D表示の外側へ触れたとき、3Dが急に飛んだように見えることもありました。
画像そのものが消えたのではなく、3Dを見る位置が大きく動いていました。三本目の指が加わったときは、その操作をいったん止め、すべての指を離してからもう一度操作できるようにしています。
PCの画面だけでは気づきにくく、実際にスマホで触ってみて分かった部分でした。
気に入った見え方をPNGで保存する
角度や透明度を変えて気に入った形ができたら、「PNGで保存」から画像として残せます。
保存されるのは、ボタンや説明を除いた3Dの部分だけです。画像の大きさは1920×1080pxにしています。
普段の画面をずっと大きなサイズで描くと負荷も増えるため、保存するときだけ大きく描き直す形にしました。保存が終わると、画面は元の大きさへ戻ります。
正面、斜め、裏側、透明度の違いで、同じ撮影でも保存したくなる形が変わります。撮影した一つの結果から、いくつかの画像を作ってみるのもよさそうです。
いろいろ動かして試してほしい
Chrono Sculptureは、決まった完成画像を作るためのアプリというより、動きや見る角度を変えながら試すアプリになりました。
まずはいろいろ動きながら撮影して、それが3Dでどんなふうに見えるのか試してもらえたらと思います。
正面や斜めだけでなく、裏側から見るとまた少し違った見え方になります。「動体のみ」に切り替えると、動いた部分だけを残した表示も作れます。
どんな動きなら面白い画像になるのか、いろいろ試しながら楽しんでもらえたらと思っています。
今回使ったもの
| 使ったもの | 今回使ったところ |
|---|---|
| Three.js | 画像を立体に並べて表示する部分 |
| Canvas API | 撮影した画像の処理や「動体のみ」の画像づくり |
| Media Capture and Streams API | ブラウザからカメラを使う部分 |
| TypeScript | アプリ全体の処理 |
| Vite | 開発と公開用ファイルの作成 |
