如何解决无法使用 JavaScript 将 GLSL Shader 文件加载到 HTML
所以我有这个 HTML 对象:
<div class="animation" onclick="javascript:loadGlslAnimation(this,'some_url_containing_my_shader.com')" id="a1">
</div>
还有这个 JavaScript 函数,使用 XMLHttpRequest
将我的着色器文件动态插入到网页中:
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();
}
上面似乎正在将 GLSL 作为脚本插入到我的 div-animation 对象中:
但是,动画不会显示在网页上。
是否是需要重新加载脚本的问题?
或者我是否遗漏了一些东西(例如,除了我的 .frag 文件之外,还有一个 .vert 文件 [我不知道它是什么])?
这是描述我的 div-animation 对象的 CSS,供参考:
.animation{
height: 400px;
left: 50%;
width: 40%;
display: inline-block;
vertical-align: top;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。