Added postprocessing depth-of-field example. Added stats and dat.gui …

…to dependencies because I am using them in examples.

example/web_gl_postprocessing/postprocessing.dart

@@ -1,11 +1,16 @@
-import 'dart:math'  show Random;
+import 'dart:math' show Random;
 import 'dart:html' show window, document;
 import 'package:three/three.dart';
 import 'package:three/extras/shaders/shaders.dart';
 import 'package:three/extras/postprocessing/postprocessing.dart';
+import 'package:stats/stats.dart';
+
+const double DOT_SCALE = 2.0;
+const double RGB_SHIFT_AMOUNT = 0.009;
 
 EffectComposer composer;
 Object3D spheres;
+Stats stats;
 
 void main() {
   init();
@@ -55,15 +60,18 @@ void init() {
 
   ShaderPass effect1 =
       new ShaderPass(new ShaderProgram.fromThreeish(DotScreenShader));
-  effect1.uniforms['scale'].value = 2.0;
+  effect1.uniforms['scale'].value = DOT_SCALE;
   composer.addPass(effect1);
 
   ShaderPass effect2 =
       new ShaderPass(new ShaderProgram.fromThreeish(RGBShiftShader));
-  effect2.uniforms['amount'].value = 0.01;
+  effect2.uniforms['amount'].value = RGB_SHIFT_AMOUNT;
   effect2.renderToScreen = true;
   composer.addPass(effect2);
 
+  stats = new Stats();
+  document.body.append(stats.container);
+
   window.onResize.listen((event) {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
@@ -73,9 +81,11 @@ void init() {
 
 double oldTime = 0.0;
 void animate(double time) {
-  window.requestAnimationFrame(animate);
+  stats.begin();
   spheres.rotation.x += 0.005;
   spheres.rotation.y += 0.01;
   composer.render(time - oldTime);
   oldTime = time;
+  stats.end();
+  window.requestAnimationFrame(animate);
 }

example/web_gl_postprocessing/postprocessing.html

@@ -13,6 +13,12 @@
         background-color: #000000;
         overflow: hidden;
       }
+      #stats {
+        z-index: 9999;
+        position:absolute;
+        top: 0px;
+        left: 0px;
+      }
     </style>
   </head>
 

example/web_gl_postprocessing_dof/depth_of_field.dart

@@ -0,0 +1,185 @@
+/*
+ * Ported to Dart from JS by
+ * @author Christopher Grabowski / https://github.com/cgrabowski
+ */
+
+import 'dart:html';
+import 'package:three/three.dart';
+import 'package:three/extras/postprocessing/postprocessing.dart';
+import 'package:three/extras/image_utils.dart' as ImageUtils;
+import 'package:datgui/datgui.dart' as dat;
+import 'package:stats/stats.dart';
+
+const int GRID_M = 14;
+const int GRID_N = 9;
+const int GRID_P = 14;
+const int NO_OBJECTS = GRID_M * GRID_N * GRID_P;
+const int GRID_SPACING = 200;
+const double SPHERE_SCALE = 60.0;
+const int SPHERE_PARALLELS = 10;
+const int SPHERE_MERIDIANS = 20;
+const double FOCUS = 1.0;
+const double APERTURE = 0.025;
+const double MAX_BLUR = 1.0;
+
+WebGLRenderer renderer;
+Scene scene;
+PerspectiveCamera camera;
+Object3D container;
+List<Material> materials;
+EffectComposer composer;
+BokehPass bokehPass;
+Stats stats;
+
+int winWidth = window.innerWidth;
+int winHeight = window.innerHeight;
+int winHalfWidth = winWidth ~/ 2;
+int winHalfHeight = winHeight ~/ 2;
+int mouseX = 0;
+int mouseY = 0;
+
+void main() {
+  init();
+  animate(0.0);
+}
+
+void init() {
+  renderer = new WebGLRenderer(antialias: false)
+      ..setSize(winWidth, winHeight)
+      ..sortObjects = false;
+  document.body.append(renderer.domElement);
+  camera = new PerspectiveCamera(70.0, winWidth / winHeight, 1.0, 3000.0)
+      ..position.z = 200.0;
+  container = new Object3D();
+  scene = new Scene();
+
+  Texture cubeTexture = ImageUtils.loadTextureCube(
+      ['px', 'nx', 'py', 'ny', 'pz', 'nz']
+          .map((halfaxis) => "textures/" + halfaxis + ".jpg").toList());
+
+  SphereGeometry geometry =
+      new SphereGeometry(1.0, SPHERE_MERIDIANS, SPHERE_PARALLELS);
+
+  materials = new List<Material>();
+
+  for (int m = 0; m < GRID_M; ++m) //
+  for (int n = 0; n < GRID_N; ++n) //
+  for (int p = 0; p < GRID_P; ++p) {
+
+    MeshBasicMaterial material = new MeshBasicMaterial(
+        color: 0xff1100,
+        envMap: cubeTexture,
+        shading: FlatShading);
+    materials.add(material);
+    Mesh mesh = new Mesh(geometry, material);
+
+    double x = GRID_SPACING * (m - GRID_M / 2);
+    double y = GRID_SPACING * (n - GRID_N / 2);
+    double z = GRID_SPACING * (p - GRID_P / 2);
+
+    mesh.position.setValues(x, y, z);
+    mesh.scale.splat(SPHERE_SCALE);
+    mesh.matrixAutoUpdate = false;
+    mesh.updateMatrix();
+    container.add(mesh);
+    scene.add(mesh);
+  }
+
+  scene.matrixAutoUpdate = false;
+  renderer.autoClear = false;
+
+  composer = new EffectComposer(renderer)
+      ..addPass(new RenderPass(scene, camera));
+
+  bokehPass = new BokehPass(scene, camera,
+      focus: FOCUS,
+      aperture: APERTURE,
+      maxblur: MAX_BLUR,
+      width: winWidth,
+      height: winHeight)
+      ..renderToScreen = true;
+  composer.addPass(bokehPass);
+
+  window.onResize.listen(onWindowResize);
+  window.onMouseMove.listen(onMouseMove);
+  window.onTouchStart.listen(onTouchStart);
+  window.onTouchMove.listen(onTouchMove);
+
+  dat.GUI gui = new dat.GUI();
+  gui.add(effectController, "focus", 0.0, 3.0).onChange(matChanger);
+  gui.add(effectController, "aperture", 0.001, 0.2).onChange(matChanger);
+  gui.add(effectController, "maxblur", 0.0, 3.0).onChange(matChanger);
+  gui.close();
+
+  stats = new Stats();
+  document.body.append(stats.container);
+}
+
+var effectController = {
+  'focus': 1.0,
+  'aperture': 0.025,
+  'maxblur': 1.0
+};
+
+void matChanger(var value) {
+  bokehPass.uniforms['focus'].value = effectController['focus'];
+  bokehPass.uniforms['aperture'].value = effectController['aperture'];
+  bokehPass.uniforms['maxblur'].value = effectController['maxblur'];
+}
+
+double oldTime = 0.0;
+
+void render(double time) {
+  camera.position.x += (mouseX - camera.position.x) * 0.036;
+  camera.position.y += (-mouseY - camera.position.y) * 0.036;
+  camera.lookAt(scene.position);
+
+  for (int i = 0; i < NO_OBJECTS; ++i) {
+    double h = (360 * (i / NO_OBJECTS + time * 0.00005) % 360) / 360;
+    materials[i].color.setHSL(h, 1.0, 0.5);
+  }
+
+  composer.render(0.1);
+
+  oldTime = time;
+}
+
+void animate(double time) {
+  stats.begin();
+  render(time);
+  stats.end();
+  window.requestAnimationFrame(animate);
+}
+
+void onMouseMove(MouseEvent event) {
+  mouseX = event.client.x - winHalfWidth;
+  mouseY = event.client.y - winHalfHeight;
+}
+
+onTouchStart(TouchEvent event) {
+  if (event.touches.length == 1) {
+    event.preventDefault();
+    mouseX = event.touches.first.page.x - winHalfWidth;
+    mouseY = event.touches.first.page.y - winHalfHeight;
+  }
+}
+
+onTouchMove(TouchEvent event) {
+  if (event.touches.length == 1) {
+    event.preventDefault();
+    mouseX = event.touches.first.page.x - winHalfWidth;
+    mouseY = event.touches.first.page.y - winHalfHeight;
+  }
+}
+
+void onWindowResize(Event event) {
+  winWidth = window.innerWidth;
+  winHeight = window.innerHeight;
+  winHalfWidth = winWidth ~/ winWidth;
+  winHalfHeight = winHeight ~/ winHeight;
+
+  camera.aspect = winWidth / winHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(winWidth, winHeight);
+  composer.reset(null, winWidth, winHeight);
+}

example/web_gl_postprocessing_dof/depth_of_field.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+  	<meta charset="utf-8">
+  	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Three.dart WebGL Postprocessing: Depth of Field</title>
+    <style>
+      body {
+        background-color: #000000;
+        margin: 0px;
+        overflow: hidden;
+        font-family:Monospace;
+        font-size:13px;
+        text-align:center;
+        font-weight: bold;
+      }
+      #stats {
+        z-index: 9999;
+        position:absolute;
+        top: 0px;
+        left: 0px;
+      }
+    </style>
+  </head>
+  <body>
+    <script src="dat.gui.min.js"></script>
+    <script type="application/dart" src="depth_of_field.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+  </body>
+</html>

example/web_gl_postprocessing_dof/textures/readme.txt

@@ -0,0 +1,20 @@
+Author
+======
+
+This is the work of Emil Persson, aka Humus.
+http://www.humus.name
+humus@comhem.se
+
+
+
+Legal stuff
+===========
+
+This work is free and may be used by anyone for any purpose
+and may be distributed freely to anyone using any distribution
+media or distribution method as long as this file is included.
+Distribution without this file is allowed if it's distributed
+with free non-commercial software; however, fair credit of the
+original author is expected.
+Any commercial distribution of this software requires the written
+approval of Emil Persson.