🌓

GLSL×VSCode快適拡張のススメ

2023/07/25に公開

VS Code

glsl

VS Code 拡張機能

tech

はじめに

この記事ではVSCodeでGLSLを書く人に向けて、快適に開発ができるように補助してくれる拡張機能を紹介します。筆者は主にThree.jsでShaderを書く際に使っています。
基本的なVSCodeの設定などは解説しないので、下の記事などを読んで設定しておきましょう。

おすすめ拡張一覧

Shader languages support for VS Code

ハイライトの例
GLSLやHLSLなどにシンタックスハイライトを追加してくれます。
HLSLに関してはマウスホバーで関数の説明なども表示してくれます。

glsl-canvas

GLSLプレビュー
GLSLのライブプレビューを見ることができます。
拡張機能の設定でUse Formatterをtrueにすることで、フォーマッターとしても利用することができます(デフォルトON)。Use Compact FormatterがデフォルトでONになっていますが、分かりにくくなるのでOFFにするのをおすすめします。

上記二つはどちらもGLSLのリンターで、OpenGLなどの策定を行っているKhronos Groupが公開しているglslValidatorを利用します。
拡張機能の導入後、Githubにあるリリースページから各々のプラットフォームにあったzipファイルをダウンロードし、解凍後、/bin/glslValidatorを任意のフォルダに保存。VSCodeに戻り、それぞれの拡張機能の設定欄からglslValidatorのパスを設定します。

また、GLSL LintやGLSL Linterを使用している際に、エラーが発生することがありますが、正しくパスを設定できているはずならば、ファイル拡張子の問題の可能性が高いです。
どちらの拡張もデフォルトでは.glslなど何のシェーダーか分からない状態だとエラーを返します。頂点シェーダーなら.vert、フラグメントシェーダーなら.flagのように明示的にすればエラーが解消します。
どちらも拡張機能の設定で特定の拡張子がどちらのシェーダーとして認識されるか指定することができますが、GLSL Lintのみファイル名でも設定できるため、

{
  "glsl-linter.fileExtensions": {
    "fragment.glsl": "frag",
    "vertex.glsl": "vert"
  },
}

のように設定することができます。
逆に、GLSL Linterではglslifyをサポートしている他、JavaScriptなどのソースコード内におけるString Literal内のLintも行ってくれます。

おわりに

まだShaderコードを少ししか触っていない筆者のおすすめでしたがお役に立てると嬉しいです！
他にもみなさんのおすすめの拡張機能があればコメントください🎉