У меня есть проект webgl, и я могу загрузить свои шейдеры, если я жестко закодировал их из основного. js как
var fragmentShaderSource = `#version 300 es.....etc'
Также, если я храню их в отдельном файле JS, я могу do:
import { vertexShaderSource } from './src/vertexShader.js'
Где мой vertexShader. js:
export const vertexShaderSource = `#version 300 es......etc'
Однако! На самом деле я хочу получить шейдер из текстовых файлов (.txt, .frag и т. д.) и заставить этот импорт работать в моем скрипте:
Либо:
import fragmentShaderSource from './src/main.frag';
или:
import fragmentShaderSource from './src/frag.txt';
Я исследовал топи c и уже выполнил
npm i raw-loader
И выполнил мой файл конфигурации веб-пакета:
var path = require('path');
const srcPath = path.resolve(__dirname, 'src');
const modulesPath = path.resolve(__dirname, 'node_modules');
module.exports = {
mode: "development",
devtool: false,
devServer: {
hot: true,
historyApiFallback: true,
port: 3000,
stats: 'minimal',
},
entry: './main.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'main.bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
},
{
test: /\.(vert|frag)$/i,
use: 'raw-loader',
include: srcPath,
exclude: modulesPath,
},
{
test: /\.txt$/,
use: 'raw-loader',
include: srcPath,
exclude: modulesPath,
}
]
},
stats: {
colors: true
},
};
Но Я получаю эти две ошибки для каждого расширения файла, которое я пытаюсь.
Для .frag:
Не удалось загрузить скрипт модуля: сервер ответил с типом «application / octet-stream», отличным от JavaScript MIME. Строгая проверка типов MIME применяется для скриптов модуля согласно HTML spe c. [http://localhost: 3000 / src / main.frag]
И для .txt:
Не удалось загрузить скрипт модуля: сервер ответил с JavaScript MIME-тип "text / plain". Строгая проверка типов MIME применяется для скриптов модуля согласно HTML spe c. [http://localhost: 3000 / src / frag.txt]
Также мой html код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="shortcut icon" href="/favicon.ico">
<!-- <link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<canvas id="c"></canvas>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See http://webgl2fundamentals.org/webgl/lessons/webgl-boilerplate.html
and http://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
<script type="module" src="./main.js"></script>
<div id="uiContainer">
<div id="ui">
</div>
</div>
</body>
</html>
Любая помощь очень ценится