Add glslify webpack examples

chasevida · Jan 6, 2018 · 65906cc · 65906cc
commit 65906cc
Show file tree

Hide file tree

Showing 35 changed files with 8,631 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1,81 @@
+# GLSLify w/ Webpack
+
+
+
+Ok, so this was slightly confusing. Setting up [glslify](https://github.com/glslify/glslify) with [webpack](https://webpack.js.org/) can be slightly confusing and depending on your setup there can be some unexpected quirks - at least there was for me. While trying to get glslify to play nicely with my webpack setup I ran into several issues and depending on your setup they seem to flip around. So, to get a handle on how to get this all working correctly I stripped everything right back to a bare bones setup and tried a couple of suggested webpack loaders and babel plugins, some of which appear to be out of date and awaiting [fixes](https://github.com/glslify/babel-plugin-glslify/pull/9.). Overall the process hasn't been exactly smooth or encouraging so hopefully this repo helps out the next person who finds themselves struggling.
+
+
+
+## Approaches x3
+
+This repo covers three somewhat basic approaches to incorporating glslify with a webpack setup. They cover the following:
+
+
+
+1. [babel-plugin-glslify](https://github.com/glslify/babel-plugin-glslify) - uses babel
+2. [glslify-loader](https://github.com/glslify/glslify-loader) - an older webpack loader which doesn't seem to be recommended anymore
+3. [ify-loader](https://github.com/browserify/ify-loader) - a newer browserify based loader for webpack
+
+
+
+Each of the above approaches are explored in a seperate workspace:
+
+
+
+1. [test-babel-plugin-glslify](test-babel-plugin-glslify)
+2. [test-glslify-loader](test-glslify-loader)
+3. [test-ify-loader](test-ify-loader)
+
+
+
+### Summary of Approaches
+
+Below is a summary table outlining at a high-level what works with which setup. Jump into each workspace and run the respective commands to view the output in a browser as well as any compiler errors.
+
+
+
+| Workspace                                | Method                         | File                                     | Works? |
+| ---------------------------------------- | ------------------------------ | ---------------------------------------- | :----: |
+| [test-babel-plugin-glslify](test-babel-plugin-glslify) | `glslify`` `                   | [glsl-inline.js](test-babel-plugin-glslify/src/glsl-inline.js) | **½**  |
+| [test-babel-plugin-glslify](test-babel-plugin-glslify) | `glslify('./file.glsl')`       | [glsl-file.js](test-babel-plugin-glslify/src/glsl-file.js) |   ✔    |
+| [test-babel-plugin-glslify](test-babel-plugin-glslify) | `glslify(/* shader string */)` | [glsl-import.js](test-babel-plugin-glslify/src/glsl-import.js) |   ✘    |
+| [test-glslify-loader](test-glslify-loader) | `glslify`` `                   | [glsl-inline.js](test-glslify-loader/src/glsl-inline.js) |   ✘    |
+| [test-glslify-loader](test-glslify-loader) | `glslify('./file.glsl')`       | [glsl-file.js](test-glslify-loader/src/glsl-file.js) |   ✘    |
+| [test-glslify-loader](test-glslify-loader) | `glslify(/* shader string */)` | [glsl-import.js](test-glslify-loader/src/glsl-import.js) |   ✔    |
+| [test-ify-loader](test-ify-loader)       | `glslify`` `                   | [glsl-inline.js](test-ify-loader/src/glsl-inline.js) |   ✔    |
+| [test-ify-loader](test-ify-loader)       | `glslify('./file.glsl')`       | [glsl-file.js](test-ify-loader/src/glsl-file.js) |   ✔    |
+| [test-ify-loader](test-ify-loader)       | `glslify(/* shader string */)` | [glsl-import.js](test-ify-loader/src/glsl-import.js) |   ✘    |
+
+
+
+In summary the `ify-loader` is definitely the best choice. However, if you are using babel then you will want to use the `babel-plugin-glslify` babel plugin but you will need to be careful not to use tagged template literals that contain variables (I'm still working out why Babel is concatinating these and if that's the exact issue here).
+
+
+
+##  Install & Run
+
+If you have [Nodejs](https://nodejs.org/en/) > 8.9 and [Yarn](https://yarnpkg.com/en/) installed you can use the following:
+
+
+
+```
+git clone git@github.com:chasevida/glslify-webpack.git
+cd glslify-webpack
+
+yarn install
+```
+
+
+
+To run examples in any of the three workspaces change directory into one and then run one of the following three commands:
+
+
+
+```
+cd <workspace>
+
+yarn start:babel-glslify
+yarn start:glslify-loader
+yarn start:ify-loader
+```
+
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "glslify-webpack",
+  "version": "0.1.0",
+  "description": "A working example of using GLSLify with Webpack",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "clear": "rm -rf ./babel-plugin-glslify/dist ./glslify-loader/dist ./ify-loader/dist"
+  },
+  "workspaces": [
+    "test-babel-plugin-glslify",
+    "test-glslify-loader",
+    "test-ify-loader"
+  ],
+  "devDependencies": {}
+}
diff --git a/test-babel-plugin-glslify/.babelrc b/test-babel-plugin-glslify/.babelrc
@@ -0,0 +1,4 @@
+{
+  "plugins": ["glslify"],
+  "presets": ["babel-preset-env"]
+}
diff --git a/test-babel-plugin-glslify/README.md b/test-babel-plugin-glslify/README.md
@@ -0,0 +1,35 @@
+# babel-plugin-glslify
+
+
+
+This workspace makes use of a pretty bare bones webpack setup with babel and [babel-plugin-glslify](https://github.com/glslify/babel-plugin-glslify).
+
+
+
+The compositions under test here are:
+
+| No.  | Method                       | Command             | File                                     | Yes/No? |
+| :--- | ---------------------------- | ------------------- | ---------------------------------------- | :-----: |
+| 1    | glslify``                    | `yarn start:inline` | [./src/glsl-inline.js](src/glsl-inline.js) |  **½**  |
+| 2    | glslify('./file.glsl')       | `yarn start:file`   | [./src/glsl-file.js](src/glsl-file.js)   |    ✔    |
+| 3    | glslify(/* shader string */) | `yarn start:import` | [./src/glsl-import.js](src/glsl-import.js) |    ✘    |
+
+
+
+## Issues
+
+### 1. Inline with variable(s)
+
+Currently when using a tagged template literal with a variable within it, the compiler will error. I'm still working through whether this is a babel tagged template expression issue or an issue with glslify.
+
+
+
+### 3. Shader string
+
+Importing both the `vertex` and `fragment` shaders in via `require|import` and then parsing those using `glslify()` method throws an error. I'm not sure if this is expected behaviour (i.e. it only expects a shader file path) or if the method is capable of parsing the shader string directly.
+
+
+
+### Babel-plugin-glslify - `.toString(0)`
+
+The [babel-plugin-glslify](https://github.com/glslify/babel-plugin-glslify) has a [glslify-sync-hack.js](https://github.com/glslify/babel-plugin-glslify/blob/master/lib/glslify-sync-hack.js#L31) file with a method that calls [`.toString(0)` on line 31](https://github.com/glslify/babel-plugin-glslify/blob/master/lib/glslify-sync-hack.js#L31) which is incompatible with later versions of Nodejs (at least 8.9+ which I've tested). Changing this method to call `.toString()` resolves the issue. As such there is a pre-start script that copies across a "fixed" version of this file into the local `node_modules` directory. There is [PR #6](https://github.com/glslify/babel-plugin-glslify/pull/9) with a fix but this has been open since June 2017 without much conversation as to why it's being delayed.
diff --git a/test-babel-plugin-glslify/package.json b/test-babel-plugin-glslify/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "test-babel-plugin-glslify",
+  "version": "0.1.0",
+  "description": "A babel-plugin-glslify example",
+  "main": "index.js",
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "clear": "rm -rf ./dist",
+    "fix": "cp src/utils/glslify-sync-hack-fix.js node_modules/babel-plugin-glslify/lib/glslify-sync-hack.js",
+    "start:es5": "yarn clear && yarn fix && webpack src/glsl-es5.js && serve ./dist",
+    "start:file": "yarn clear && yarn fix && webpack src/glsl-file.js && serve ./dist",
+    "start:inline": "yarn clear && yarn fix && webpack src/glsl-inline.js && serve ./dist",
+    "start:import": "yarn clear && yarn fix && webpack src/glsl-import.js && serve ./dist"
+  },
+  "dependencies": {
+    "brfs": "^1.4.3",
+    "glsl-noise": "^0.0.0",
+    "glslify": "^6.1.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-glslify": "^2.0.0",
+    "babel-preset-env": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "ify-loader": "^1.1.0",
+    "raw-loader": "^0.5.1",
+    "webpack": "^3.10.0"
+  },
+  "browserify": {
+    "transform": [
+      "glslify",
+      "brfs"
+    ]
+  }
+}
diff --git a/test-babel-plugin-glslify/src/glsl-es5.js b/test-babel-plugin-glslify/src/glsl-es5.js
@@ -0,0 +1,36 @@
+const glslify = require('glslify')
+
+
+const vertexShader = glslify`
+void main () {
+  gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  vec4(position,1.0);
+}
+`
+
+const fragmentShader = glslify`
+#pragma glslify: snoise2 = require('glsl-noise/simplex/2d')
+
+void main () {
+  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}
+`
+
+console.log('Vertex Shader')
+console.log(vertexShader)
+
+console.log('Fragment Shader')
+console.log(fragmentShader)
+
+const output = `
+  <h1>Vertex Shader</h1>
+  <pre><code class="glsl">${vertexShader}</code></pre>
+  <br />
+  <h1>Fragment Shader</h1>
+  <pre><code class="glsl">${fragmentShader}</code></pre>
+  <br />
+`
+
+document.body.innerHTML = output
+hljs.initHighlightingOnLoad()
diff --git a/test-babel-plugin-glslify/src/glsl-file.js b/test-babel-plugin-glslify/src/glsl-file.js
@@ -0,0 +1,24 @@
+import glslify from 'glslify'
+
+
+const fragmentShader = glslify('./glsl/basic.frag')
+const vertexShader = glslify('./glsl/basic.vert')
+
+console.log(`Vertex Shader`)
+console.log(vertexShader)
+
+console.log(`Fragment Shader`)
+console.log(fragmentShader)
+
+
+const output = `
+  <h1>Vertex Shader</h1>
+  <pre><code class="glsl">${vertexShader}</code></pre>
+  <br />
+  <h1>Fragment Shader</h1>
+  <pre><code class="glsl">${fragmentShader}</code></pre>
+  <br />
+`
+
+document.body.innerHTML = output
+hljs.initHighlightingOnLoad()
diff --git a/test-babel-plugin-glslify/src/glsl-import.js b/test-babel-plugin-glslify/src/glsl-import.js
@@ -0,0 +1,32 @@
+import glslify from 'glslify'
+import fragment from './glsl/basic.frag'
+import vertex from './glsl/basic.vert'
+
+
+console.log(`Vertex Shader`)
+console.log(vertex)
+
+console.log(`Fragment Shader`)
+console.log(fragment)
+
+const vertexShader = glslify(vertex)
+const fragmentShader = glslify(fragment)
+
+console.log(`Vertex Shader`)
+console.log(vertexShader)
+
+console.log(`Fragment Shader`)
+console.log(fragmentShader)
+
+
+const output = `
+  <h1>Vertex Shader</h1>
+  <pre><code class="glsl">${vertexShader}</code></pre>
+  <br />
+  <h1>Fragment Shader</h1>
+  <pre><code class="glsl">${fragmentShader}</code></pre>
+  <br />
+`
+
+document.body.innerHTML = output
+hljs.initHighlightingOnLoad()
diff --git a/test-babel-plugin-glslify/src/glsl-inline.js b/test-babel-plugin-glslify/src/glsl-inline.js
@@ -0,0 +1,50 @@
+import glslify from 'glslify'
+
+
+/*
+// The below will error during compiling with Babel
+
+const vertext = `
+void main () {
+  gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  vec4(position,1.0);
+}
+`
+
+const vertexShader = glslify`${vertext}`
+*/
+
+const vertexShader = glslify`
+void main () {
+  gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  vec4(position,1.0);
+}
+`
+
+const fragmentShader = glslify`
+#pragma glslify: snoise2 = require('glsl-noise/simplex/2d')
+
+void main () {
+  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}
+`
+
+console.log('Vertex Shader')
+console.log(vertexShader)
+
+console.log('Fragment Shader')
+console.log(fragmentShader)
+
+const output = `
+  <h1>Vertex Shader</h1>
+  <pre><code class="glsl">${vertexShader}</code></pre>
+  <br />
+  <h1>Fragment Shader</h1>
+  <pre><code class="glsl">${fragmentShader}</code></pre>
+  <br />
+`
+
+document.body.innerHTML = output
+hljs.initHighlightingOnLoad()
diff --git a/test-babel-plugin-glslify/src/glsl/basic.frag b/test-babel-plugin-glslify/src/glsl/basic.frag
@@ -0,0 +1,5 @@
+#pragma glslify: snoise2 = require('glsl-noise/simplex/2d')
+
+void main () {
+  gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);
+}
diff --git a/test-babel-plugin-glslify/src/glsl/basic.vert b/test-babel-plugin-glslify/src/glsl/basic.vert
@@ -0,0 +1,5 @@
+void main () {
+  gl_Position = projectionMatrix *
+                  modelViewMatrix *
+                  vec4(position,1.0);
+}
diff --git a/test-babel-plugin-glslify/src/public/index.html b/test-babel-plugin-glslify/src/public/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+ <html class="no-js">
+  <head>
+    <title>GLSLify</title>
+    <meta charset="utf-8">
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+      }
+    </style>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dark.min.css">
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/test-babel-plugin-glslify/src/utils/glslify-sync-hack-fix.js b/test-babel-plugin-glslify/src/utils/glslify-sync-hack-fix.js
@@ -0,0 +1,32 @@
+var execFileSync = require('child_process').execFileSync
+var path = require('path')
+
+var SCRIPT_PATH = path.join(__dirname, 'exec-glslify')
+
+module.exports = function (baseDir, stringInput, optionInput) {
+  var transforms = optionInput.transform || optionInput.transforms || []
+  if (!Array.isArray(transforms)) {
+    transforms = [transforms]
+  }
+
+  var glslifyInput = {
+    transforms: transforms,
+    baseDir: path.resolve(baseDir)
+  }
+
+  if (optionInput.inline) {
+    glslifyInput.data = stringInput
+  } else
+  if ( stringInput.indexOf( '.' ) === 0 ){
+    glslifyInput.filename = path.resolve(baseDir,stringInput)
+  } else{
+    glslifyInput.filename = path.resolve('node_modules', stringInput)
+  }
+
+  var options = {
+    cwd: baseDir,
+    input: JSON.stringify(glslifyInput)
+  }
+
+  return execFileSync(process.argv[0], [SCRIPT_PATH], options).toString()
+}