ShaderToy用のVSCode拡張機能

はじめに

Shaderの作成は始めたばかりですが、環境はVSCodeでプレビューとしてp5.js経由で行っていました。 ただShaderToyではGLSL ES 3.0が使用可能にもかかわらず、p5.jsはGLSL ES 1.0しかサポートしていないので不自由する部分がありました。 その際に別の環境を探していた時にShaderToy用途のVSCode向けのプレビューワーを見つけたので導入しました。

実際に使用してみるとp5.jsを使用した場合よりも快適に実装でした。 元々p5.jsはシェーダー特化ではないのである意味当たり前ではありますが。

基本的な使用方法

エントリーポイント

ShaderToyのエントリーポイントは void mainImage(out vec4, in vec2) になりますが、そのままVSCodeでも使用することができます。 また void main() が存在した場合はそちらが優先されますが、main関数内にmainImageを挿入すれば他の環境でも実行可能になります。 (Uniformsなどの編集も必要になりますが)

    void main(void){
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
    

Uniforms

iResolution,iTime,iMouseなどもそのまま使用することができます。 iChannelNについては以下でファイルの場所等を指定するコードを記載すれば使用可能です。

iChannelNについて

チャンネルごとにテクスチャを導入するには以下のように定義します。 ローカルファイル・リモートファイルともに使用することが可能です。

    #iChannel0 "file://example.png"
#iChannel1 "https://example.com/example.jpg"
    

他のglslのinclude

C言語と同じように他のシェーダーファイルをincludeすることができます。

    #include "lib/code.glsl"

プレビュー

コマンドパレットもしくは右クリックで"Shader Toy: Show GLSL Preview"を選択すればプレビューが表示されます。 もしエラーがあればプレビュー内のエラーメッセージでその場所を知らせてくれます。 下部のアイコンで一時停止と再生、右上のカメラアイコンでスクリーンショットの保存が可能です。

また左上にベンチマークが表示されていますので、パフォーマンスを確認することができます。 初期は1フレーム当たりの実行時間(miliseconds)ですが、クリックすることでfpsなどに単位を変更することができます。

設定

プレビューのアスペクト比変更

プレビューのアスペクト比はデフォルトでは1:1(1024x1024)ですが、ShaderToy用に16:9に変更することが可能です。 settings.jsonに以下を挿入すればよいです。

    "shader-toy.forceAspectRatio": [
    640,
    360
]
    

保存するスクリーンショットの解像度も変更可能です。 これによりプレビューと保存画像の解像度を別個にすることができます。 ただし解像度が異なる場合はおそらくiResolusionの問題などから意図した画像が保存されない場合があります。

まとめ

プレビューも右クリックで開き、コードの変更に対してインタラクティブにプレビューも変更される他、エラーメッセージも表示されるので 素早く実装することができます。これまでのところ不満なく快適に使用できています。 もしShaderToyに投稿する場合はコードをコピペするだけです。 アニメーションとして保存はできませんが、ShaderToy側でレコーディングしてダウンロード可能なのでほぼ不便はありません。

Reference

1. https://marketplace.visualstudio.com/items?itemName=stevensona.shader-toy