やあ子供たち。今日はタイトルの内容だよ。外出しした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を編集・閲覧することができるようになったよ。
今日はこれまで。チャオ!