@use-gpu/glsl-loader
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    @use-gpu/glsl-loader

    npm install --save @use-gpu/glsl-loader
    
    yarn add @use-gpu/glsl-loader
    

    GLSL loader for webpack and node

    This is a webpack and node loader which enables easy use of @use-gpu/shader.

    Usage

    Node.js

    For node, the included helper will use require-hacker to convert all *.glsl files to CommonJS:

    import "@use-gpu/glsl-loader/node";

    Webpack Config

    For webpack, it will emit ESM or CommonJS automatically:

    {
      // ...
      module: {
        rules: [
          //...
          {
            test: /\.glsl$/i,
            use: ['@use-gpu/glsl-loader'],
          },
        ],
      },
    }

    Import

    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.

    Typescript

    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]
    

    Keywords

    none

    Install

    npm i @use-gpu/glsl-loader

    DownloadsWeekly Downloads

    5

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    9.44 kB

    Total Files

    16

    Last publish

    Collaborators

    • unconed