この記事の概要
前回の記事ではウィンドウのサイズにあわせて要素を拡大し、リサイズ時も追従するようにしました。
今回はシェーダーファイルを上手く扱うための方法についてです。
まだ表現力をアップするには至りません……。
現状の確認
現状のコードを抜粋すると、こういった部分があります。
// シェーダープログラムの作成
const vertexShaderSource = `#version 300 es
in vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}`;
const fragmentShaderSource = `#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
}`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER) as WebGLShader;
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) as WebGLShader;
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
vertexShaderSource と fragmentShaderSource については、GLSL を文字列として埋め込んでいるだけです。
今のコードであれば良いですが、後々やりづらくなると思いますし、分割しておく方が何かと楽でしょう。
というわけで、これらを別のファイルに移します。
別のファイルへ移動し import
以下のように新しいフォルダとファイルを作成しました。
.
└── src
├── main.ts
├── shaders # 新しいフォルダ
│ ├── plane.frag # フラグメントシェーダー
│ └── plane.vert # 頂点シェーダー
├── style.css
└── vite-env.d.ts
#version 300 es
precision mediump float;
out vec4 outColor;
void main() {
outColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
}
#version 300 es
in vec2 aPosition;
void main() {
gl_Position = vec4(aPosition, 0.0, 1.0);
}
拡張子は .frag .vert と分けず、どちらも .glsl でも良いです。
ただ、同じにした場合は planeFragmenr.glsl planeVertex.glsl みたいなファイル名にすることが多いようで、冗長さが嫌でこうしました。
main.ts も書き換えます。
+ import vertexShaderSource from "./shaders/plane.vert";
+ import fragmentShaderSource from "./shaders/plane.frag";
- const vertexShaderSource = `#version 300 es
- in vec2 aPosition;
- void main() {
- gl_Position = vec4(aPosition, 0.0, 1.0);
- }`;
-
- const fragmentShaderSource = `#version 300 es
- precision mediump float;
- out vec4 outColor;
- void main() {
- outColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
- }`;
これでおしまいかと思いきや、現段階ではこのようなエラーが出ます。
こちらを解決します。
プラグインの設定
今回は Vite を使っているので、それにあわせたプラグインである vite-plugin-glsl を適用します。
bun i -d vite-plugin-glsl
tsconfig.json の types フィールドに追加します。
{
"compilerOptions": {
"types": [
"vite-plugin-glsl/ext"
]
}
}
そして、vite.config.js にも手を加えます。
import { defineConfig } from "vite";
import glsl from "vite-plugin-glsl";
export default defineConfig({
plugins: [glsl()],
});
この状態で起動すれば、ちゃんと表示できます。
VS Code の設定
ここからは VS Code を使っている人だけに該当する話です。
今のままでは GLSL にシンタックスハイライトが当たりません。
拡張機能をインストールします。
いくつか試してみた限りでは以下が良かったです。
gl_Position のような組み込みの変数なら、ドキュメントを読むこともできます。
ただし VS Code の初期設定のままだと Inlay Hints の主張が強いかもしれません。
設定の Editor > Inlay Hints: Enabled から offUnlessPressed にでも変えると良い具合になる気がします。
最後に
あれやこれや設定に関する記事を書きました。
そろそろ具体的な表現について記事を書きます。
次の記事はこちらです。