:chick: initial commit

.eslintignore

@@ -0,0 +1 @@
+public/

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": "airbnb/base",
+
+  "globals": {
+    "app": true,
+    "dat": true,
+    "THREE": true,
+    "WAGNER": true
+  },
+  "rules": {}
+}

.gitignore

@@ -0,0 +1,32 @@
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+.cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+
+# NPM packages folder.
+node_modules/
+
+# Brunch folder for temporary files.
+tmp/
+
+# Brunch output folder.
+public/
+
+# Bower stuff.
+bower_components/

.vscode/settings.json

@@ -0,0 +1,61 @@
+{
+  "search.exclude": {
+    "# Numerous always-ignore extensions": true,
+    "*.diff": true,
+    "*.err": true,
+    "*.orig": true,
+    "*.log": true,
+    "*.rej": true,
+    "*.swo": true,
+    "*.swp": true,
+    "*.vi": true,
+    "*~": true,
+    "*.sass-cache": true,
+    "# OS or Editor folders": true,
+    ".DS_Store": true,
+    ".cache": true,
+    ".project": true,
+    ".settings": true,
+    ".tmproj": true,
+    "nbproject": true,
+    "Thumbs.db": true,
+    "# NPM packages folder.": true,
+    "node_modules/": true,
+    "# Brunch folder for temporary files.": true,
+    "tmp/": true,
+    "# Brunch output folder.": true,
+    "public/": true,
+    "# Bower stuff.": true,
+    "bower_components/": true
+  },
+  "files.exclude": {
+    "# Numerous always-ignore extensions": true,
+    "*.diff": true,
+    "*.err": true,
+    "*.orig": true,
+    "*.log": true,
+    "*.rej": true,
+    "*.swo": true,
+    "*.swp": true,
+    "*.vi": true,
+    "*~": true,
+    "*.sass-cache": true,
+    "# OS or Editor folders": true,
+    ".DS_Store": true,
+    ".cache": true,
+    ".project": true,
+    ".settings": true,
+    ".tmproj": true,
+    "nbproject": true,
+    "Thumbs.db": true,
+    "# NPM packages folder.": true,
+    "node_modules/": true,
+    "# Brunch folder for temporary files.": true,
+    "tmp/": true,
+    "# Brunch output folder.": true,
+    "public/": true,
+    "# Bower stuff.": true,
+    "bower_components/": true
+  },
+  "eslint.enable": false
+}

README.md

