Shadertoyで自分の画像をiChannel0に入れる方法と制約

エグゼクティブサマリー

結論からいうと、2026年5月時点で、Shadertoy の公式UIだけでは自分の画像を iChannel0 に「公式アセットとしてアップロード」する方法は確認できませんでした。現行の公式ダイアログは Select input for iChannel0 という選択画面で、見えるタブは Misc / Textures / Cubemaps / Volumes / Videos / Music であり、Upload に相当する項目は確認できません。2017年には公式サイト内コメントで「自前textureはアップロードできない」という趣旨の発言があり、2019年にも「loadable textures」が長年来ていない前提でプラグイン側の要望が出ており、2025〜2026年の検索スニペットでも同じUI構成が続いています。

一方で、ローカルな実験用途なら可能です。実務上の方法は、ブラウザ拡張で texture preview slot に画像ファイルや HTTPS の直リンクをドラッグ＆ドロップするか、gShaderToy.SetTexture(...) を JavaScript コンソールから呼んで外部URL画像を差し込む、のどちらかです。ただしこれらは非公式・クライアント側の回避策で、CORS、mixed content、保存時の private assets 問題、他人に同じ見た目で共有しにくい問題が残ります。再現性と共有性を重視するなら、単一HTML/WebGL へ移すのが最も安定です。

結論

UI状態ごとの判定

UI状態	画面 / 条件	公式に自分の画像を使えるか	実務上の判定
現行UI、未ログイン	`Select input for iChannel0` で `Misc / Textures / Cubemaps / Volumes / Videos / Music` が見える	いいえ	不可。組み込み素材の選択画面です。
現行UI、ログイン済み	同じダイアログ構成。ログイン自体はアカウント機能の前提だが、Upload 出現の一次証拠は見つからない	いいえ	不可。ログインしても公式Uploadが出る証拠は確認できませんでした。
保存済み / Fork済み	コミュニティ側では長年「未実装前提」で拡張要望・回避策が議論されている	いいえ	不可。Save/Fork が Upload の可視条件だという根拠は見つからず、むしろ逆の証拠が多いです。
旧UI	旧スキンでも入力選択は同系統の built-in media ダイアログ	いいえ	不可。旧UIでも自前画像の公式Uploadは確認できません。
非公式拡張 / JS コンソール	texture preview slot にローカル画像やURLを注入できる	はい	条件付きで可。ただし非公式・ローカル寄り・共有制約あり。
単一HTML/WebGL	自前で texture loading と uniforms を管理	はい	最も安定。Shadertoy の asset 制約と共有問題を避けやすいです。

もしどこかで Upload ボタンを見た記憶があるなら、それは公式標準UIではなく、拡張機能やコンソール注入で追加されたボタンだった可能性が高いです。2021年には「ブラウザコンソールにコードを貼って Upload ボタンを出す」方法が共有されており、同時期の公式サイト内コメントでも「アップロードボタンを出すコード」を話題にしています。

UIの実態

現在の公式ダイアログ

現在確認できる公式UIの本体は、次の導線です。これは2025〜2026年の公式ページ検索スニペットと一致していますし、あなたが送ってくれたスクリーンショットとも整合しています。

Shader Inputs
→ iChannel0 のスロットをクリック
→ Select input for iChannel0
→ Misc | Textures | Cubemaps | Volumes | Videos | Music

ここで重要なのは、このダイアログが「外部画像アップロード画面」ではなく「Shadertoyが持っている入力ソースの選択画面」だということです。コミュニティが整理した「Special Shadertoy features」や「Shadertoy media files」でも、Shadertoyの input は「提供済みの textures / videos / cubemaps / volumes / musics / special inputs」を前提に整理されています。

履歴から見た変化

履歴を追うと、少なくとも公開情報ベースでは、「昔は公式Uploadがあり、今は隠れている」という証拠は見つかりませんでした。むしろ逆で、2017年の Shadertoy 内コメントでは「自分の textures はアップロードできず、用意されたものを使う必要がある」という趣旨が明言され、2019年のプラグイン issue では「loadable textures が coming very soon と言われていたが何年も進んでいない」と書かれています。2021年には「ブラウザコンソールでアップロードボタンを出すスニペット」が共有され、2025〜2026年の公式UIスニペットでも依然として Upload タブは見えていません。

そのため、「Upload が hidden になっている」というより、「公式標準機能としては存在しないか、少なくとも現在の公開UIからは到達できない」と理解するのが、今回集められた一次・準一次情報には最も整合的です。

ログインと保存の位置づけ

サインイン画面やドラフト・所有権まわりの機能は存在しますが、ログイン、保存済み、新規、Fork のどれかが Upload ボタンの表示条件であることを示す一次情報は確認できませんでした。むしろ、拡張側の README には Save as new draft (for owned shaders) のように保存・所有の概念がありつつ、別 issue や別拡張では custom texture を「クライアント側で一時的に使う」ものとして扱っています。つまり、保存と custom asset upload は別問題です。

再現手順

公式UIだけで確認する手順

これは「できるかどうか」を確実に切り分ける最短手順です。

