npm install --save @use-gpu/glsl-loader
yarn add @use-gpu/glsl-loader
Docs: https://usegpu.live/docs/reference-loader-@use-gpu-glsl-loader
This is a webpack and node loader which enables easy use of @use-gpu/shader
.
For node, the included helper will use require-hacker
to convert all *.glsl
files to CommonJS:
import "@use-gpu/glsl-loader/node";
For webpack, it will emit ESM or CommonJS automatically:
{
// ...
module: {
rules: [
//...
{
test: /\.glsl$/i,
use: ['@use-gpu/glsl-loader'],
},
],
},
}
For rollup, import the plugin as:
import rollupGLSL from "@use-gpu/glsl-loader/rollup";
You can then do:
import shader from './shader.glsl';
This will import a ParsedBundle
that can be used with @use-gpu/shader
's linkBundle(...)
function.
If you use a named import:
import { symbol } from './shader.glsl';
You will get the same ParsedBundle
, but with entry
set to the imported symbol name.
To allow shader imports to type check, create a glsl-files.d.ts
with:
declare module '*.glsl' {
type ParsedBundle = import('@use-gpu/shader/types').ParsedBundle;
const __module: ParsedBundle;
export default __module;
}
To make named imports import { x } from ...
pass the type checker, you need to generate a custom .d.ts:
npm run glsl-tsgen [--base-dir dir] [file or *.glsl]
yarn run glsl-tsgen [--base-dir dir] [file or *.glsl]
Made by Steven Wittens. Part of @use-gpu
.