# 線香花火、粘る。

> 線香花火の火の玉を、どれだけ長く落とさずにいられるかを競うブラウザゲーム。火花と夏の夜をWebGL2で描き、4分間燃やしきると最高の称号がもらえる。

- 制作: [ワカメ](https://wakame.dev/)（個人で企画・開発）
- ステータス: 公開中
- 制作期間: 2026-10
- カテゴリ: Web, Game, Graphics
- 使用技術: WebGL2, GLSL, HDRブルーム, インスタンス描画, ベルレ積分, DeviceOrientation, WebAudio, JavaScript
- 担当: 企画, ゲーム設計, シェーダー実装, 火花と揺れの物理, 難易度のシミュレーション

## 概要

指やマウスで線香花火のこよりを持つ手を動かし、風や手のふるえで揺れる火の玉を落とさないように支えるブラウザゲームです。スマートフォンではジャイロにも対応し、本体を傾けると線香花火が本当の下へ向かって傾きます。急に傾けたり振ったりすると、火の玉は落ちてしまいます。火の玉は「蕾」「牡丹」「松葉」「柳」「散り菊」と移り変わり、後半ほど玉が重く、首が細くなって落ちやすくなります。粘った時間に応じて称号がつき、すぐに落とすと「儚い」、4分間燃やしきると最高の称号「線香花火の神」になります。こよりは18個の点を糸でつないだベルレ積分の物理で揺らし、先端の火の玉にかかる加速度が首の耐えられる量を超えつづけると落ちる仕組みです。本物の重力のままだと揺れが速すぎて人の反応が間に合わないため、こよりの揺れだけをゆっくりにし、遊び方ごとの粘れる時間をNodeでシミュレーションして難しさを決めました。描画は3Dライブラリを使わずWebGL2とGLSLで直接書き、火花は速度の向きに伸ばした光の筋として数千本をインスタンス描画しています。松葉の火花は飛んだ先で3〜5本に枝分かれし、残像のような尾で枝がつながって見えるようにしました。HDRで描いた画面にブルーム（光のにじみ）とトーンマップをかけ、夜空・遠くの灯りのボケ・ホタル・風になびく草むらは1枚のシェーダーで描いています。火花のぱちぱち、虫の声、風、落ちたときのジュッという音もWebAudioで合成しています。

## 火の玉が落ちる仕組み

こよりは18個の点を糸でつないだもので、ベルレ積分で動かしています。いちばん上の点が指でつまんでいる手、いちばん下の点が火の玉です。点と点の距離を保つ制約に加えて、ひとつ飛ばしの点が近づきすぎない制約を入れ、ねじった紙らしい曲げにくさを出しました。

火の玉が重さで垂れているだけなら、玉にかかる加速度はほぼ0です。風が吹いたり手を急に動かしたりすると、玉が揺さぶられて加速度が増えます。この値が「首」の耐えられる量を超えているあいだだけ傷がたまり、傷が限界に達すると火の玉が落ちます。傷がたまるほど首が伸びて見え、画面下の「ゆれ」の帯も赤くなります。

- 時間がたつほど火の玉が大きく重くなり、首の強さは下がり、突風は強くなる
- 手は指の動きにばねで追いかけるので、急に動かすほど大きな揺れになる
- 後半ほど手が疲れて、細かくふるえるようになる

## 人が反応できる揺れの速さにする

本物の重力で長さ16.5cmのこよりを揺らすと、1往復が約0.8秒になります。人が揺れを見て手を動かすまでには0.2秒ほどかかるので、これでは何をしても間に合いません。そこで、こよりの揺れにかかる重力だけを弱くして、1往復が約1.3秒のゆったりした揺れにしました。火花や落ちた玉には本物の重力を使っています。

難しさは、手を動かさない場合と、0.2秒遅れで「玉が揺れた方へ手をついていかせる」場合をNodeで数百回シミュレーションして決めました。何もしないと中央値で約47秒、うまく揺れを打ち消すと中央値で約2分20秒、4分間燃やしきれるのは1割に満たない、という難しさです。

## 火花を描く

火花は1本ずつ、位置・速度・寿命を持つ粒として計算し、速度の向きに伸ばした細い光の筋として、インスタンス描画でまとめて描いています。1ピクセルより細くなる筋は、太さを1ピクセルに広げるかわりに明るさを下げ、ちらつかないようにしました。

松葉の火花は寿命が来ると、その場で3〜5本に枝分かれし、枝の先でもう一度分かれます。消えた筋もしばらく尾だけを残すので、目の残像のように枝がつながって、松の葉の形に見えます。柳は重力を強く、寿命を長くしてしだれさせ、散り菊は小さく短くしています。

画面はいったん明るさの上限がないHDRの画像に描き、明るいところだけを縮小しながらぼかして足し合わせる「ブルーム」で光をにじませてから、トーンマップで仕上げています。

## 成果

- 3Dライブラリなしで、WebGL2とGLSLだけで実装
- 蕾から散り菊まで、5つの段階の火花を枝分かれのしかたから描き分け
- こよりの揺れを物理で計算し、手の動かし方しだいで粘れる時間が変わる
- スマホのジャイロに対応。本体を傾けると線香花火も傾く
- 難しさはNodeで数百回のシミュレーションを回して調整
- 粘った時間に応じた8段階の称号。4分間燃やしきると最高の称号
- 効果音はすべてWebAudioで合成し、音声ファイルを使わない

## リンク

- [サイト](https://wakame.dev/senko/)

## このサイトについて

- [ワカメの詳細プロフィール](https://wakame.dev/ai-profile/index.html.md)
- [llms.txt](https://wakame.dev/llms.txt)