# 無限プチプチ

> 梱包材のプチプチ（気泡緩衝材）を、いくらでもつぶせるブラウザゲーム。透明な粒と下の段ボールをWebGL2で描き、つぶれる音はWebAudioで一から合成した。

- 制作: [ワカメ](https://wakame.dev/)（個人で企画・開発）
- ステータス: 公開中
- 制作期間: 2026-10
- カテゴリ: Web, Game, Graphics
- 使用技術: WebGL2, GLSL, レイトレーシング（解析的な交差判定）, HDRブルーム, 被写界深度, WebAudio, JavaScript
- 担当: 企画, ゲーム設計, シェーダー実装, 効果音の合成

## 概要

段ボールの上に広げたプチプチのシートを、タップやクリックでひと粒ずつ、なぞって続けてつぶせるブラウザゲームです。見えている粒をだいたいつぶすと、次のシートが段ボールの上をすべって送られてくるので、終わりなく遊べます。ときどき空気が抜けていて「ぷすっ」としか鳴らない不発の粒、大きな音で割れる粒、オナラのような音でつぶれる粒がまざっています。いちばん力を入れたのは音で、音声ファイルは使わず、つぶれる瞬間の音を「膜が裂けるクラック」「裂けた膜と空気の共鳴」「押し出された空気のぽっという低い音」「下の段ボール箱の鳴り」「しわが戻るチリチリ」の5つに分けてWebAudioで合成しています。押しはじめに樹脂がこすれる「キュッ」、つぶれた粒をさわったときの「くしゃ」、シートが送られるときの「ズザー」も同じように作り、6畳ほどの部屋の響きを計算で作ってうすくかけています。描画は3Dライブラリもポリゴンも使わず、画面の1ピクセルごとに視線を飛ばして、粒の形（楕円体）・シートの膜・下の段ボールとの交わりを式で解いています。粒の表面に映るソフトボックスと窓、粒がレンズになって段ボールに落とす光と影、つぶれた粒のしわと白化、奥のボケ（被写界深度）、つぶれた瞬間の空気の衝撃波まで、すべて自前のシェーダーで描いています。

## つぶれる音を5つに分けて作る

プチプチの「プチッ」は、ほんの数ミリ秒の音です。録音した音をくり返し鳴らすと、すぐに同じ音だと気づいてしまうので、音声ファイルは使わず、つぶれる瞬間に起きていることを5つに分けて、それぞれを計算で作って重ねています。

膜が裂ける瞬間の鋭い「クラック」はノイズを微分して高い音だけにしたものを0.4ミリ秒ほどで消し、ときどき2回目の小さな裂け目を足します。裂けた膜と空気の鳴りは1.5kHz・3.3kHz・6kHzあたりの減衰する正弦波、押し出された空気の「ぽ」は200Hz前後の短い低音、下の段ボール箱の鳴りは100Hz前後、しわが戻るチリチリは高い音の小さな粒をばらばらの時間に置いています。

この組み合わせを最初に18通り計算しておき、鳴らすたびに再生速度と音量を少しずつ変え、画面の左右の位置に合わせて左右の耳に振り分けています。最後に、6畳ほどの部屋を想定した残響をうすくかけて、机の上で鳴っているように聞こえるようにしました。

- 押しはじめに樹脂がこすれる「キュッ」は、小さな衝撃を間隔を詰めながらくり返して作る
- 不発の粒は「ぷすっ」と空気が漏れる音だけで、ゆっくりしぼむ
- 200個に1個くらい、低く大きな音で割れる粒がある
- 70個に1個くらい、オナラのような音でつぶれる粒がある。唇が震えるようなパルスの列を、音程を下げながら低い共鳴で丸めて作り、「プッ」「ブゥ〜」「ピュ〜」「ブッブブッ」の4つの型がある
- つぶれた粒をさわると「くしゃ」、シートが送られると「ズザー」

## ポリゴンを使わずに粒を描く

粒は三角形のポリゴンではなく、楕円体を膜の少し下に沈めた形として式で持っています。画面の1ピクセルごとに視線を飛ばし、その視線が通る近くの粒（多くても2つ）と交わるかを2次方程式で解いて、表面の位置と向きを求めています。

粒の表面では、天井のソフトボックスや窓の映り込みをフレネルの式で反射させ、中を抜けた視線は裏側の膜や下の段ボールまで追いかけます。粒がレンズのように光を集めるので、段ボールには粒ごとに明るい点とまるい影が落ちます。

つぶれた粒は高さを低くして、折り目のあるしわを表面の向きに加え、樹脂が白っぽくなる「白化」も足しています。粒ひとつひとつの高さ・しわ・ふくらみは256×256のテクスチャに入れて毎フレームGPUに送っているので、押しこまれてへこみ、はじけて、ぶるっと揺れてから平たくなるまでを粒ごとに動かせます。

## 終わらないシート

シートは上下に無限につながっていて、行と列を256で折り返した番号で状態テクスチャに入れています。見えている粒のおよそ8割をつぶすと、シートが段ボールの上を手前にすべって新しい粒が出てきます。

画面は明るさの上限がないHDRの画像に描いてから、奥のほうをぼかす被写界深度、強い光をにじませるブルーム、つぶれた瞬間の空気の衝撃波による画面のゆがみをかけて仕上げています。重い端末では描画の解像度を自動で下げます。

## 成果

- 3Dライブラリなしで、WebGL2とGLSLだけで実装
- 粒・膜・段ボールを1ピクセルごとの交差計算で描き、粒が段ボールに落とす光と影まで表現
- つぶれる音を5つの要素に分けて合成し、18通りの音を作ってから毎回少しずつ変えて鳴らす
- 画面の大部分をつぶすと次のシートが送られてくる、終わりのない仕組み
- 効果音はすべてWebAudioで合成し、音声ファイルを使わない

## リンク

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

## このサイトについて

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