現在テスト中
ShaderCreateは、ブラウザ上でリアルタイムにシェーダーエフェクトを画像に適用できるWebアプリです。
30種類以上のエフェクトを自由に組み合わせ、ゲームUIや映像素材のビジュアル開発に活用できます。
🎮 ShaderCreatehttps://gameanimation.info/shader-create/ を試す
📸 ベース画像
今回はゲームのログインボーナス画面をサンプルに、各エフェクトの効果を紹介します。
🎨 歪み・変形エフェクト
🌊 波紋
水面に石を投げ入れたような波紋効果。UI上のエレメントが波打つように変形し、水中ステージや魔法エフェクトの演出に使えます。周波数・振幅・速度・中心位置を細かく設定可能。
🔮 万華鏡
画像を放射状に反転・回転させて万華鏡のようなアート表現を生み出します。セグメント数と回転速度でパターンを変えられ、タイトル画面やローディング演出のアクセントに。
📺 CRTモニター
レトロなブラウン管テレビ風の表現。画面の湾曲、スキャンラインを組み合わせて、懐かしいアーケードゲームのような雰囲気を再現できます。
📊 データモッシュ
動画圧縮のアーティファクトを模倣したグリッチ効果。ブロック単位でUVが大きくシフトし、チャンネル分離と組み合わさることで「壊れた映像」のような独特の演出が得られます。
🎭 テクスチャ・質感エフェクト
⚫ ハーフトーン
新聞や漫画の網点印刷を再現するエフェクト。ドットのサイズと密度でレトロな印刷表現からポップアート風まで幅広い表現が可能です。
🌀 フラクタルノイズ NEW
After Effects風のfBM（フラクタルブラウン運動）ノイズ生成。Basic / Turbulent / Ridge / Terrainの4タイプから選べ、5種類のブレンドモード（通常/加算/乗算/スクリーン/オーバーレイ）で画像に重ねられます。テクスチャ感を足したり、炎や雲の演出にも応用可能。
💎 ダイヤモンドスパークル
Voronoiノイズを使ったきらめきと光の屈折効果。宝石やクリスタルのような輝きで、ガチャ演出やレア度表現に活用できます。フレネル効果と虹色の反射も調整可能。
🌈 色補正・ライティングエフェクト
🎨 デュオトーン
画像を2色のグラデーションに変換するカラーリング効果。暗部と明部にそれぞれ色を設定でき、スタイリッシュなバナーやキービジュアルの制作に便利です。
🔴🟢🔵 色収差
レンズの色分散を再現するエフェクト。RGBの各チャンネルが微妙にずれることで、カメラレンズを通したようなリアルな歪みが得られます。
✨ グロー
画像の明るい部分から光が溢れるような発光効果。ネオンサインやスキルエフェクトの演出に。グローの強さと色を調整して、幻想的な雰囲気を作り出せます。
🎮 エフェクトの組み合わせ
ShaderCreateの最大の魅力は、複数のエフェクトを自由に組み合わせられること。以下はグリッチ + CRTモニター + グロー + 色収差を同時に適用した例です。
🔥 複合エフェクト（グリッチ + CRT + グロー + 色収差）
各エフェクトのパラメータを個別に調整しながら、理想のビジュアルを追求できます。適用順序もドラッグ&ドロップで変更可能。
🛠 その他の機能
💾 GLSLエクスポート
作成したエフェクトのShaderコードをGLSLとして書き出し。WebGLプロジェクトにそのまま組み込めます。
🎮 Unityエクスポート
Unity用のShaderファイルとして出力。モバイルゲームやVR/ARプロジェクトで即使用可能。
🖼 PNGエクスポート
エフェクト適用後の画像をPNGとしてダウンロード。バナーやサムネイル制作に。
✏️ カスタムシェーダー
GLSLコードを直接記述して独自エフェクトを作成可能。上級者向けの拡張機能。
🔄 適用順序の変更
エフェクトの適用順序をドラッグ&ドロップで変更。順序によって全く違った仕上がりに。
💿 プリセット保存
お気に入りのエフェクト設定をプリセットとして保存・呼び出し。作業効率の向上に。
🚀 使い方
- 画像をアップロード — 左パネル上部の「Base Image」からファイルを選択
- エフェクトを選択 — 各エフェクトのチェックボックスをONにして、スライダーでパラメータを調整
- 組み合わせを調整 — 複数のエフェクトを重ね、適用順序を変更して理想のビジュアルを追求
- エクスポート — GLSL / Unity / PNG形式で書き出し