やりたいこと
WebGLをブラウザ上で使用する場合，HTMLのscriptタグ内にGLSLコードを直接書き込むことでシェーダのタスクを指定できる． ただ，この方法ではGLSLコードの管理やエディタ上での編集がやりにくいので，GLSLコード部分を別ファイルにして読み込めるようにしたい． おそらくすぐに思いつくのは以下のような書き方だが，残念ながらこれでは読み込むことはできない．
<script src="shader.glsl" id="vertex-shader" type="x-shader/x-vertex"></script>Wenn man WebGL auf einem Webbrowser benutzen, kann man GLSL-Code direkt in die HTML Datei schreiben, um die Shader Aufgaben zu definieren. Aber auf diese Weise ist es schwierig, den GLSL-Code zu verwalten und zu bearbeiten. Daher möchten wir den GLSL-Code in eine separate Datei schreiben und aus der anderen Datai importieren. Eine einfache Idee wäre, den GLSL-Code wie oben gezeigt zu importieren, aber das funktioniert leider nicht.
GLSLコードのインポート
そもそも，GLSLコードをHTMLファイルの中で読み込む必要があるかというとそんなことはない． HTML内にべた書きする方法で行っているのは，GLSLコードを単なるテキストとしてJavaScriptから参照できるようにしているだけだ． なのでGLSLコードを別ファイルにする場合，そのコードをテキストとして直接JavaScriptから読み込んでしまえばよい． vertex shaderのコードであれば，以下のようにGLSLコード部分をbackticksで囲んでエクスポートするJavaScriptファイル(vertex-shader.glsl.js)を作る．
export default `#version 300 es
precision mediump float;
// Supplied vertex position attribute
in vec3 aVertexPosition;
void main(void) {
// Set the position in clipspace coordinates
gl_Position = vec4(aVertexPosition, 1.0);
}`これを，別のJavaScriptからインポートして使用すればよい．このときvertexSourceにはGLSLコードがテキストとして入っている．
import vertexSource from './vertex-shader.glsl.js'
shader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(shader, shaderString)この手法についての詳細は以下のページも参考にしてほしい: https://stackoverflow.com/questions/14219947/why-do-shaders-have-to-be-in-html-file-for-webgl-program