glsl-shader-loader

A static shader source bundler for WebGL program, provide a possibility for management shader source by creating separate files.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
glsl-shader-loader
2800.1.64 years ago5 years agoMinified + gzip package size for glsl-shader-loader in KB

Readme

GLSL Shader Loader
Build Status Build Status
This is a static shader source bundler for WebGL program, provide a possibility for management shader source by creating separate files.
glsl-shader-loader for Webpack, supports for import GLSL functions from file and generates a shader string for WebGL program.

GLSL Shader Loader provids many features as following.
  • Allow import .glsl source file as a Javacript string for WebGL program
  • Support import statement in .glsl file that can extract GLSL functions from other files (includes nested reference)
  • Remove invalid import if the function will not be called
  • Repeated functions are imported only once
  • Syntax tree analysis and error detection

Install

npm install --save-dev glsl-shader-loader

Configuration

In your webpack configuration:
module: {
  rules: [{
    test: /\.(frag|vert|glsl)$/,
    use: [
      { 
        loader: 'glsl-shader-loader',
        options: {}  
      }
    ]
  }]
}

Usage

You can import GLSL functions with #pragma loader: statements in .glsl file
  • Import specified function by name
#pragma loader: import {nameA, nameB} from './file.glsl';
  • Import the only function in file by a new name
#pragma loader: import rename from './file.glsl';
  • NOTE:
- Only if there is a single function in .glsl file will you be able to rename it - If the imported function is not called, the function source will not insert in shader source - In case two functions have the same name, only import once - Imported function will replace the position of import statement in order

Options

| Name | Type | Default | Description | |------|:----:|:--------:|:-----------| | root | {String} | undefined | Specify the root path of source |

root

configuration:
{ 
  loader: 'glsl-shader-loader',
  options: {
    root: '/src/shaders' 
  }
}
Use / redirect to the specified directory.
e.g. #pragma loader: import {light} from '/lights.glsl'; will search lights.glsl under the path projectRoot/src/shaders/

Example

A directory structured like this:
.
├─ app.js 
├─ fragmentShaderSource.glsl 
└─ /collections/
   ├─ light.glsl 
   └─ random.glsl

Setting up shaders in app.js you might write code like this:
import fragmentShaderSource from './fragmentShaderSource.glsl'

gl.shaderSource(fragmentShader, fragmentShaderSource)
...

In shader code fragmentShaderSource.glsl, import randomDirection and spotLight from file:
precision mediump float;

varying vec4 v_color;
varying vec3 v_normal;

#pragma loader: import randomDirection from './collections/random.glsl';

#pragma loader: import {spotLight} from './collections/spotLight.glsl';

...

void main() {
  vec3 direction = randomDirection(range);
  vec3 spot = spotLight(direction, v_normal);
  ...
  gl_FragColor = v_result_color;
}

light.glsl
vec3 spotLight (vec3 direction vec3 normal) {
  ...
  return spot;
}

vec3 ambientLight (vec3 direction vec3 normal) {
  ...
  return ambient;
}

random.glsl
vec3 random(vec2 range) {
  ...
  return random;
}

import fragmentShaderSource from './fragmentShaderSource.glsl' Will return this JavaScript string:
precision mediump float;

varying vec4 v_color;
varying vec3 v_normal;

vec3 randomDirection(vec2 range) {
  ...
  return random;
}

vec3 spotLight (vec3 direction vec3 normal) {
  ...
  return spot;
}

...

void main() {
  vec3 direction = randomDirection(range);
  vec3 spot = spotLight(direction, v_normal);
  ...
  gl_FragColor = v_result_color;
}