New か既存 shader を開きます。
右側または下部の iChannel0 スロットをクリックします。
Select input for iChannel0 というダイアログが開きます。
表示されるのが Misc / Textures / Cubemaps / Volumes / Videos / Music だけなら、そのセッションの公式UIからは自前画像をアップロードできません。

この状態でできるのは、Textures タブから組み込みtexture を選ぶことだけです。実際、公式サイト上の初心者向けサンプルも iChannel0 > Textures > Page 2 > London のように built-in texture を選ぶ流れを前提にしています。

非公式拡張でローカル画像を使う手順

一番再現しやすい回避策は、custom texture 用拡張を使うことです。一次情報としては、README と Chrome Web Store の説明がはっきりしています。拡張の主文言は「custom 2D textures, music and videos を一時的に Shadertoy projects で使える」「texture preview slots にファイルまたは web link を drag and drop」となっています。

手順

Shadertoy Custom Textures を導入します。README では Chrome / Firefox 向けが案内されています。
Shadertoy で対象 shader を開きます。
iChannel0 の preview slot に、ローカル画像ファイルか HTTPS の直リンクをドラッグ＆ドロップします。
シェーダ側では普通に iChannel0 を読むだけです。
うまく出ない場合は URL が HTML ページではなく画像そのものを返しているか、HTTPS か、CORS が通るかを確認します。

拡張側の README には、texture は 2D のみ、web 画像は cross-origin requests の制約でブロックされることがある、テキスト / web link は https のみ、と明記されています。また「custom loaded textures now use the same ID as one from shadertoy.com, so you can save projects without issue」とありますが、同じ README の冒頭ではあくまで「temporarily be used」とされているため、これは公式アセット化ではなく、保存警告を避けるためのクライアント側の工夫と読むのが自然です。

JavaScript コンソールで外部URL画像を差し込む手順

拡張を入れたくないなら、コンソールから gShaderToy.SetTexture(...) を呼ぶ方法があります。コミュニティ内ではこの手法が長く使われており、i.imgur.com、raw.githubusercontent.com、dl.dropboxusercontent.com などの直画像URLが実例として確認できます。これらは公式機能ではありません。外部画像をその場で読むための回避策です。

手順

Shadertoy で対象 shader を開きます。
開発者ツールを開き、Console に入ります。
たとえば次のようなコードを貼ります。mSrc は画像ファイルそのものの HTTPS URL に置き換えます。
実行後、iChannel0 を読むコードを書けば表示できます。
保存時に問題が出る場合は、この方法が「official upload」ではなく「外部 asset 参照」だからだと考えてください。

javascript
gShaderToy.SetTexture(0, {
  mSrc: 'https://i.imgur.com/example.png',
  mType: 'texture',
  mID: 0,
  mSampler: {
    filter: 'mipmap',
    wrap: 'repeat',
    vflip: 'true',
    srgb: 'false',
    internal: 'byte'
  }
});

画像が iChannel0 に入った後の GLSL は、最小限ならこれで十分です。

glsl
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    vec4 tex = texture(iChannel0, uv);
    fragColor = tex;
}

もし上下反転して見えるなら、uv.y = 1.0 - uv.y; を試すか、注入側で vflip:'true' を使います。実際、community snippets の多くは vflip:'true' を指定しています。

単一HTMLとWebGLへ移す手順

公開共有や長期保守を考えるなら、最も安定するのはこの方法です。コミュニティ整理でも「custom textures はローカルマシン向け」「autonomous HTML with custom textures」に言及されています。

手順

自分の画像をプロジェクトの static asset として置きます。
canvas と WebGL 初期化コードを用意します。
JavaScript 側で画像を読み、texture を作って shader に bind します。
Shadertoy 互換で使いたければ iResolution, iTime, iMouse, iChannel0 を自前で uniform として渡します。
必要なら Shadertoy 互換の軽量テンプレートや ShadertoyLite 系ツールを使います。

この方法なら、Shadertoy 側の asset UI、private assets、拡張依存、CORS 相性の問題を大きく減らせます。

制約と対処

制約の読み方

今回の調査で分かった制約は、**「Shadertoy 自体の公式制約」と「非公式回避策のブラウザ制約」**に分かれます。前者は「公式UIに Upload が見当たらない」「基本は組み込み media を選ぶ世界」という制約で、後者は「外部URLは CORS と HTTPS に依存する」「保存時に private assets と見なされうる」という制約です。さらに、Windows の ANGLE/HLSL 経由か、Linux/macOS のネイティブ OpenGL かで、texture 周りや描画周りの挙動差が出ることもあります。

また、Shadertoy 側がユーザー画像を受け取って自前ホスト/CDNに載せ直すという一次証拠は見つかりませんでした。確認できたのは、Shadertoy が持つ組み込み media の一覧と、そのリソースが Shadertoy のサイト上にあることです。つまり、CORSを回避するためにShadertoyにアップロードしてCDN化する という理解は、少なくとも今回確認できた資料とは合いません。

判定フロー

以下のフローで判断すると迷いにくいです。図そのものは今回の調査結果を整理したものです。根拠は公式UIスニペット、公式サイト内コメント、拡張の README、代替策一覧です。

