vite3-plugin-glslify

vite3-plugin-glslify

A plugin for Vite to compile glslify shader code

Usage

Install

$ yarn add --D vite3-plugin-glslify
# or npm i -D vite3-plugin-glslify

Add it to vite.config.*

// vite.config.js
import glslify from 'vite3-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.

Example

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

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.

Interfaces

/**
 * A valid `minimatch` pattern, or array of patterns.
 */
export type FilterPattern =
  | ReadonlyArray<string | RegExp>
  | string
  | RegExp
  | null

import { Plugin } from 'vite'
import { FilterPattern } from '@rollup/pluginutils'

declare type GlslifyTransform<Options = any> = (
  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