Я пытаюсь найти надежный способ загрузки исходного кода шейдера GLSL RayTracer.glslf из файла, который находится в том же каталоге, что и index.html, для моего простого приложения визуализации WebGL.
Iпоследовал некоторые предыдущие ответы от переполнения стека. Я уверен, что 2 года назад они работали. Но теперь они почему-то перестали работать.
Я попробовал 3 варианта: 1) fetch работает, остальные 2) <object data="RayTracer.glslf"> и 3) <iframe id="txtRayTracer"> не работает.
Проблема с fetch заключается в том, что он работает только тогда, когда файлы размещаются на веб-сервере, но я хочу что-то, что также работает, когда я просто дважды щелкаю по index.html с моего локального диска без запуска веб-сервера.
Сокращенный код выглядит следующим образом:
<script>
"use strict";
var str_rayTracer = "//RayTracerPlaceholder";
async function loadPage(){
// --- alternative 1
// This works when I run web-server http://127.0.0.1:5500/ThreeJS/GLSL_CSG/RayTracePrimitives/index.html
// but not from local file file:///home/prokop/git/LearnWeb/ThreeJS/GLSL_CSG/RayTracePrimitives/index.html
//str_rayTracer = await fetch('RayTracer.glslf' ).then( r => r.text() );
// --- alternative 2
// This should work with <object data="RayTracer.glslf" id="txtRayTracer">
//str_rayTracer = document.getElementById("txtRayTracer").contentDocument.body.childNodes[0].innerHTML;
// --- alternative 3
// This should work with <iframe id="txtRayTracer" style="display:none" src="RayTracer.glslf" >
str_rayTracer = document.getElementById("txtRayTracer").contentDocument.body.innerText;
console.log( " HEY " );
console.log( str_rayTracer );
console.log( " HEY HEY " );
}
</script>
<body onLoad="loadPage()">
<div style="width: 640px;height: 480px;" id="GLScreen"></div>
<div style="width: 1200px;">
Scene Source </BR> <textarea id="txtScene" cols="40" rows="5" onChange="selectScene(this)">//Empty </textarea></BR>
<!-- RayTracer.glslf </BR> <object data="RayTracer.glslf" id="txtRayTracer"></object> </BR> -->
RayTracer.glslf </BR> <iframe id="txtRayTracer" style="display:none" src="RayTracer.glslf" ></iframe></BR>
</div>
</body>