GLSLをどこに書こうか

最近Three.jsでWebGLの世界に触れ始めた初心者です。
色々と参考サイトを巡っていると、GLSLの記述場所はHTML内に<script>タグで書いている例が多いようです。

index.html

<script id="vs" type="x-shader/x-vertex">
  void main(void) {
  }
</script>
<script id="fs" type="x-shader/x-fragment">
  void main(void) {
  }
</script>

↓

script.js

var material = new THREE.ShaderMaterial({
  vertexShader: document.getElementById('vs').textContent,
  fragmentShader: document.getElementById('fs').textContent
});

こんな感じ。WebGLさん的には文字列として渡ればどんな実装形式でも構わないみたいですが、JSにはヒアドキュメントが無いため、変数に複数行のテキストを入れるには色々と小細工が必要となり…

var vs = 'void main(void) {/*処理も全部一行で*/}';

可読性・保守性を諦めて一行にmin化するか

var vs = 'void main(void) {'
       + ''
       + '}';

var vs = (function(){/*
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

GLSLのインデントを保ちたい場合、何通りかのやり方がありますが上記のようなぐちゃぐちゃとしたコードを準備しないとならないので、煩わしい事を考えなくてよいHTMLインライン型に落ち着いたのかもしれません。

---

ところでES6ではヒアドキュメントが使えます！自分も最近知りました！
そこで以下のようにJS内でGLSLを書いてみることにしました。

script.js

const vertex_shader = `
  void main(void) {
  }
`;
const fragment_shader = `
  void main(void) {
  }
`;

const material = new THREE.ShaderMaterial({
  vertexShader: vertex_shader,
  fragmentShader: fragment_shader
});

この手法の場合、DOMアクセスが不要になった分、パフォーマンスの向上が見込めます。また、好みの問題ですがソースがJS内に一元化できるので全体の見通しが良いかも。