Q&A
以下のような頂点シェーダを記述した場合(<head>等の表記は省略してます)
scc
1 2<script src="script.js" type="text/javascript"></script> 3<script id="vs" type="x-shader/x-vertex"> 4attribute vec3 position; 5attribute vec4 color; 6uniform mat4 mvpMatrix; 7varying vec4 vColor; 8 9void main(void){ 10 vColor = color; 11 gl_Position = mvpMatrix * vec4(position, 1.0); 12} 13</script>
外部jsファイル（script.js）からは
js
1//script.js 2 var c = document.getElementById('canvas'); 3 var gl = c.getContext('webgl'); 4 5 var shader; 6 var scriptElement = document.getElementById("vs"); 7 shader = gl.createShader(gl.VERTEX_SHADER); 8 gl.shaderSource(shader, scriptElement.text); 9 gl.compileShader(shader); 10 return shader; 11
のような形で頂点シェーダを読み込むことができますが
以下のように、頂点シェーダを別のファイルに分けた場合うまく作動しません。
scc
1 <script id="vs" src="WebGl/vert_shader" type="x-shader/x-vertex"></script> 2
おそらくscript.jsでscriptElement.textとしている箇所で読み込みができていないのですが、これはどうすれば読み込めるようになるのでしょうか？
回答1件
0
ベストアンサー
scriptタグでは読み込むことができません。
なので、この場合はAjax（XMLHttpRequest）を用いて非同期で読み込み、テキストファイルとして読み込んだあとに、シェーダソースとして指定してやる必要があります。
投稿2016/12/19 13:22
総合スコア2283
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。