写真を割れたガラス越しに見たような、ドラマチックな一枚に加工してみたい。けれど、平面的な「ヒビ素材」を重ねるだけでは、どうしても作りものっぽさが残ってしまう。そう感じたことはないでしょうか。
デザイン事務所AMIXは、写真をブラウザ上で立体的なガラス片に割って加工できる無料Webツール「BAKI BAKI 合成 3D」を公開しました。厚みと面取りのあるガラス片がWebGLでリアルに屈折・反射し、光源の位置まで自由に調整できます。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。
▼ツールはこちら
3D割れガラス加工ツール：BAKI BAKI 合成 3D
どんなツールか
「BAKI BAKI 合成 3D」は、アップロードした写真を、本物のガラスのように立体的に割って加工できる3D加工ツールです。よくある平面のヒビ表現とは異なり、一片ずつに厚みと面取りを持った立体的なガラス片が画面上で生成され、それぞれが光を屈折・反射しながら砕け散ります。画像をクリックした位置が「衝撃点」になり、そこを中心にガラスが割れていく仕組みです。
プレビューはドラッグで自由に回転でき、横や斜めから見たときの立体感まで確認できます。質感・反射・光源といった見え方を細かく整えたら、加工結果は高解像度のPNG画像として書き出せます。サムネイル素材やSNS投稿用のインパクトある一枚づくりに役立ちます。
主な機能・特徴
立体的なガラス割れ加工に必要なコントロールが一通りそろっています。
- 画像をクリックした位置が衝撃点になり、そこを中心にガラスが割れます。「再生成」で割れ方を何度でも作り直せます。
- マテリアルは「ガラス／鏡／金属／クリア」の4種類から選択可能。クリアは透明感が強く、背後の写真が透けて見えるガラスです。
- 破片の数・砕けの強さ（飛び出し）・衝撃の強さ（奥行き）・破片の傾き・割れの広がる半径を、スライダーで自在に調整できます。
- 複数衝撃点（割れの中心）を最大5か所まで増やせ、破片はそれぞれ最寄りの中心から飛び散ります。
- ガラスの厚み・面取り（エッジの光り）・粗さ（曇り）・環境反射の強さなど、質感を細かく設定できます。
- 光源の方位・高さ・強さ、環境光を動かすと、破片の縁のハイライトや陰影が一斉に変化します。
- 「鏡面反射の画像」を別途アップロードすると、その画像をガラスが鏡のように反射します。
- 背景を透過してガラス片だけを残した透過PNGとして書き出せ、切り抜き素材づくりにも使えます。
- 破片を1つずつドラッグして動かせる「破片編集モード」、カメラがゆっくり動き続ける「鑑賞モード」を搭載しています。
使い方
基本は3ステップです。まず割りたい写真をドロップ、または「画像を選択」から読み込みます（未選択時はサンプル画像で動作確認できます）。次に、割りたい箇所をクリックすると、その位置が衝撃点になりガラスが砕けます。割れ方を変えたいときは「再生成」で何度でも作り直せます。最後に、質感・反射・光源などを整えたら「PNG書き出し」。PCはそのまま保存、スマホは表示された画像を長押しで保存できます。
プレビューはドラッグで回転して立体感を確認できます。マウスホイール、または「カメラの寄り引き」スライダーでズーム（寄り引き）、「視点リセット」で正面に戻ります。
質感・光源を追い込む
このツールの面白さは、割ったあとの「見え方」を細かく追い込める点にあります。マテリアルをガラスから鏡や金属に切り替えるだけで、同じ割れ方でも印象が大きく変わります。「光源の方位・高さ・強さ」を動かせば、破片の縁に走るハイライトの位置が変化し、写真全体の雰囲気を明るくも沈んだ印象にもできます。
設定に迷ったときは「シャッフル」が便利です。各値をまとめてランダム化してくれるので、思いがけない見え方に出会えます。気に入った値だけスライダー横の「ロック」で固定しておけば、その部分は保ったままシャッフルできます。
ガラスの“リアルさ”は、割れ方より光で決まる？
割れ物のビジュアルを作っていて実感するのは、見る人が「本物っぽい」と感じる決め手は、ヒビの形そのものよりも光ののり方だということです。破片をいくら細かく散らしても、すべての縁が同じ明るさでのっぺり光っていると、途端に作りものに見えてしまう。逆に、光源を一方向にきちんと寄せて、手前の破片は明るく、奥や裏返った面は陰に沈める。それだけで、同じ割れ方でもぐっと立体に見えてきます。
このツールを触るなら、まず光源の方位と高さを斜め上の一点に決めてしまい、そこから厚みと面取りを少しだけ足してエッジに光の線を走らせます。面取りはほんのわずかで十分で、ここを強くしすぎると今度は全面がチカチカして安っぽくなる。立体ガラスは“全部を光らせない”のがコツで、影とハイライトのコントラストこそがリアルさの正体です。割って終わりにせず、光を一方向から当てて陰影をつくる一手間が、平面のヒビ素材との決定的な差になります。
活用シーン
- 動画や記事のサムネイル素材として、写真に強いインパクトを加えたいとき
- SNS投稿用に、写真をドラマチックに見せる加工を施したいとき
- 「背景を透過」で書き出したガラス片を、別のデザインに重ねる切り抜き素材として
- 鏡・金属マテリアルを使って、クールでメタリックなビジュアルを作りたいとき
- バナーやキービジュアルに、ガラスの破砕表現でメリハリを付けたいとき
読みやすさの観点からは、まず正面の見え方を整えてから、ドラッグで少しだけ角度を付けて書き出すと、立体感と被写体の見せたい部分を両立しやすくなります。
よくある質問
Q. 本当に無料で使えますか？
A. はい。ブラウザ上で動く無料Webツールです。アプリのインストールもアカウント登録も不要です。
Q. アップロードした画像はサーバーに送られますか？
A. いいえ。読み込み・加工・書き出しはすべてお使いの端末（ブラウザ）内で完結し、サーバーへ送信されることはありません。
Q. スマートフォンでも使えますか？
A. はい。WebGL対応の最新ブラウザなら、タップで割る・ドラッグで回す・スライダーで調整まで操作できます。ズームは「カメラの寄り引き」スライダーをご利用ください。書き出した画像は長押しで保存できます。
Q. 背景を消したガラス片だけの画像は作れますか？
A. はい。「背景を透過」をONにすると、ガラス片だけを残して背景を透明にした透過PNGを書き出せます。別のデザインに重ねる切り抜き素材づくりに便利です。
ご利用にあたって
本ツールはWebGL（Three.js）を用いてブラウザ上で描画する無料Webツールです。画像の読み込みから加工、書き出しまですべてお使いの端末内で完結し、サーバーへ送信・保存されることはありません。なお、立体的なガラス描画には端末の性能が必要となるため、最新のブラウザ・端末でのご利用を推奨します。第三者の権利を含む写真を素材に使う際にはご注意いただき、作成した画像の利用は常識の範囲でお楽しみください。
割れたガラスの立体感とリアルな光の反射で、いつもの一枚を印象的なビジュアルに。ぜひ気軽にお試しください。
▼ツールはこちら
3D割れガラス加工ツール：BAKI BAKI 合成 3D
↓↓↓ 他のツールについてはこちら ↓↓↓
↓↓↓ デザイン外注をご検討の方へ ↓↓↓
こんなページも読まれています