短いトラブルシュート

Upload が見つからない
それは異常ではなく、今回確認できた標準UIでは普通です。公式ダイアログは Misc / Textures / Cubemaps / Volumes / Videos / Music まででした。
外部URLを入れても画像が出ない
URL が HTML の共有ページではなく、画像ファイルそのものを返す direct file URL か確認してください。コミュニティ実例は i.imgur.com/...png、raw.githubusercontent.com/...png、dl.dropboxusercontent.com/... のような形です。
HTTPS なのに読めない
CORS が原因の可能性が高いです。拡張 README でも「web からの画像は cross-origin request 制約でブロックされうる」と明記されています。
保存時に private assets と出る
それはその shader が Shadertoy の公式 media ではないものを参照しているサインです。Shadertoy 内コメントやコミュニティ投稿で同じ症状が確認できます。
画像が上下逆
uv.y = 1.0 - uv.y; を試すか、注入時に vflip:'true' を指定します。
ブラウザごとに挙動が違う
Windows では ANGLE/HLSL 経由、Linux/macOS では native OpenGL など、下層の違いがあります。texture flags やMIPmap周りの差が出ることがあります。
形式やサイズ制限が知りたい
公式 Upload 自体の一次情報が見つからないため、公式のファイル形式一覧やサイズ上限表は確認できませんでした。確認できたのは、非公式拡張側の「2D textures のみ」「音声/動画は Shadertoy かブラウザが元々対応する形式」という説明までです。

方法比較

方法	できること	長所	必要な手順	主な制約
公式UIのまま	built-in textures / volumes / videos / music を選ぶ	最も簡単で共有互換も高い	`iChannel0` をクリックして既存素材を選ぶ	自分の画像は入れられない。Upload は確認できない。
外部URLをJSで注入	公開画像URLを `iChannel0` に差し込む	拡張不要でも試せる。早い	Console で `gShaderToy.SetTexture(...)` を実行	CORS、HTTPS、`private assets`、再共有性の弱さ。例としては Imgur や `raw.githubusercontent.com`、Dropbox の直リンクが確認できる。
拡張でファイル / URL を注入	ローカル画像ファイルも web link も使える	実験しやすい。drag-and-drop で早い	`Shadertoy Custom Textures` を入れ、preview slot にドラッグ＆ドロップ	非公式・一時利用。textures は 2D のみ。web 画像は CORS、link は HTTPS 制約。
自前CDN / 静的ホスティング	外部URL方式を少し安定化できる	直リンクURLと CORS を自分で整えやすい	画像を自前ホストに置き、JS注入か拡張で読む	それでも Shadertoy公式Uploadではない。共有・保存問題は残る。これは外部URL方式の中では最も安定しやすい、という意味での推奨です。
単一HTML/WebGL	完全に自前管理で texture を使う	最も再現性が高い。共有しやすい。asset 制約が少ない	local / same-origin で画像を読み、`iChannel0` 相当を bind	Shadertoy の即時共有性は減るが、制作物としては最も堅い。ShadertoyLite 系や desktop / clone 系も候補。

この表を要約すると、「Shadertoy の標準UI」か「自分の画像」かを両立したい、という要求が一番衝突しやすいです。標準UIで行くなら built-in media に寄せる必要があり、自分の画像を優先するなら client-side workaround か別環境へ移るのが現実的です。

情報源と不確実性

今回の結論で特に重視したのは、公式サイト上の現行UIスニペット、Shadertoy ドメイン上の歴史的コメント・サンプル、custom texture 拡張の一次 README / ストア説明、そして community-maintained だが内容整理の質が高い shadertoy-unofficial です。一次情報の中心は Shadertoy 本体と、その周辺拡張の README でした。

主なソースを短くまとめると、次の通りです。

公式UIの現況確認: 2025〜2026年の公式検索スニペットに Select input for iChannel と Misc / Textures / Cubemaps / Volumes / Videos / Music が出ており、Upload は見えません。
公式サイト内の歴史的発言: 2017年には「自前textureはアップロードできない」趣旨のコメントが見え、2021年にはコンソールで upload button を足す話がありました。
回避策の一次情報: custom texture 拡張の README は、ファイル / URL の drag-and-drop、2D 限定、CORS、HTTPS 制約を明記しています。一次情報は GitHub の README と Chrome Web Store 説明です。
代替策: Using custom textures (only on your local machine) と autonomous HTML (with custom textures) という整理があり、ローカル利用やHTML移行が現実策だと分かります。

不確実な点もあります。公式の custom-image upload についての明示的なHow-Toや、対応拡張子一覧、サイズ上限表は見つかりませんでした。ただし、これは「資料不足」だけでなく、「そもそも公式 custom upload 機能が公開UIに存在しない」という今回の結論とも整合しています。したがって、最終的な判断は次の一文に集約できます。Shadertoy では、公式標準UIだけで自分の画像を iChannel0 にアップロードすることは、少なくとも公開情報ベースではできない。使うなら非公式ローカル回避策か、単一HTML/WebGLに移るべきです。

Books pro

2026年5月6日水曜日