add TS support for twgl deformer

js/deformers/IDeformer.ts

@@ -0,0 +1,20 @@
+interface IDeformer {
+  init (canvas: HTMLCanvasElement): void;
+
+  load (
+    canvas: HTMLCanvasElement,
+    points: Number[][],
+    tracker,
+    bgElement: HTMLElement
+  ): void;
+
+  draw (points: Number[][]): void;
+
+  setPoints (points: Number[][]): void;
+
+  setMaskTexture (element: HTMLElement): void;
+
+  getGLContext (): WebGLRenderingContext;
+}
+
+export default IDeformer;

js/deformers/twgl/Background.js → js/deformers/twgl/Background.ts

@@ -3,8 +3,19 @@ import twgl from 'twgl.js/dist/twgl';
 import createBgVert from './shaders/background.vert';
 import createBgFrag from './shaders/background.frag';
 
+import IDeformer from '../IDeformer';
+
 
 export default class Background {
+  private _deformer: IDeformer;
+
+  private _element;
+
+  private _bgBufferInfo;
+  private _bgProgramInfo;
+  private _bgTextures;
+  private _bgUniforms;
+
   constructor (deformer) {
     this._deformer = deformer;
 

js/deformers/twgl/index.js → js/deformers/twgl/index.ts

@@ -8,8 +8,31 @@ import Background from './Background';
 import createDeformVert from './shaders/deform.vert';
 import createDeformFrag from './shaders/deform.frag';
 
+import IDeformer from '../IDeformer';
+
+
+export default class Deformer implements IDeformer {
+  private _isLoaded: boolean;
+
+  private background: Background;
+  private debug: Background;
+
+  private _tracker;
+  private _gl;
+
+  private _verticeMap;
+
+  private _dynamicMaskTexture;
+  private _maskTextureSrcElement;
+  private _maskTextureCanvas;
+  private _pointBB;
+
+  private _maskTextureCoord;
+  private _maskProgramInfo;
+  private _maskTextures;
+  private _maskUniforms;
+  private _maskBufferInfo;
 
-export default class Deformer {
   constructor (params = {}) {
     twgl.setDefaults({ attribPrefix: 'a_' });
 
@@ -32,6 +55,7 @@ export default class Deformer {
     this._maskProgramInfo = null;
     this._maskTextures = null;
     this._maskUniforms = null;
+    this._maskBufferInfo = null;
   }
 
   getGLContext () {

package.json

@@ -4,8 +4,8 @@
   "description": "Javascript library for precise tracking of facial features via Constrained Local Models",
   "scripts": {
     "build": "NODE_ENV=production webpack --optimize-minimize --optimize-dedupe",
-    "watch": "webpack --debug --devtool inline-source-map --output-pathinfo --progress --colors --watch",
-    "serve": "webpack-dev-server --debug --devtool inline-source-map --output-pathinfo --inline --hot --host localhost",
+    "watch": "webpack --debug --devtool eval-source-map --output-pathinfo --progress --colors --watch",
+    "serve": "webpack-dev-server --debug --devtool eval-source-map --output-pathinfo --inline --hot --host localhost",
     "clean": "rm -rf dist",
     "postinstall": "npm run build",
     "publish": "./publish.sh",
@@ -32,7 +32,9 @@
     "raf": "^3.1.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^2.3.1",
+    "ts-loader": "^0.8.2",
     "twgl.js": "^1.9.0",
+    "typescript": "^1.8.10",
     "uglify": "^0.1.5",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1",

tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "sourceMap": true,
+    "removeComments": false
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

webpack.config.js

@@ -22,7 +22,8 @@ const config = {
     alias: {
       'clmtrackr': path.resolve(__dirname),
       'stats.js': path.resolve(__dirname, 'lib', 'stats.js')
-    }
+    },
+    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
   },
   module: {
     loaders: [
@@ -34,6 +35,11 @@ const config = {
         test: /\.worker\.js$/,
         loader: 'worker-loader?inline=true'
       },
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader?presets[]=es2015&presets[]=react!ts-loader?ignoreDiagnostics[]=2307'
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',