リンクをコピーしました

ShaderGPTに影響されて、リアルタイムにカスタムできるシェーダーWebアプリ「VisuAI-INNEI」を作った話

ある日 X を見ていたら、ShaderGPT なるものが流れてきました。

ShaderGPT

まさかの無料で、自然言語からいい感じのシェーダーを生成して、そのままシェアまでできる。
これが普通に楽しい。

最近 WebGL を触るようになって、「とりあえず雰囲気のいい表現を作って貼っておく」みたいなニーズが自分にもあるので、かなり刺さりました。

ただ、使ってみると欲が出る

ShaderGPT はとても良いんですが、使う中でこんな欲が出てきました。

  • 生成後のパラメータ調整を、コード編集なしでやりたい
  • 2D 平面だけでなく、頂点側や 3D 側ももっと触りたい
  • 自分のポートフォリオ制作に転用できる形で保存・再利用したい

ShaderGPT は恐らく「平面(2d)でインタラクティブに遊ぶ体験」にフォーカスしている印象で、そこは強みだと思っています。
そのうえで、自分はもう少し「ホゲホゲな表現を自分で詰めて再利用する」寄りの道具が欲しかったので、作ることにしました。

開発したのがこちらです。

VisuAI-INNEI

VisuAI-INNEI の生成結果

どう作ったか

ざっくり次の流れです。

  1. Google AI Studio でモックをざっくり作る
  2. ローカルに落として Cursor + Claude で実装方針を詰める
  3. フロントエンドはほぼ 1 日で形にする

本当は WebGL 2.0 ベースで行きたかったのですが、バイブコーディングだけで頂点まわりまで含めると複雑さが跳ね上がったので、現状は WebGL 1.0 を前提にまとめています。

実際に INNEI でできること

1) AI によるシェーダーコード生成

テキストで指示して、すぐに実行結果をプレビューできます。
生成履歴からの再適用も可能です。

AI生成と履歴パネル

2) パラメーターをリアルタイム調整

@param コメントを読んでスライダー化しているので、速度・密度・強度などを即時で触れます。

パラメーターとテクスチャ設定

3) 3D シェーダーにも対応（現状 OBJ）

2D/3D プロジェクトを分けて作成可能で、3D は現状 OBJ 読み込みに対応しています。

3Dプレビュー例

4) Google AI Studio の API Key をローカルで利用

API キーはローカルブラウザ上で扱う設計で、自分のキーでそのまま使えます。
モデル切り替えも UI からできます。

API Key とモデル選択

5) 生成履歴の行き来 / プロジェクト管理

生成したシェーダー履歴を行き来しながら、2D と 3D のプロジェクトを分けて管理できます。

エディタ全体像

VisuAI-INNEI の中身をざっくり解析

構成はざっくり、次の4層で分かれています。

  • UI 管理層
    • 2D/3D 切り替え、パネル表示、履歴や設定保存をまとめて管理
  • 描画実行層
    • WebGL の uniform 更新、テクスチャバインド、2D/3D 描画を担当
  • AI 生成層
    • モデルへの指示、レスポンスの検証、生成フロー制御
  • 補助ロジック層
    • @param コメント解析、OBJ パース、モデル一覧取得などを分離

実際のコードも、こんなイメージで「生成→描画→UI同期」がつながります。

// 生成結果を受け取って UI パラメータへ反映
const parsed = parseParamsFromShader(shaderCode);
setParameters(parsed);

// フレームごとに描画用 uniform を更新
gl.uniform1f(uTime, elapsedTime);
gl.uniform2f(uMouse, mouseX, mouseY);

@param ルールもシンプルで、コメントから UI を起こせる構成です。

// @param speed slider 0.1 0.0 3.0 0.1
// @param glow  slider 0.6 0.0 1.0 0.01

つまり、構成としては
「AI 生成ルート」+「パラメータ抽出」+「WebGL 実行基盤」+「履歴/プロジェクト管理」
がシンプルにまとまっている、という感じです。

ShaderGPT と INNEI を同プロンプトで比較してみた

同じ Gemini 2.5 Pro と「フリーメイソンの目」というプロンプトで比べると、初見の見栄えはやっぱり ShaderGPT の方が強かったです。
このあたりは生成チューニングの積み重ねを感じました。

VisuAI-INNEI 側

INNEI の「フリーメイソンの目」

ShaderGPT 側

ShaderGPT の「フリーメイソンの目」

おわりに

ShaderGPT に影響されて作り始めたものの、結果的には「自分の制作フローに合ったシェーダーツール」に育ってきました。

まだまだいじるところはありそうですが、実際にコードを書いてもらって、パラメーターをいじりながら遊びたい人は面白いと思います。

こういうのがパッと出来る時代ですね。。。（速い…!

シェーダーアーティストや、デザイナーなどに、こういうのを使ってインスパイアを得たり、とりあえず思いついたのを絵にしてみたい。っていう時に使ってもらえたらと思います。

それでは！