Canvasアニメーションで風に揺れる森を作る

FOREST BREATH森の呼吸

仕事の合間に、ちょっとだけ森へ行きたくなる日があります。

でも平日の夜に山へ行けるはずもないので、ブラウザの中に森を1つ作りました。

画像も動画も使っていません。HTML・CSS・JavaScriptのCanvasだけで、木も風も光も雪もその場で描いています。

四季・時刻・天気を切り替えられます。

森をクリックするとそこから風が吹き、時刻を早送りしたり、いまの季節と時刻に合わせたりもできます。

さらに下では、この森の中に入って3Dで歩き回れます。

ぼーっと眺めるだけでも大丈夫です。

森の楽しみ方

よく使うボタンは画面の下に、そのほかの操作は右下の「…」の中にまとめてあります。

右上に、いまの季節・時刻・天気が出ます。

いちばん好きなのは、夏の夜です。

時刻を右端まで動かすと、木々のあいだに蛍が点滅し始めます。

春・夏・秋の夜に出ます（秋は控えめで、冬と雨の日は出ません）。探してみてください。

森の中を歩く

上の森は眺めるための森でした。こちらは、中に入って歩ける森です。

一人称の3Dで、道を歩いたり、木立の奥へ分け入ったりできます。

森のどこかに、8つの見どころが隠れています。近づくと図鑑に記録され、左上の地図に印が付きます。

3D描画のライブラリ（Three.js）は、「森へ入る」を押したときに初めて読み込みます。ページを開いただけでは読み込みません。

この森のつくり

見た目重視で作ったので、しくみは簡単なメモだけにしておきます。

外部ライブラリは使っていません。

いちばん苦労したのは見た目より重さでした。

最初は1フレームごとに葉を約6,600回描いていて、確認用のブラウザでは1秒に1.5コマしか動きませんでした。

遠くの3列は揺れても数ピクセル以下で目に見えないため、1枚の画像にまとめて描くことにしました。

これで、季節や時刻を切り替えても60fpsを保てています。

3Dの森のしくみ