Just curious; How do I place my webgl shaders, in an external file?
Currently I\'m having;
I had the same issue and found that this has worked for me with jQuery:
var fragmentShaderSRC = null,
var vertexShaderSRC = null;
...
function executeProgram(){ //main program }
...
$.get("shader.fs", function(data){
fragmentShaderSRC = data.firstChild.textContent;
$.get("shader.vs", function(data){
vertexShaderSRC = data.firstChild.textContent;
executeProgram();
});
});
Where shader.fs and shader.vs are my shaders (and include the
and
declaration lines)
Update With Chrome the intelligent guess does not select 'xml'. The following code works in Chrome as well:
$.ajax({
url: 'shader.fs',
success: function(data){
fragmentShaderSRC = data.firstChild.textContent;
$.ajax({
url: 'shader.vs',
success: function(data){
vertexShaderSRC = data.firstChild.textContent;
executeProgram();
},
dataType: 'xml'
})
},
dataType: 'xml'
});
Update 2:
As < and & in the shader source need to be escaped to load in as XML, this works all of the time even if you use the less than comparision or the and logic operators:
var vs_source = null,
fs_source = null;
$.ajax({
async: false,
url: './my_shader.vs',
success: function (data) {
vs_source = $(data).html();
},
dataType: 'html'
});
$.ajax({
async: false,
url: './my_shader.fs',
success: function (data) {
fs_source = $(data).html();
},
dataType: 'html'
});