:chick: initial commit

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);
+}