So I have this HTML object:
<div class="animation" onclick="javascript:loadGlslAnimation(this, 'some_url_containing_my_shader.com')" id="a1">
</div>
And this JavaScript function, using an XMLHttpRequest
to dynamically insert my shader file into the webpage:
var request = new XMLHttpRequest();
function loadGlslAnimation(element,url) {
request.open("GET", url);
request.onreadystatechange = function() {
if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
var data = request.responseText;
console.log('-->' + url + 'data:' + data);
var scr = '<script id="shader-fs" type="x-shader/x-fragment">'+data+'</script>';
element.innerHTML = scr;
}
}
request.send();
}
It seems the above is working in inserting the GLSL as a script into my div-animation object:
However, the animation doesn't display on the webpage.
Is it an issue where the script needs to be reloaded?
Or am I missing something (i.e. a .vert file [I don't know what it is] in addition to my .frag file)?
Here is the CSS describing my div-animation object, for reference:
.animation{
height: 400px;
left: 50%;
width: 40%;
display: inline-block;
vertical-align: top;
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…