Three.js и import файлов .glsl
 

Здравствуйте!

При попытке загрузить файл .glsl через import выдаёт такую ошибку
"Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec."

Код загрузки:

import { ShaderMaterial, BackSide } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";

Подскажите, может знает кто, почему возникает эта ошибка и как её можно решить?

В этом сообщении и указывается причина:

"Не удалось загрузить скрипт модуля: сервер ответил типом MIME, отличным от JavaScript. Для скриптов модуля в соответствии со спецификацией HTML применяется строгая проверка типов MIME."

Судя по сообщению, в качестве типа сервер вообще ничего не сообщает - пусто.

Именно. Вот я и не пойму причину почему нет типа. Может вы знаете как его можно указать в загрузке этих файлов?

Ну так код сервера посмотреть, почему он не передает заголовков нужных.

Шейдерные программы это не JavaScript поэтому их нельзя загрузить с помощью import.

По факту это просто текстовые данные которые передаются в API функцию браузера. А уже браузер передает их драйверу видеокарты который их компилирует для текущей видеокарты и выполняет.

MallSerg,
все правильно написал
в trree внешние ресурсы( текстуры, материалы) загружаем аяксом внешним запросом
далее, после загрузки , обрабатываем
или вставляем в тело документа
https://threejs.org/docs/#api/en/mat...ShaderMaterial
https://developer.mozilla.org/ru/doc...color_in_WebGL

<script id="shader-vs" type="x-shader/x-vertex">Код</script>

В Three.js их загружают именно что через import. В точности как я указал в примере.

Не понятно, где и когда загружается, и что используется... провангую )

https://discourse.threejs.org/t/how-...loader/10474/4

здесь смотреть raw-loader

https://webpack.js.org/loaders/raw-loader/

Примерчик киньте.
Даже если и случайно загрузится, то в vertexShader и fragmentShader точно ничего не будет.
Там могут быть только объекты, которые экспортируются из указанных модулей.

Примерчик:

index.js

import * as THREE from '/three/build/three.module.js';
import loadTexture from "/texture-loader.js";
import loadModel from "/model-loader.js";
import BackfaceMaterial from "/backface-material";
import RefractionMaterial from "/refraction-material";

backface-material index.js

import { ShaderMaterial, BackSide } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";

refraction-material index.js

import { ShaderMaterial } from "../three/build/three.module.js";
import vertexShader from "./vertex.glsl";
import fragmentShader from "./fragments.glsl";

блин, нет ) только не это...
вопрос был, используется ли вебпак или что-то подобное... если import используется в <script module...> подразумевает что надо импортировать js файлы, а не текст или еще что-то... насколько я понял three.js хавает glsl в виде текста, по этому нужен raw-loader ))... пока гуглил ошибку из первого сообщения, я нагуглил так же несколько лоадеров конкретно для glsl... но это сути не меняет )...

итого, неизвестные: есть вебпак? а какой сервер? ... )

Без вебпака, сервер Apache

тогда нужен https://webpack.js.org/, там на главной странице то, что поможет )... даже мудрить не надо особо, просто лоадер добавить...

если совсем будет туго с пониманием, можно этот туториал пройти
https://webpack.js.org/guides/getting-started/

Ты ошибаешься.

Three.js с помощью ключевого слова import загружает и подключает модуль который является самым обычным JavaScript как и положено делать директиве import.
А уже этот модуль на JavaScript возвращает строку (текст шейдера)
Как пример шейдер по умолчанию.

Код подключающий модули с шейдерными программами
https://github.com/mrdoob/three.js/b...derMaterial.js

Код в котором написан модуль с шейдерной программой
https://github.com/mrdoob/three.js/b...vertex.glsl.js

Если я правильно понял то ты пытаешься подключить шейдерные программы не организуя их как модуль JavaScript что приводит к ошибкам.

Не совсем так, берем какой-то шейдер, например, https://github.com/mrdoob/three.js/b...h_vert.glsl.js
и видим там:

export default /* glsl */``

идем в package.json

там видим
"build": "rollup -c utils/build/rollup.config.js",

идем в https://github.com/mrdoob/three.js/b...llup.config.js

и на 204 строке видим ) как rollup парсит ast на предмет /* glsl */

-
Вывод: это не простой js файл...

----
p.s. хотя нет ) это простой js файл...