シェーダートイ

Shadertoy は、WebGLを介してシェーダーを作成および共有するためのオンライン コミュニティおよびツールであり、Web ブラウザーでの3D コンピューター グラフィックスの学習と教育の両方に使用されます。

Shadertoyは、GLSLコードを通じてレンダリング技術や手続き型アートを共有、学習、実験するコンピュータグラフィックスの専門家、学者^[1] 、愛好家のためのオンラインコミュニティおよびプラットフォームです。2021年半ばの時点で、何千人ものユーザーから52,000件を超える公開投稿があります。WebGL ^[2]により、 ShadertoyはGPUの計算能力にアクセスして、手続き型アート、アニメーション、モデル、照明、状態ベースのロジック、サウンドを生成できます。

Shadertoy は、2013 年 1 月に Pol Jeremias と Inigo Quilez によって作成され、同年 2 月にオンラインになりました。

この取り組みの根源は、Inigo のコンピュータ グラフィックス教育 Web サイト [4] の「Shadertoy」セクション [3] にあります。2009^{年にMozilla の}Firefoxによる最初のWebGL実装の登場に伴い、Quilez は最初のオンライン ライブ コーディング環境と手続き型シェーダーのキュレーション リポジトリを作成しました。このコンテンツは、デモシーンの 18 人の作者によって寄贈されたもので、レイマーチ メタボール、フラクタル、トンネル効果など、Web ではこれまで見られなかった高度なリアルタイム インタラクティブ アニメーションが紹介されました。

Quilez と Pol は、長年にわたりいくつかのリアルタイム レンダリング プロジェクトで共同作業を行った後、2012 年 12 月に、デモシーン風のリソースとサイズ制限のあるリアルタイム グラフィック コンテンツを備えた元の Shadertoy ページの伝統を踏襲しつつ、ソーシャル機能とコミュニティ機能を追加し、オープン ソースの姿勢を取り入れた新しい Shadertoy サイトを作成することを決定しました。

このページには、ライブ エディター、リアルタイム再生、ブラウジングおよび検索機能、タグ付けおよびコメント機能が付属しています。コンテンツに関しては、Shadertoy はユーザーがクリエイティブな方法で利用できるように、固定された限定的なテクスチャ セットを提供しました。Shadertoy は長年にわたり、Web カメラとマイクの入力サポート、ビデオ、音楽、バーチャル リアリティ レンダリング、マルチパス レンダリングなどの追加機能を追加してきました。

数千人のユーザーから合計31,000以上の投稿があり、そのうちのいくつかは学術論文で引用されています。Shadertoyは、Siggraph 2015 Shadertoy Competition ^{[5]など、コミュニティが楽しめるコンテストやイベントを毎年開催しています。}

• 編集: 構文が強調表示され、即座に視覚的なフィードバックが得られるエディター
• ソーシャル: シェーダートイへのコメント、投票（いいね）
• 共有: 永続的な URL、他の Web サイトへの埋め込み、プライベート シェーダーの共有
• レンダリング: 浮動小数点バッファベースのマルチパスと履歴
• メディア入力: マイク、ウェブカメラ、キーボード、マウス、VR HMD、サウンドクラウド、ビデオ、テクスチャ

‹テンプレート マニュアルは統合が検討されています。› 

Shadertoy で作成された手続き型アニメーションの例としては、次の四角いトンネルが挙げられます。

void mainImage ( out vec4 fragColor , in vec2 fragCoord ) { // 入力: ピクセル座標vec2 p = ( - iResolution . xy + 2.0 * fragCoord ) / iResolution . y ;      

    
             

    // 画面の中心に対する各ピクセルの角度
float a = atan ( p.y , p.x ); // 変更された距離メトリックfloat r = pow(pow(p.x * p.x , 4.0 ) + pow ( p.y * p.y , 4.0 ) , 1.0 / 8.0 ) ; // (アニメーション化された逆数の)半径と角度でテクスチャをインデックス付けvec2 uv = vec2 ( 1.0 / r + 0.2 * iTime , a ) ;        
    
    
                
    
    
              

    // パターン: コサイン
float f = cos ( 12.0 * uv . x ) * cos ( 6.0 * uv . y );             

    // 色の取得: パレット
vec3 col = 0.5 + 0.5 * sin ( 3.1416 * f + vec3 ( 0.0 , 0.5 , 1.0 )); // 照明: 中央を暗くする    col = col * r ; // 出力: ピクセルの色fragColor = vec4 ( col , 1.0 ); }                 
    
    
        
    
    
       

上記のコードは次の画像を生成します。

Shadertoy はいくつかのソースで参照されています:

• NVidia開発者ブログ、2016年6月、Shadertoyコンテスト2016発表。^[6]
• Siggraph Real-Time Live!、2015年、インタラクティブなサウンド視覚化プロジェクト。^[7]
• Hacker News、2014年、Shadertoyはブラウザに手続き型GPU生成音楽を追加します。^[8]
• 暗黙的に定義された表面のレイトレーシングの数値解析法、^[9]
• ウィリアムズ大学のCS 371コース、2014年、CS 371のインスピレーション^[10]
• リアルタイムレンダリング、2015年8月、2015年8月20日の7つのこと。^[11]

• 公式サイト