写真を“立体的に”ガラスのように割る3D加工ツール
「BAKI BAKI 合成 3D」は、写真をブラウザ上で立体的なガラス片に割って加工できる3Dツールです。平面の割れ表現ではなく、厚みと面取りのあるガラス片がWebGLでリアルに屈折・反射し、光源の位置まで自由に調整できます。インストール不要・無料で、加工結果は高解像度PNGで書き出せます。
使い方（基本3ステップ）
- 画像をアップ：割りたい写真をドロップ、または「画像を選択」から読み込みます。
- 割りたい箇所をクリック：その位置が衝撃点になりガラスが砕けます。割れ方を変えたいときは「再生成」で何度でも作り直せます。
- 整えて書き出し：質感・反射・光源などを調整したら「PNG書き出し」。PCはそのまま保存、スマホは表示された画像を長押しで保存できます。
視点の操作：プレビューをドラッグで回転して立体感を確認できます。マウスホイールまたは「カメラの寄り引き」スライダーでズーム（寄り引き）、「視点リセット」で正面に戻ります。
質感・反射・光源を調整する
MATERIAL（質感）
ガラス／鏡／金属／クリアを切り替えられます。ガラスは透明感のある通常ガラス、鏡はくっきり映り込むミラー、金属は粗さで見た目が変わるメタリック、クリアは透明感が強く、背後の写真が透けて見えるガラスです。
REFLECTION（映り込み）
初期状態でも周囲の風景が映り込みますが、「鏡面反射の画像」を追加すると、その画像をガラスが鏡のように反射します。環境反射の強さを上げるほど映り込みがはっきりし、最大では鏡のようになります。
LIGHT（光源）
光源の方位・高さ・強さを動かすと、破片の縁のハイライトや陰影が一斉に変化します。環境光で全体の明るさを調整できます。
各パラメータの役割
FRACTURE（割れ方）
破片の数で細かさ、砕けの強さで破片の飛び出し量、破片の傾きで立体的なめくれ、割れの広がる半径で中心集中〜全面を調整します。衝撃の強さ（奥行き）を上げると、割れの中心から遠い破片ほど手前にせり出し、より立体的になります。複数衝撃点を増やすと、割れの中心が複数になり、破片はそれぞれ最寄りの中心から飛び散ります。
GLASS（ガラス）
厚みと面取りでエッジの光り方、粗さで透明〜すりガラス、環境反射の強さで映り込み量が変わります。厚みのばらつきを上げると、破片ごとに厚みがランダムになり、より自然な割れに見えます。
EFFECT（演出）
接地影を上げると、飛び出した破片の背後に柔らかい影が落ち、浮いている立体感が増します。0にすると影は無効になります。
便利な機能
- シャッフル：各値をまとめてランダム化。各スライダー横のロックを押すと、その値だけ固定したままシャッフルできます。
- 背景を透過：ガラス片以外の背景をふわっと消し、透過PNGとして書き出せます（切り抜き素材づくりに）。
- 破片編集モード：ONにすると、破片を1つずつドラッグして好きな位置へ動かせます。
- 鑑賞モード：カメラがゆっくり彷徨うように動き続ける、鑑賞向けの表示に切り替わります。PCでは F キーでフルスクリーン表示にでき、もう一度押すと戻ります（破片編集モードとは同時に使えません）。
よくある質問
アップロードした画像はどこかに送信されますか？
いいえ。読み込み・加工・書き出しはすべてお使いの端末（ブラウザ）内で完結し、サーバーへ送信されることはありません。
スマホでも使えますか？
はい。WebGL対応の最新ブラウザなら、タップで割る・ドラッグで回す・スライダーで調整まですべて操作できます（ズームは「カメラの寄り引き」スライダーをご利用ください）。
透過PNGで書き出せますか？
「背景を透過」をONにすると、ガラス片だけを残して背景を透明にしたPNGを書き出せます。
※ 本ツールはWebGL（Three.js）で描画します。最新のブラウザ・端末でご利用ください。