WebGPUシェーダをhtmlの<script>タグから外部ファイルに外出しする方法

やあ子供たち。今日はタイトルの内容だよ。外出ししたWGSLのファイル名を shader.wgsl　としたときにそれをhtmlに読み込んでくる方法は以下の通りだよ。

  <script id="vs" type="x-shader/x-webgpu"></script>
  <script type="text/javascript">
    fetch('shader.wgsl')
      .then(response => response.text())
      .then(data => {
        const shader = document.getElementById('vs');
        shader.textContent = data;
      });
  </script>

これは何をしているかというとまず、空のvsというIDのスクリプトタグを作っておきます。そしてそこに、shader.wgslの内容をコードでもって能動的に注入してあげるんですね。あとはvscodeに「WGSL」などの、wgslコードをハイライトしてくれる拡張をインストールして、快適にwgslを編集・閲覧することができるようになったよ。
今日はこれまで。チャオ！