text: glslify7.0.0 • Public • Published
  A node.js-style module system for GLSL!
  This module contains:
  - glslify's command-line interface (CLI)
  - glslify node/electron interface
  - browserify transform.
  Because glslify just outputs a single shader file as a string, it's easy to use it with any WebGL framework of your choosing, provided they accept custom shaders. Integration is planned for three.js and pex, with more on the way! Open an issue here if you'd like to discuss integrating glslify with your platform of choice.
  If you're interested in playing around with glslify, you should check out glslb.in: it's a fragment shader sandbox similar to Shadertoy and GLSL Sandbox with built in support for glslify.
  ExampleExample
  var glsl =console
  Module APIModule API
  var glsl =
  var src = glsl`shader source...`var src = glsl`shader source...`
  Compile a shader inline using
  glsl as a
  tagged template string function.
  var src = glsl(file, opts)var src = glsl(file, opts)
  var src = glsl(shaderSource, opts)var src = glsl(shaderSource, opts)
  Compile a shader using an inline shader string or a file name.
  These are convencience methods provided that call
  glsl.compile() or
  glsl.file() accordingly. These methods are also provided for backwards
  compatibility with the previous
  < 6 interface.
  Optionally provide:
  opts.basedir- directory to resolve relative paths
  opts.transform- an array of transform functions, transform module name
  var src = glsl.compile(src, opts)var src = glsl.compile(src, opts)
  Compile a shader string from a string
  src.
  opts.basedir- directory to resolve relative paths in
  src
  opts.transform- an array of transform functions, transform module name strings, or
  [trname,tropts]pairs
  var src = glsl.file(filename, opts)var src = glsl.file(filename, opts)
  Compile a shader from a
  filename.
  opts.basedir- directory to resolve relative paths in
  src
  opts.transform- an array of transform functions, transform module name strings, or
  [trname,tropts]pairs
  InstallationInstallation
  To install the command-line interface, install glslify globally like so:
  npm install -g glslify
  To install glslify for use as a browserify transform, you should install it locally instead:
  npm install glslify
  Getting StartedGetting Started
  CLICLI
  The CLI can take a file as its first argument, and output to a file
  using the
  -o flag:
  glslify index.glsl -o output.glsl
  It can also read input from stdin and output to stdout:
  cat index.glsl | glslify > output.glsl
  Browserify TransformBrowserify Transform
  If using browserify from the command-line, simply pass glslify
  in as a transform using the
  -t/
  --transform flag:
  browserify -t glslify index.js -o bundle.js
  Alternatively, you may include glslify as a
  browserify.transform
  in your
  package.json file:
  When writing your app, you should be able to require and call glslify the same as the node/electron interface, like so:
  // index.jsvar glsl =var src = glslconsole
  or using tagged template strings:
  var glsl =console
  Your glslify calls will be replaced with bundled GLSL strings at build time automatically for you!
  // index.jsvar src = "#define GLSLIFY 1\n\nprecision mediump float; ..."console
  Webpack Loader
  You can use the glslify-loader module to bundle shaders through glslify with Webpack. Check out the repository for further information.
  Babel Plugin
  You can use glslify-babel as a Babel plugin. This allows you to use all ES6 features with glslify, including
  import statements and tagged template strings. Check out the repository to learn more.
  💡 A Note on Babel Import/Export💡 A Note on Babel Import/Export
  If you are using Babel presets to transpile ES6 import/export to CommonJS
  require() statements, you may run into issues with glslify. This is because Babel mangles the output into source code that isn't easy to statically analyze. One solution is to directly map
  glslify to CommonJS statements, using babel-plugin-import-to-require in your
  .babelrc.
  UsageUsage
  Installing a GLSL ModuleInstalling a GLSL Module
  Much like plain JavaScript modules, GLSL modules are stored on npm.
  The main difference is that GLSL modules contain an
  index.glsl file
  instead of an
  index.js. Generally, these modules start with
  glsl-
  in their name.
  To install glsl-noise in your current directory:
  npm install glsl-noise
  This will download glsl-noise and any of its dependencies, placing
  them in a
  node_modules directory for glslify to use.
  Importing a GLSL ModuleImporting a GLSL Module
  You can import a module using the following
  #pragma syntax:
  # noise = require(glsl-noise/simplex/2d)void
  Shader dependencies are resolved using the same algorithm
  as node, so the above will load
  ./node_modules/simplex/2d.glsl
  from the shader's directory.
  The above example would result in the following output:
  //// Description : Array and textureless GLSL 2D simplex noise function.// Author : Ian McEwan, Ashima Arts.// Maintainer : ijm// Lastmod : 20110822 (ijm)// License : Copyright (C) 2011 Ashima Arts. All rights reserved.// Distributed under the MIT License. See LICENSE file.//
  Exporting a GLSL ModuleExporting a GLSL Module
  You can export a token from a module using the
  glslify: export
  pragma, like so:
  float# export(myFunction)
  This means that when you import this module file elsewhere, you'll
  get
  myFunction in return:
  # topDot = require(./my-function.glsl)// 1
  If you check the output shader source, you'll notice that variables have been renamed to avoid conflicts between multiple shader files.
  You're not limited to exporting functions either: you should be able to export any GLSL token, such as a struct for reuse between your modules:
  struct Light;# export(Light)
  Passing references between modulesPassing references between modules
  Normally, glslify renames tokens to avoid conflicts across contexts. Sometimes, however, you want to reference the same thing from different contexts. The
  require function lets you explicitly fix reference names in order to guarantee that two different modules are talking about the same reference.
  Give
  some-module access to locally declared
  bar whenever it looks for
  foo internally:
  int bar;# require('some-module',foo=bar,...)
  It's important to make sure that
  bar has already been declared when you invoke
  #pragma glslify: require(...).
  Now time for some imagination. Let's pretend that we have some
  float[500] arrays that we'd like to be summed up.
  Here's a module that performs a reduction using a function
  map.
  float# export(accumulate)
  But notice that this module doesn't actually declare
  const int N; or define a function
  map anywhere. We have to make sure they are already defined when we require the module, and pass their names along with the
  require function:
  const int M = 500;float# sum500 = require('./accumulator.glsl',N=M,map=add)
  The accumulator has been imported and glslified into a
  sum function. We can also multiply all of the floats in some
  float[17] arrays the same way:
  const int M = 500;const int L = 17;floatfloat# sum500 = require('./accumulator.glsl',N=M,map=add)# product17 = require('./accumulator.glsl',N=L,map=mul)
  Glsl-hash-blur is an example of a module that uses this feature.
  Source TransformsSource Transforms
  Source transforms are a feature inspired by browserify, allowing you to
  modify your GLSL source at build time on a per-package basis. This is
  useful both for transpilation (e.g. converting from or to
  HLSL) or for
  making incremental improvements to GLSL syntax. (e.g. you can use
  glslify-hex to include CSS-style
  hex strings for colors in place of
  vec3s).
  There are three kinds of source transform:
  - Local transforms, the default. These are applied per-file, and only applied to a single package. If you're defining it via the CLI using
  -tit'll only apply itself to files outside of
  node_modules, but you can include it in
  package.jsontoo: these will be applied only to that package without interfering with any of the package's parents or children.
  - Global transforms are applied after local transforms to every file, regardless of whether or not it's a dependency.
  - Post transforms are applied to the entire output file once it's been bundled. Generally, you want to reserve this for very specific use cases such as whole-shader optimisation.
  There are a number of ways to use a transform. Start by installing it in your project:
  npm install --save glslify-hex
  The preferred way to enable a transform is through your project's
  package.json file's
  glslify.transform property, like so:
  You may also include arguments to your transform as you would with browserify:
  Note that this method is only available for local transforms.
  You may also specify transforms via the CLI:
  glslify -t 'local-transform' -g 'global-transform' -p 'post-transform'
  Or when using the browserify transform by including them as options like so:
  var glslify =glslify
  Further ReadingFurther Reading
  - stack.gl Packages List (see "Shader Components").
  - Modular and Versioned GLSL by @mattdesl.
  - Module Best Practices by @mattdesl.
  - Art of Node by @maxogden.
  - Browserify Handbook by @substack.
  - WebGL Insights includes a chapter introducing glslify in detail.
  - Shader School by @mikolalysenko, chrisdickinson and @hughskennedy.
  - Book of Shaders by Patricio Gonzalez Vivo.
  - Pragmatic Physically Based Rendering by @marcinignac.
  - glslifyでGLSLをモジュール化しよう by @yuichiroharaiJP.
  glslify in the Wildglslify in the Wild
  - Plotly
  - Audiograph
  - KAMRA: Deja Vu
  - Swiss Army Man
  - Connecting Europe
  - Kuva
  - The Law of The Jungle
  - Make Me Pulse
  - SMASHING Mega Scene
  - Takumi Hasegawa
  - ectoplasmid
  - glslb.in
  - N|Solid
  ContributingContributing
  See stackgl/contributing for details.
  LicenseLicense
  MIT. See LICENSE.md for details.
  install
  npm i glslify
  weekly downloads
  54,433
  version
  7.0.0
  license
  MIT