Merge pull request #15 from pqml/master

Use glslify-deps and glslify-bundle
glslify · Nov 28, 2018 · 4ca84bc · 4ca84bc
2 parents a66f366 + 75bff2a
commit 4ca84bc
Show file tree

Hide file tree

Showing 29 changed files with 473 additions and 188 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,24 @@
+# Editors
+.idea
+.vscode
+
+# Node / Yarn / Npm
 node_modules
+npm-debug.log*
+yarn.lock
+package-lock.json
+
+# Logs and Temporary files
+.tmp
+logs
 *.log
+
+# MacOS
 .DS_Store
-bundle.js
+.AppleDouble
+.LSOverride
+Icon
+._*
+
+# Misc
+coverage
diff --git a/.npmignore b/.npmignore
diff --git a/README.md b/README.md
@@ -1,48 +1,74 @@
 # glslify-loader
 
-[![experimental](http://badges.github.io/stability-badges/dist/experimental.svg)](http://github.com/badges/stability-badges)
-
 [glslify](http://github.com/stackgl/glslify) loader module for [webpack](http://webpack.github.io/).
 
 ## Installation
+```sh
+npm install glslify-loader
+```
 
-Generally, you'll want to use this alongside webpack's
-`raw-loader` module:
-
-``` bash
-npm install --save glslify-loader raw-loader
+Generally, you'll want to use this alongside webpack's [raw-loader](https://github.com/webpack-contrib/raw-loader) module:
+```sh
+npm install raw-loader
 ```
 
 ## Usage
 
-[![NPM](https://nodei.co/npm/glslify-loader.png)](https://nodei.co/npm/glslify-loader/)
+[Documentation: Using Loaders in Webpack](https://webpack.js.org/concepts/loaders/#configuration)
 
-[Documentation: Using Loaders](http://webpack.github.io/docs/using-loaders.html)
+##### Configuration file
 
-Once installed, you should be able to require your shaders
-like so to have them bundled at build time:
-
-``` javascript
-var source = require('glslify!raw!./my-shader.glsl')
+```js
+module.exports = {
+  rules: [
+    {
+      test: /\.(glsl|vs|fs|vert|frag)$/,
+      exclude: /node_modules/,
+      use: [
+        'raw-loader',
+        'glslify-loader'
+      ]
+    }
+  ]
+}
 ```
 
-### Configuration
+##### Inline
+
+```js
+// Using require
+const source = require('raw-loader!glslify-loader!./my-shader.glsl')
 
-Alternatively, you may apply these loaders automatically
-to all `.glsl`, `.frag` and `.vert` files by adding some
-additional configuration:
+// Using ES6 import statement
+import source from 'raw-loader!glslify-loader!./my-shader.glsl'
+```
 
-``` javascript
+##### Speficy source transforms
+See [Glslify Source Transforms](https://github.com/glslify/glslify#source-transforms) for details.
+
+```js
 module.exports = {
-  module: {
-    loaders: [
-      { test: /\.(glsl|frag|vert)$/, loader: 'raw', exclude: /node_modules/ },
-      { test: /\.(glsl|frag|vert)$/, loader: 'glslify', exclude: /node_modules/ }
-    ]
-  }
+  rules: [
+    {
+      test: /\.(glsl|frag|vert)$/,
+      exclude: /node_modules/,
+      use: [
+        'raw-loader',
+        {
+          loader: 'glslify-loader'
+          options: {
+            transform: [
+              ['glslify-hex', { 'option-1': true, 'option-2': 42 }]
+            ]
+          }
+        }
+      ]
+    }
+  ]
 }
 ```
 
+
 ## Contributing
 
 See [stackgl/contributing](https://github.com/stackgl/contributing) for details.

diff --git a/entry.js b/entry.js
diff --git a/example.frag b/example.frag
diff --git a/example/entry.js b/example/entry.js
@@ -0,0 +1,44 @@
+var regl = require('regl')()
+
+var fragment = require('./shader.frag')
+var vertex = require('./shader.vert')
+
+var size = [0, 0]
+window.addEventListener('resize', resize)
+resize()
+
+// hot module reloading for the shader files
+if (module.hot) {
+  module.hot.accept('./shader.frag', function () { fragment = require('./shader.frag') })
+  module.hot.accept('./shader.vert', function () { vertex = require('./shader.vert') })
+}
+
+var draw = regl({
+  frag: function () { return fragment },
+  vert: function () { return vertex },
+  attributes: {
+    position: [
+      -2, 0,
+      0, -2,
+      2, 2
+    ]
+  },
+  uniforms: {
+    time: function (f) { return 0.01 * f.tick },
+    resolution: function () { return size }
+  },
+  depth: {
+    enable: false
+  },
+  count: 3
+})
+
+regl.frame(function () {
+  regl.clear({ color: [0, 0, 0, 1] })
+  draw()
+})
+
+function resize () {
+  size[0] = window.innerWidth
+  size[1] = window.innerHeight
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>glslify-loader</title>
+  <meta name="description" content="glslify-loader example">
+</head>
+<body>
+  <script src="bundle.js"></script>
+</body>
+</html>
diff --git a/example/shader.frag b/example/shader.frag
@@ -0,0 +1,55 @@
+precision highp float;
+
+#ifdef GL_OES_standard_derivatives
+#extension GL_OES_standard_derivatives : enable
+#endif
+
+#pragma glslify: aastep = require('glsl-aastep')
+
+varying vec2 vUv;
+
+uniform vec2 resolution;
+uniform float time;
+
+// You can edit these values to see your changes without a page refresh
+const float size = 0.3;
+const vec3 boxColor = vec3(0.950, 0.982, 0.470);
+const vec3 bgColor = vec3(0.159, 0.164, 0.215);
+const float speed = 5.9;
+
+vec2 rotate(vec2 v, float a) {
+  float s = sin(a);
+  float c = cos(a);
+  mat2 m = mat2(c, -s, s, c);
+  return m * v;
+}
+
+float getAngle(float time) {
+  return sin(time * speed) * 0.8 + time * 1.3;
+}
+
+void main () {
+
+  vec2 box = vUv.xy - 0.5;
+  if (resolution.y >= resolution.x) {
+    box.y *= resolution.y / resolution.x;
+  } else {
+    box.x *= resolution.x / resolution.y;
+  }
+
+  float ang = getAngle(time);
+  ang += box.y * (ang - getAngle(time - 0.01)) * 10.;
+  box = rotate(box, ang);
+  box += 0.5;
+
+  float s = 0.5 - size * 0.5;
+  float inBox = aastep(s, box.x)
+    * aastep(s, box.y)
+    * aastep(s, 1.0 - box.x)
+    * aastep(s, 1.0 - box.y);
+
+
+  vec3 color = mix(bgColor, boxColor, inBox);
+
+  gl_FragColor = vec4(color, 1.0);
+}
diff --git a/example/shader.vert b/example/shader.vert
@@ -0,0 +1,9 @@
+precision highp float;
+
+attribute vec2 position;
+varying vec2 vUv;
+
+void main () {
+  vUv = position;
+  gl_Position = vec4(1.0 - 2.0 * position, 0, 1);
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,27 @@
+const path = require('path')
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    bundle: [path.join(__dirname, 'entry.js')],
+  },
+  output: {
+    path: __dirname,
+    publicPath: '',
+    filename: '[name].js',
+  },
+  module: {
+    rules: [{
+      test: /\.(glsl|frag|vert)$/,
+      exclude: [/node_modules/],
+      use: [
+        'raw-loader',
+        path.resolve(__dirname, '..', 'glslify-loader.js')
+      ]
+    }]
+  },
+  serve: {
+    content: __dirname,
+    dev: { stats: 'minimal' }
+  }
+}
diff --git a/glslify-loader.js b/glslify-loader.js
@@ -0,0 +1,60 @@
+const path = require('path')
+const loaderUtils = require('loader-utils')
+const resolve = require('resolve')
+const deps = require('glslify-deps')
+const bundle = require('glslify-bundle')
+
+module.exports = function glslifyLoader (content) {
+  this.cacheable && this.cacheable()
+
+  const depper = deps()
+  const callback = this.async()
+
+  // Setup options
+  const options = Object.assign({
+    basedir: path.dirname(this.resourcePath),
+    transform: []
+  }, loaderUtils.getOptions(this))
+
+  // Handle transforms from options
+  const transforms = Array.isArray(options.transform) ? options.transform : []
+  const postTransforms = []
+  transforms.forEach(transform => {
+    if (!Array.isArray(transform)) transform = [String(transform)]
+    const name = transform[0]
+    const opts = transform[1] || {}
+    // Keep post-transforms for later
+    if (opts.post) postTransforms.push({ name, opts })
+    else depper.transform(name, opts)
+  })
+
+  // Build the dependency graph
+  depper.inline(content, options.basedir, (err, tree) => {
+    if (err) return error(err)
+    // Make webpack watch each subdependencies
+    tree && tree.forEach(file => !file.entry && this.addDependency(file.file))
+    // Bundle the glsl output
+    const output = String(bundle(tree))
+    // Start applying post transforms
+    nextPostTransform(null, output)
+  })
+
+  // Iterate over each post transforms
+  function nextPostTransform (err, output) {
+    if (err) return error(err)
+    const transform = postTransforms.shift()
+    if (!transform) return done(output)
+    resolve(transform.name, { basedir: options.basedir }, (err, target) => {
+      if (err) return error(err)
+      require(target)(null, output, transform.opts, nextPostTransform)
+    })
+  }
+
+  function error (err) {
+    callback(err, null)
+  }
+
+  function done (output) {
+    callback(null, output)
+  }
+}