Beginning WebGL - HTML5 Games Most Wanted - page 143

attachShaders();
gl.useProgram(shaderProgram);
}
function setupShaders(fragmentShaderSRC, vertexShaderSRC){
fragmentShader = makeShader(fragmentShaderSRC, gl.FRAGMENT_SHADER);
vertexShader = makeShader(vertexShaderSRC, gl.VERTEX_SHADER);
createShaderProgram();
}
function initShaders() {
var fragmentShaderSRC = null,
vertexShaderSRC = null;
$.ajax({
async: false,
url: 'shader.fs',
success: function (data) {
fragmentShaderSRC = data.firstChild.textContent;
},
dataType: 'xml'
});
$.ajax({
async: false,
url: 'shader.vs',
success: function (data) {
vertexShaderSRC = data.firstChild.textContent;
},
dataType: 'xml'
});
setupShaders(fragmentShaderSRC, vertexShaderSRC);
}
Note To load external shader files with Ajax, you need to be running the program from a
server. If you do not have a server set up, then you will have to include the shader
source locally inside your program file. As a result, the code to load the source becomes
simpler, but your program structure is not as modular. The alternate of using local
shaders is in demo_1-2.html , with the code difference between demo_1.html shown.
<script id="shader-vs" type="x-shader/x-vertex">…</script>
<script id="shader-fs" type="x-shader/x-fragment"> …</script>
function initShaders() {
var fragmentShaderSRC = $('#shader-fs').html(),
vertexShaderSRC = $('#shader-vs').html();
setupShaders(fragmentShaderSRC, vertexShaderSRC);
}