@@ -0,0 +1,53 @@
+# Brunch app
+
+
+This is brunch skeleton for starting a project in **WebGL** with [Three.js](http://threejs.org/),  [ES2015](http://es6-features.org) and [WAGNER](https://github.com/spite/Wagner).
+
+
+## Getting started
+
+* Install (if you don't have them):
+  * [Node.js](http://nodejs.org): `brew install node` on OS X
+  * [Brunch](http://brunch.io): `npm install -g brunch`
+* Create a new project :
+  * Deploy with brunch :
+    * `brunch new myapp --skeleton https://github.com/Jeremboo/brunch-threejs-es6` - create new project
+  * Or use git to clone the brunch-threejs-es6 repository :
+    * `git clone https://github.com/Jeremboo/brunch-threejs-es6`
+* Download dependencies :
+    * `npm run deploy` or `npm install && npm start`
+
+
+## How to use
+
+* `npm start` or `brunch watch --server` to watch the project with continuous rebuild.
+* `npm run prod` or `brunch build --production` to build minified project for production.
+
+
+## More
+
+* **Like brunch basic skeleton :**
+  * `public/` dir is fully auto-generated and served by HTTP server.  Write your code in `app/` dir.
+  * Place static files you want to be copied from `app/assets/` to `public/`.
+
+* **Specific to this skeleton :**
+
+  * You can use this dir `/app/js/components/` for placed your THREE.object3D components. For my part, I create one component for each 3D objet. There is an example of object 3D in this dir (`Example.js`) for showing you how can you create a THREE.object3D with ES6.
+
+  * `/app/js/shaders` contains each fragments and vertices `.glsl` files. If you need to use a couple of `.glsl` file for build a `ShaderMaterial`, you just need to import this files. Look at `Example.js` for more details.
+
+  * This directory `/app/js/core/` contain the classes of setting :
+      * `Webgl.js` initializes the 3D scene and the camera.
+      * `Loop.js` allows to manage the frame animation for each update of 3Dobjects.
+      * `props.js` is a file who contains all variables of settings who can be use in all other file. It's specially created for be used by [dat.gui](https://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)
+
+  * `/app/js/main.js` allows to show you how all of this files are using for create and animate a 3D object.
+
+  * I also added [WAGNER](https://github.com/spite/Wagner) for have a choice of post processing already available.
+
+
+## Thanks to
+
+   - [Valentin Daguenet](http://vdaguenet.fr/) and his repository [Threejs-starter-kit](https://github.com/vdaguenet/threejs-starter-kit).
+
+   - [Florian Zumbrunn](http://www.floz.fr/) for his starter kit during his Three.js workshop at Gobelins, l'école de l'image.

app/assets/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Brunch - Three.js - es6</title>
+  <link rel="stylesheet" href="app.css">
+</head>
+<body>
+  <script type="text/javascript" src="app.js"></script>
+  <script>require('main')</script>
+</body>
+</html>

app/js/components/Example.js

@@ -0,0 +1,46 @@
+import props from 'js/core/props';
+
+import exampleVert from '../shaders/example-vert';
+import exampleFrag from '../shaders/example-frag';
+
+class Example extends THREE.Object3D {
+  constructor() {
+    super();
+
+    // ##
+    // INIT
+    // const exampleMaterial = new THREE.MeshLambertMaterial({
+    //   color: 0xdddddd,
+    //   shading: THREE.FlatShading,
+    // });
+    const exampleShaderMaterial = new THREE.ShaderMaterial({
+      uniforms: {
+        color: {
+          type: 'v4',
+          value: new THREE.Vector4(0.9, 0.715, 0.072, 1) },
+      },
+      vertexShader: exampleVert,
+      fragmentShader: exampleFrag,
+      wireframe: true,
+    });
+    // - object
+    const exampleGeometry = new THREE.BoxGeometry(1, 1, 1);
+    // - CREATE MESH
+    this.exampleMesh = new THREE.Mesh(exampleGeometry, exampleShaderMaterial);
+
+    // ##
+    // ADD TO EXAMPLE OBJECT
+    this.add(this.exampleMesh);
+
+    // ##
+    // SAVE BINDING
+    this.onUpdate = this.onUpdate.bind(this);
+  }
+
+  onUpdate() {
+    this.rotation.x += props.rotation;
+    this.rotation.y += props.rotation;
+  }
+}
+
+module.exports = Example;

app/js/core/Loop.js

@@ -0,0 +1,52 @@
+class Loop {
+
+  constructor() {
+    this._idRAF = -1;
+    this._count = 0;
+
+    this._listeners = [];
+
+    this._binds = {};
+    this._binds.update = this._update.bind(this);
+  }
+
+  _update() {
+    let listener = null;
+    let i = this._count;
+    while (--i >= 0) {
+      listener = this._listeners[i];
+      if (listener) {
+        listener.apply(this, null);
+      }
+    }
+    this._idRAF = requestAnimationFrame(this._binds.update);
+  }
+
+  start() {
+    this._update();
+  }
+
+  stop() {
+    cancelAnimationFrame(this._idRAF);
+  }
+
+  add(listener) {
+    const idx = this._listeners.indexOf(listener);
+    if (idx >= 0) {
+      return;
+    }
+    this._listeners.push(listener);
+    this._count++;
+  }
+
+  remove(listener) {
+    const idx = this._listeners.indexOf(listener);
+    if (idx < 0) {
+      return;
+    }
+    this._listeners.splice(idx, 1);
+    this._count--;
+  }
+}
+
+module.exports = new Loop();

app/js/core/Webgl.js

@@ -0,0 +1,61 @@
+export default class Webgl {
+  constructor(w, h) {
+    this.scene = new THREE.Scene();
+
+    this.camera = new THREE.PerspectiveCamera(50, w / h, 1, 1000);
+    this.camera.position.z = 10;
+
+    this._renderer = new THREE.WebGLRenderer({
+      antialias: true,
+    });
+    this._renderer.setPixelRatio(window.devicePixelRatio);
+    this._renderer.setClearColor(0x0c171a);
+    this.dom = this._renderer.domElement;
+
+    this.usePostprocessing = false;
+    this._composer = false;
+    this._passes = {};
+    this.initPostprocessing();
+    this.onResize(w, h);
+
+    this.onUpdate = this.onUpdate.bind(this);
+    this.onResize = this.onResize.bind(this);
+  }
+
+  initPostprocessing() {
+    if (!this.usePostprocessing) return;
+    // TODO add WAGNER
+    this._composer = new WAGNER.Composer(this._renderer);
+    this._composer.setSize(this.width, this.height);
+    this._passes.vignettePass = new WAGNER.VignettePass();
+    this._passes.fxaaPass = new WAGNER.FXAAPass();
+  }
+
+  add(mesh) {
+    this.scene.add(mesh);
+  }
+
+  onUpdate() {
+    if (this.usePostprocessing) {
+      this._composer.reset();
+      this._composer.renderer.clear();
+      this._composer.render(this.scene, this.camera);
+      // TODO loop to passes
+      this._composer.pass(this._passes.fxaaPass);
+      this._composer.pass(this._passes.vignettePass);
+      this._composer.toScreen();
+    } else {
+      this._renderer.render(this.scene, this.camera);
+    }
+  }
+
+  onResize(w, h) {
+    this.width = w;
+    this.height = h;
+
+    this.camera.aspect = w / h;
+    this.camera.updateProjectionMatrix();
+
+    this._renderer.setSize(w, h);
+  }
+}

app/js/core/props.js

@@ -0,0 +1,5 @@
+const props = {
+  rotation: 0.05,
+};
+
+module.exports = props;

app/js/shaders/example-frag.glsl

@@ -0,0 +1,5 @@
+uniform vec4 color;
+
+void main() {
+  gl_FragColor = color;
+}

app/js/shaders/example-vert.glsl

@@ -0,0 +1,5 @@
+void main() {
+  gl_Position = projectionMatrix *
+                modelViewMatrix *
+                vec4(position, 1.0);
+}

app/main.js

@@ -0,0 +1,47 @@
+import Webgl from 'js/core/Webgl';
+import loop from 'js/core/Loop';
+import props from 'js/core/props';
+import Example from 'js/components/Example';
+
+
+// ##
+// INIT
+const webgl = new Webgl(window.innerWidth, window.innerHeight);
+document.body.appendChild(webgl.dom);
+// - Add object update to loop
+loop.add(webgl.onUpdate);
+
+// ##
+// GUI
+const gui = new dat.GUI();
+gui.add(props, 'rotation', 0.01, 1);
+gui.close();
+
+// ##
+// EXAMPLE LIGHT
+const light = new THREE.DirectionalLight(0xffffff, 0.5);
+light.position.set(1, 1, 1);
+webgl.add(light);
+
+// ##
+// EXAMPLE BOX
+const example = new Example();
+webgl.add(example);
+loop.add(example.onUpdate);
+
+// ##
+// RENDERER
+loop.start();
+
+
+// ##
+// ON RESIZE / ORIENTATION CHANGE
+function onResize() {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+
+  webgl.onResize(w, h);
+}
+
+window.addEventListener('resize', onResize);
+window.addEventListener('orientationchange', onResize);

app/style.css

@@ -0,0 +1,12 @@
+html, body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height : 100%;
+  color: #f3f3f4;
+}
+
+canvas {
+  position: absolute;
+}

brunch-config.coffee

@@ -0,0 +1,13 @@
+exports.config =
+  # See http://brunch.io/#documentation for docs.
+  files:
+    javascripts:
+      joinTo: 'app.js'
+    stylesheets:
+      joinTo: 'app.css'
+    templates:
+      joinTo: 'app.js'
+  npm:
+    globals:
+      THREE: 'three'
+      dat: 'dat-gui'

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "brunch-threejs-es6",
+  "description": "Brunch skeleton for beginning a three.js project.",
+  "author": "Jérémie Boulay",
+  "version": "1.2.1",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jeremboo/brunch-threejs-es6"
+  },
+  "scripts": {
+    "start": "brunch watch --server",
+    "deploy": "npm install && npm start",
+    "prod": "rm -r public/ && brunch build --production"
+  },
+  "dependencies": {
+    "dat-gui": "^0.5.0",
+    "three": "^0.81.0"
+  },
+  "devDependencies": {
+    "auto-reload-brunch": "^2.7.1",
+    "babel-brunch": "^6.0.4",
+    "brunch": "^2.8.2",
+    "clean-css-brunch": "^2.0.0",
+    "css-brunch": "^2.6.1",
+    "eslint": "^3.4.0",
+    "eslint-config-airbnb": "^10.0.1",
+    "eslint-plugin-import": "^1.14.0",
+    "eslint-plugin-jsx-a11y": "^2.2.0",
+    "eslint-plugin-react": "^6.2.0",
+    "glslify-brunch": "^1.0.0",
+    "javascript-brunch": "^2.0.0",
+    "jsx-ast-utils": "^1.3.1",
+    "uglify-js-brunch": "^2.0.1"
+  }
+}