https://github.com/kusstar/vite-plugin-glslify

A plugin for Vite to compile glslify shader code
https://github.com/kusstar/vite-plugin-glslify

glslify plugin vite

Last synced: about 1 month ago
JSON representation

A plugin for Vite to compile glslify shader code

• Host: GitHub
• URL: https://github.com/kusstar/vite-plugin-glslify
• Owner: KusStar
• License: mit
• Created: 2021-11-15T06:35:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-04-18T07:28:03.000Z (9 months ago)
• Last Synced: 2024-12-18T06:23:30.780Z (about 1 month ago)
• Topics: glslify, plugin, vite
• Language: TypeScript
• Homepage:
• Size: 195 KB
• Stars: 34
• Watchers: 2
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-glslify

> A plugin for Vite to compile [glslify](https://github.com/glslify/glslify) shader code

## Usage

Install

```cmd

$ yarn add --D vite-plugin-glslify

# or npm i -D vite-plugin-glslify

```

Add it to `vite.config.*`

```js

// vite.config.js

import glslify from 'vite-plugin-glslify'

export default {

  plugins: [

    glslify()

  ],

}

```

That's it, now it will compile your glslify shader code.

It will transpile **glsl\`...\`** or **glsl(\`...\`)**.

Other details, see [glslify](https://github.com/glslify/glslify).

## Example

```js

const frag = glsl`

  #pragma glslify: ease = require('glsl-easings/sine-in')

  precision mediump float;

  varying vec3 vpos;

  void main () {

    gl_FragColor = vec4(ease(vpos*25.0),1);

  }

`

```

Will be transpiled to

```js

const frag = `

  #ifndef HALF_PI

  #define HALF_PI 1.5707963267948966

  #endif

  float sineIn(float t) {

    return sin((t - 1.0) * HALF_PI) + 1.0;

  }

  precision mediump float;

  varying vec3 vpos;

  void main () {

    gl_FragColor = vec4(ease(vpos*25.0),1);

  }

`

```

Or you can import files with extensions like `*.glsl`, `*.vert`, `*.frag`, see [example](./example).

## Interfaces

```ts

/**

 * A valid `minimatch` pattern, or array of patterns.

 */

export type FilterPattern = ReadonlyArray | string | RegExp | null;

import { Plugin } from 'vite';

import { FilterPattern } from '@rollup/pluginutils';

declare type GlslifyTransform = (filename: string, src: string, options: Options, done: (error: any, src: string) => void) => string;

interface GlslifyOptions {

    transforms?: (GlslifyTransform | string | [

        GlslifyTransform | string,

        any

    ])[];

}

interface Options {

    /**

     * included files or folder, defaults to [/\.ts$/, /\.js$/]

     */

    include?: FilterPattern;

    /**

     * excluded files or folder, defaults to ['node_modules/**']

     */

    exclude?: FilterPattern;

    /**

     * should transform literals with literalsCompiler, defaults to true

     */

    transformLiterals?: boolean;

    /**

     * function calling that should be compiled, defaults to [/glsl/]

     */

    funcName?: FilterPattern;

    /**

     * should transform files with filesCompiler, defaults to true

     */

    transformFiles?: boolean;

    /**

     * extensions of files that should be compiled, defaults to [/\.vert$/, /\.frag$/, /\.glsl$/]

     */

    extensions?: FilterPattern;

    /**

     * options passed to glslify

     */

    options?: GlslifyOptions;

}

declare const DEFAULT_EXTENSIONS: RegExp[];

declare function glslify(options?: Options): Plugin[];

export { DEFAULT_EXTENSIONS, glslify as default, glslify };

```

## LICENSE

[MIT](./LICENSE)