use glsl-template-loader

auduno · Sep 19, 2016 · fa54b59 · fa54b59
1 parent f2ae43e
commit fa54b59
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/js/deformers/twgl/Background.js b/js/deformers/twgl/Background.js
@@ -1,5 +1,8 @@
 import twgl from 'twgl.js/dist/twgl-full';
 
+import createBgVert from './shaders/background.vert';
+import createBgFrag from './shaders/background.frag';
+
 
 export default class Background {
   constructor (deformer) {
@@ -40,8 +43,8 @@ export default class Background {
     });
 
     this._bgProgramInfo = twgl.createProgramInfo(gl, [
-      require('raw!./shaders/background.vert'),
-      require('raw!./shaders/background.frag')
+      createBgVert(),
+      createBgFrag()
     ]);
 
     this._bgTextures = twgl.createTextures(gl, {

diff --git a/js/deformers/twgl/index.js b/js/deformers/twgl/index.js
@@ -4,6 +4,9 @@ import { getImageData } from '../../utils/image';
 import { getBoundingBox } from '../../utils/points';
 import Background from './Background';
 
+import createDeformVert from './shaders/deform.vert';
+import createDeformFrag from './shaders/deform.frag';
+
 
 export default class Deformer {
   constructor (params = {}) {
@@ -168,8 +171,8 @@ export default class Deformer {
 
     const gl = this.getGLContext();
     this._maskProgramInfo = twgl.createProgramInfo(gl, [
-      require('raw!./shaders/deform.vert'),
-      require('raw!./shaders/deform.frag')
+      createDeformVert(),
+      createDeformFrag()
     ]);
 
     this._isLoaded = true;

diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "filesaver.js": "andyinabox/FileSaver.js",
     "getusermedia": "^1.3.5",
     "gh-pages": "^0.11.0",
+    "glsl-template-loader": "git+https://github.com/jsio-private/glsl-template-loader#ac20d0e2d88d2e231d2ea4c271e56205b8ea437f",
     "html-webpack-plugin": "^2.22.0",
     "json-loader": "^0.5.4",
     "raf": "^3.1.0",

diff --git a/webpack.config.js b/webpack.config.js
@@ -44,8 +44,12 @@ const config = {
         }
       },
       {
-        test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.ogv$|\.mp4$|\.webm$/,
+        test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3|ogv|mp4|webm)$/,
         loader: 'file'
+      },
+      {
+        test: /\.(glsl|vert|frag)$/,
+        loader: 'glsl-template-loader'
       }
     ]
   },