Shadertoy

使えるショートカットキー

保存 Ctrl+S
実行 Alt+Enter
1行削除 Ctrl+D
単語の区切りまで移動 Ctrl+→ or Ctrl+←
カーソルより右 単語の区切りまで削除 Ctrl+Delete
Alt+←マウスドラッグ マウスカーソルが+に変わって矩形選択できます
ソースコードの一番上or下まで移動 Ctrl+↑ or Ctrl+↓
ソースコード表示サイズの変更 Alt+→ or Alt + ←
Alt+F フルスクリーンにする

ShaderToyでコーディングした結果を共有するには?

ShaderToyでpublicにすると外部サイトから実行結果を埋め込みできる。

動画で共有

Recボタンを押すとwebmという|形式で保存される。
これは動画のファイルフォーマットでGoogle Chromeで再生できるし、<video>タグを使ってウェブに埋め込める。
詳細はwebmのページで
Shadertoyのデフォルトコードをwikidotで表示する実験

Three.js使用

ひな形

フラグメントシェーダを外部ファイルにする場合のひな形

[[html]]
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script src="/local--files/shadertoy/shadertoy.js"></script>
<script>
shadertoy("/local--files/shadertoy/sample.fs");
</script>
</body>
[[/html]]

フラグメントシェーダのコードを中に書く場合のひな形

[[html]]
<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
 <script type="x-shader/x-fragment" id="fshader">
//フラグメントシェーダ
uniform vec3      iResolution;           // viewport resolution (in pixels)
uniform float     iGlobalTime;           // shader playback time (in seconds)
 
//↓ここにShaderToyで書いたコードをそのままコピペ
//void mainImage( out vec4 fragColor, in vec2 fragCoord )
//{
//}
 
void main(){
    mainImage(gl_FragColor,gl_FragCoord.xy);
}
</script>
<script src="/local--files/shadertoy/shadertoy-threejs.js"></script>
</body>
[[/html]]

サポートサイト Wikidot.com