使用esbuild在类型记录文件中加载.wglsl文件的方法？
使用esbuild在类型记录文件中加载.wglsl文件的方法？
提问于 2022-03-19 03:48:31
我正在使用esbuild作为工具来捆绑我的类型记录代码，但是我找不到一种方法来为".wgsl“文件配置加载程序。
Mi app.ts文件：
import shader from './shader.wgsl';
//webgpu logic我的shader.d.ts：
declare module '*.wgsl'{
const value: string;
export default value;
}我的esbuild文件(如您所见，我不能使用ts-着色器-加载程序)：
import { build } from "esbuild";
import * as ShaderLoader from "ts-shader-loader";
build({
entryPoints: ['./src/app.ts'],
bundle: true,
sourcemap : true,
target : 'es2015',
format:'esm',
minify : true,
outfile: './dist/js/app.js',
tsconfig: './tsconfig.json'
plugins: [ShaderLoader]
}).catch(() => process.exit(1));回答 3
Stack Overflow用户
回答已采纳
发布于 2022-03-28 17:38:04
为了允许其他用户加载一个esbuild-plugin-glsl文件，我不得不为.wgsl贡献自己的力量。这是我的esbuild文件。使用版本1.1.0^
import { build } from "esbuild";
import { glsl } from "esbuild-plugin-glsl";
build({
entryPoints: ['./src/app.ts'],
bundle: true,
sourcemap : true,
target : 'es2015',
format:'esm',
minify : true,
outfile: './dist/js/app.js',
tsconfig: './tsconfig.json',
plugins: [
glsl({
minify: true,
})
]
}).catch(() => process.exit(1));d.ts文件应该具有以下内容：
declare module '*.wgsl'{
const value: string;
export default value;
}导入着色器的方法是：
//This file has the Fragment and Vertex Shader Code.
import shader from './shader.wgsl';Stack Overflow用户
发布于 2022-03-19 14:43:48
您需要类似于esbuild-plugin-glsl的东西(它是用于esbuild的GLSL导入插件，而ts-shader-loader是webpack的导入插件)。
Stack Overflow用户
发布于 2022-03-27 08:29:32
我们使用维特导入WGSL和其他资产。
通过在道路上加上'?raw‘，Vite将为你完成这项工作。
import shader from './shaders/xxx.wgsl?raw'Vite还可以简单地导入wasm、worker、url，您可以检查：https://vitejs.dev/guide/assets.html#importing-asset-as-url
我们还建立了一个基于Vite的项目，为WebGPU https://github.com/Orillusion/orillusion-webgpu-samples的新成员共享基本样本。
欢迎更多的演示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71535213
复制相关文章
相似问题
腾讯云开发者
