# 花火QR

> URLを入れると花火が打ち上がり、開いた瞬間にそのままスマホで読み取れるQRコードになるWebアプリ。花火とQRコードの組み立てをWebGL2で描いた。

- 制作: [ワカメ](https://wakame.dev/)（個人で企画・開発）
- ステータス: 公開中
- 制作期間: 2026-10
- カテゴリ: Web, Tool, Graphics
- 使用技術: WebGL2, GLSL, 頂点シェーダーでの粒子計算, ミップマップ・ブルーム, QRコード, WebAudio, JavaScript
- 担当: 企画, シェーダー実装, 演出設計, QRコードの読み取りやすさの調整

## 概要

URLを入力して「打ち上げ」を押すと、町並みの向こうから火の玉が上がり、夜空で開いた花火の星がそのままQRコードの形に集まるWebアプリです。星は開いた直後からQRコードを拡大した形のまま広がるので、花火が開いていく途中から模様が読み取れ、最後は角のくっきりした正方形のモジュールに変わって止まります。止まったQRコードは、背景を光る白、黒い部分をその回の花火の2色のグラデーションで描き、スマホのカメラでそのまま読み取れます。明るい色は白との差が小さくなるため、色の種類は変えずに明るさだけを一定まで落として、読み取りに必要な明暗差を残しています。描画は3Dライブラリを使わずWebGL2とGLSLで直接書きました。約5,000〜6,000個の粒子は毎フレームCPUで動かすのではなく、打ち上げからの時間と粒ごとの乱数から、頂点シェーダーで位置と色を直接計算しています。光の尾は前のフレームの絵を少しずつ暗くして残し、光のにじみはミップマップ（縮小画像）を使った簡易ブルームで出しています。止まったモジュールは画面のピクセルの境目にそろえて描き、輪郭がにじまないようにしました。打ち上げのヒューという音、開くときのドン、あとのパチパチはWebAudioで合成しています。黒い部分を光らせる「夜空モード」もあります。

## 開いた瞬間にQRコードに見せる

最初は、ふつうの花火のように丸く開いてから、星がQRコードの位置へ移動する動きにしていました。ところがこれだと、開いた瞬間は丸い光のかたまりにしか見えず、QRコードに変わるのは花火が開ききったあとになります。

そこで、QRコードのモジュールにあたる星は、開いた直後からQRコードを縮小した形のまま、空気抵抗で減速するような動きで広がるようにしました。花火が大きくなっていく途中から模様が見え、広がりきったところで、丸い星が角のある正方形に変わって止まります。まわりの色の花火は輪のように外側へ速く広がるようにして、QRコードの黒い部分に光がかぶらないようにしています。

## 花火の色のまま読み取れるようにする

QRコードは、明るい部分と暗い部分の差で読み取られます。止まったQRコードは、背景を光る白、黒い部分を花火の2色のグラデーションにしていますが、黄色や金色をそのまま使うと白との差が小さくなり、読み取りにくくなります。

そのため、黒い部分の色は、色の種類（色相）はそのままにして、人の目に見える明るさだけを一定の値まで下げてから塗っています。金色の回は少し深い色になりますが、どの色の組み合わせでも同じくらいの明暗差が残ります。

- QRコードのまわりに、読み取りに必要な4マス分の余白を白で確保
- QRコードの裏では星空を暗くして、暗い部分に星の点が入らないようにした
- モジュールは画面のピクセルの境目にそろえて描き、輪郭をにじませない

## 粒子をシェーダーだけで動かす

粒子は、打ち上げの火の玉と尾、QRコードになる星、外側の花火、金色のしだれ花火を合わせて約5,000〜6,000個あります。これを毎フレームCPUで動かすのではなく、粒ごとに乱数と目標の位置だけを最初に渡しておき、打ち上げからの時間をもとに、頂点シェーダーで位置・色・大きさを直接計算しています。

光の尾は、前のフレームの絵を少しずつ暗くしながら残して出しています。8ビットの画像では暗くしていっても完全に0にならないため、掛け算で暗くしたあとに小さな値を引いて消しています。光のにじみは、この画像のミップマップ（縮小画像）をぼかしとして足し合わせる簡易的なブルームです。

## 成果

- 3Dライブラリなしで、WebGL2とGLSLだけで実装
- 花火が開いた瞬間からQRコードの模様が見え、そのまま読み取れるQRコードとして止まる
- 約5,000〜6,000個の粒子の動きを、時間と乱数から頂点シェーダーで直接計算
- 花火の色を残したまま、明るさをそろえて白との明暗差を確保
- 効果音はすべてWebAudioで合成し、音声ファイルを使わない

## リンク

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

## このサイトについて

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