Лучший способ загрузить не-JS-скрипты из папки ресурсов: getElementbyID vs fetch, удаленные файлы или запись их содержимого в html? - PullRequest
Новая
       9

Лучший способ загрузить не-JS-скрипты из папки ресурсов: getElementbyID vs fetch, удаленные файлы или запись их содержимого в html?

0 голосов
/ 03 октября 2019

Для контекста:

Я довольно новичок в этом разделе Javascript (я в основном из C ++ фона) и пытаюсь реализовать webGL на моем сгенерированном Jekyll веб-сайте.

Я следую великолепному учебнику по адресу: https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html, но у меня возникла небольшая проблема. В учебном пособии они в основном вводят все непосредственно в html, что является далеко не идеальным решением для больших проектов, поэтому я поместил их в отдельные файлы .glsl в папке _assets в моей сборке jekyll.

В любом случае, теперь для важного бита:

Мне нужно загрузить содержимое файла в переменную в javascript.

Сначала я попытался сделать это на моем HTML: 

<canvas id="myCanvas"></canvas>
<script type="notjs" src="/assets/2dVertexShader.glsl"   id="2dVertexShader"  ></script>
<script type="notjs" src="/assets/2dFragmentShader.glsl" id="2dFragmentShader"></script>
<script type="text/javascript" src="/assets/test.js" ></script>

В соответствии с этим на JavaScript: 

var vertexShaderSource = document.getElementById("2dVertexShader").text;
var fragmentShaderSource = document.getElementById("2dFragmentShader").text;

Теперь это не работает. Я не могу сказать, почему. Я также попытался использовать fetch('/assets/2dVertexShader.glsl'), но это еще одна червь, поскольку я получаю только обещание и, насколько я могу судить, вынуждает меня инкапсулировать большую часть соответствующего кода в асинхронную функцию, чтобы я мог использовать await. Меньше, чем идеал.

Я могу вам сказать, что на самом деле ввод содержимого сценариев glsl внутри тегов <script> в html сработал, но это не идеально. На всех.

Я могу вставить остальную часть моего html, js и glsl, но я очень сомневаюсь, что это актуально.

1 Ответ

1 голос
/ 03 октября 2019

Ваш вопрос может быть закрыт в основном как мнение, но ....

Мое предложение, используйте модули es6 с многострочными шаблонами. 

// some-vs-shader.glsl
export default `
attribute vec4 position;
uniform mat4 matrix;
void main() {
  gl_Position = matrix * position;
}
`;

Затем вы можете импортировать в некоторых другихСценарий, подобный этому 

import someVertexShaderSource from './some-vs-shader.glsl';

И если вы хотите, вы можете позже запустить накопительный пакет, веб-пакет или пакет, чтобы прочитать ваш код и создать один большой файл, который загружается быстрее.

Этото, что Three.js .

отмечает, что для использования ключевого слова import необходимо использовать type="module" как в 

<script type="module" src="somescript.js"><script>

или во встроенном 

<script type="module">
import someVertexShaderSource from './some-vs-shader.glsl';
...
</script>

Примечание: я бросил вместе рабочий пример . Мне пришлось назвать файлы так, чтобы они заканчивались на .js, потому что в противном случае сервер glitch.com отправляет неправильный заголовок Content-Type. Таким образом, вы должны решить, хотите ли вы, чтобы ваши файлы заканчивались на .glsl, вам нужно выяснить, как настроить сервер для отправки правильного заголовка типа контента.

Что касается вашего вопроса о том, почему

<script type="notjs" src="/assets/2dVertexShader.glsl"   id="2dVertexShader"  ></script>

не работает, TL; DR Это потому, что спецификация говорит, что это не должно.

...