簡易GLSL VJアプリケーション

簡易GLSL VJアプリケーション(プロトタイプ)
製作記録、解説

概要

開発形式：AI協調開発（Gemini 2.5 Pro）
制作期間：約10時間（1日）
開発環境：VS Code未使用／完全なチャットAI対話型開発
使用技術：GLSL / Three.js / JavaScript / Tailwind CSS / SortableJS (Geminiによる選択)
開発目的：GLSLによるVJ表現の実験、およびAIとの協調開発の可能性検証

作品コンセプト

本作品は、GLSLシェーダーをライブコーディング形式で操作できるWebアプリケーションであり、インタラクティブかつリアルタイムな映像演出を実現する。コーディング初心者である私が、開発支援AI（Gemini 2.5 Pro）との対話のみで構築した実験的作品です。VJツールの「直感性」と「即興性」を重視したUI・UX設計に加え、AIと人間の協調による新しい開発パラダイムの提示も、本作の大きな意義と位置づけている。

主な機能と構成

◆ レイヤー合成とブレンド制御

複数のGLSLシェーダーをスタック形式で合成し、ブレンドモードや透明度の個別調整が可能。AfterEffects的な操作感をWeb上で再現。

◆ GLSLプリセットシェーダー

「グリッチTV」「カレイドスコープ」「サイケリング」などの映像生成・フィルター系シェーダーを多数実装。初学者でも即時的な視覚演出が可能。

◆ GLSLライブコーディング環境

フラグメントシェーダーの即時編集＆反映に対応。Uniformの設定も可能で、即興的かつ高度な映像パフォーマンスを実現。

◆ シーン・シーケンス管理

複数の状態（レイヤー構成）を「シーン」として保存可能。さらに、タイムライン的に再生可能な「シーケンス」機能を実装。BPM設定にも対応。

◆ データの永続化と共有

制作したデータはJSONでエクスポート／インポート可能。コラボレーションや再編集、作品のアーカイブに適応。

◆ 独立出力ウィンドウ

演出映像はUIとは別ウィンドウで全画面表示。実際のVJパフォーマンス環境でも即時的に利用可能。

技術スタックと設計思想

GLSL + Three.js：シェーダー記述とWebGL処理を統合
Tailwind CSS：高速UI構築と即時的な調整性
SortableJS：ドラッグ&ドロップ操作によるレイヤー直感制御
Gemini 2.5 Pro：設計・実装・デバッグを含めた総合開発支援

開発プロセスとAI協調の試み

本作は、完全にチャットベースでの開発を採用し、以下のようなAIとの協働設計を実践した。

◉ 対話的プロトタイピング

初期のUI設計から機能ごとの実装まで、AIへの逐次的指示とフィードバックを通じて試行錯誤を繰り返した。

◉ エラー駆動開発

開発中のエラーに対してAIにメッセージを投げ返し修正依頼を実行。VS Code等の補助なしで、純粋に対話のみで修正を行った。。

◉ 諦めのマネジメント

AIが特定の問題に執着しループ状態に陥る場合、発想を転換し、別設計で代替。AIの限界を理解した上での柔軟な問題解決を実践。

◉ シェーダーへの創造的フィードバック

映像の質感について、AIと主観的な対話（美的判断）を行い、エフェクトを改善。AIをクリエイティブパートナーとして扱った先進的アプローチ。

◉ セッションリセット戦略

応答品質が低下した際、チャットスペースを7回リセット。AIの「コンテキスト疲労」への対策として、チャット空間の管理能力も試された。

インパクトと今後の展望

このプロジェクトは、以下の点において大きな技術的・教育的インパクトを持つ。

初学者でもAIと組めば高度な開発が可能であることの実証
AIの強みと限界を正しく見極めて協調する能力の提示
GLSL×Webのライブビジュアル表現というユニークな領域への貢献

● 今後の改良予定

UI／UXのさらなる簡素化と操作直感性の向上
音声／MIDIとの同期機能追加
複雑なパラメトリックエフェクトとユーザー定義パッチの導入
VJツールとしてのライブ使用安定性の強化

総評

本プロジェクトは、単なる技術的実装を超え、AIと共に何が可能かを探る「共創」の実験だった。技術的習熟度のみに依存しない、柔軟な対話力・構想力・問題解決力を武器に、私は今後もAI時代にふさわしいクリエイティブエンジニアとして進化していきたい。

スクリーンショット

起動画面

操作コンソール

シェーダー選択画面

オリジナルコードも入力可能

入力後のコード変更、プリセットのコードも変更可能

Page updated

Google Sites

Report abuse