システム部の稲葉です。
Three.jsのshaderの管理はどうするのかスタンダードなんでしょうか。
デモならば、以下のようにhtmlファイルに直接書くのが多そうです。

<script id=”vertexShadertype=”x-shader/x-vertex“>
//ここにVertexShaderを記述する
</script>

<script id=”fragmentShader” type=”x-shader/x-fragment”>
//ここにFragmentShaderを記述する
</script>

これでは、shaderが増えてくると辛いです。
shaderを別ファイルにしようとすると以下のやり取りを参考にするわけですが、

https://github.com/mrdoob/three.js/issues/283

別ファイル化はできてもhtmlファイル内に以下の記述が残るので、結局shaderが増減するたびにhtmlファイルを書き換える必要があります。

<script src=”scripts/simple_vertex.js” type=”x-shader/x-vertex” id=”vertexshader”></script>
<script src=”scripts/simple_fragment.js” type=”x-shader/x-fragment” id=”fragmentshader”></script>

結構悩んでたんですが、何年も前にXHRで全て解決と結論が出てたようです!
http://stackoverflow.com/questions/4878145/javascript-and-webgl-external-scripts

ホームページ制作依頼・無料お見積り承ります!

2015.06.09|Inaba_Mitsu

関連記事

コメント