Post effects

package.json

@@ -113,6 +113,7 @@
     "normalize.css": "^8.0.1",
     "pdfjs-dist": "^2.14.305",
     "phoenix": "github:gfodor/phoenix-js#master",
+    "postprocessing": "^6.28.7",
     "prop-types": "^15.7.2",
     "raven-js": "^3.20.1",
     "react": "^16.13.1",

src/app.ts

@@ -10,6 +10,7 @@ import type { AElement, AScene } from "aframe";
 import HubChannel from "./utils/hub-channel";
 import MediaDevicesManager from "./utils/media-devices-manager";
 
+import { EffectComposer, EffectPass } from "postprocessing";
 import {
   Audio,
   AudioListener,
@@ -21,6 +22,7 @@ import {
   WebGLRenderer
 } from "three";
 import { AudioSettings, SourceType } from "./components/audio-params";
+import { createEffectsComposer } from "./effects";
 import { DialogAdapter } from "./naf-dialog-adapter";
 import { mainTick } from "./systems/hubs-systems";
 import { waitForPreloads } from "./utils/preload";
@@ -87,6 +89,12 @@ export class App {
     CURSOR: 3
   };
 
+  fx: {
+    composer?: EffectComposer;
+    bloomAndTonemapPass?: EffectPass;
+    tonemapOnlyPass?: EffectPass;
+  } = {};
+
   constructor() {
     // TODO: Create accessor / update methods for these maps / set
     this.world.eid2obj = new Map();
@@ -142,20 +150,20 @@ export class App {
       event.preventDefault();
     });
 
+    const enablePostEffects = this.store.state.preferences.enablePostEffects;
+
     const renderer = new WebGLRenderer({
-      // TODO we should not be using alpha: false https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_alphafalse_which_can_be_expensive
       alpha: true,
-      antialias: true,
-      depth: true,
-      stencil: true,
-      premultipliedAlpha: true,
-      preserveDrawingBuffer: false,
-      logarithmicDepthBuffer: false,
-      // TODO we probably want high-performance
+      antialias: !enablePostEffects,
+      depth: !enablePostEffects,
+      stencil: false,
       powerPreference: "high-performance",
       canvas
     });
 
+    // We manually handle resetting this in mainTick so that stats are correctly reported with post effects enabled
+    renderer.info.autoReset = false;
+
     renderer.setPixelRatio(window.devicePixelRatio);
 
     renderer.debug.checkShaderErrors = qsTruthy("checkShaderErrors");
@@ -166,7 +174,7 @@ export class App {
 
     sceneEl.appendChild(renderer.domElement);
 
-    const camera = new PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.05, 10000);
+    const camera = new PerspectiveCamera(80, canvas.width / canvas.height, 0.05, 10000);
 
     const audioListener = new AudioListener();
     this.audioListener = audioListener;
@@ -179,13 +187,25 @@ export class App {
     };
 
     this.world.scene = sceneEl.object3D;
+    const scene = sceneEl.object3D;
+
+    // We manually call scene.updateMatrixWolrd in mainTick
+    scene.autoUpdate = false;
+
+    if (enablePostEffects) {
+      this.fx = createEffectsComposer(canvas, renderer, camera, scene, sceneEl, this.store);
+    } else {
+      (sceneEl as any).addEventListener("rendererresize", function ({ detail }: { detail: DOMRectReadOnly }) {
+        renderer.setSize(detail.width, detail.height, true);
+      });
+    }
 
     // This gets called after all system and component init functions
     sceneEl.addEventListener("loaded", () => {
       waitForPreloads().then(() => {
         this.world.time.elapsed = performance.now();
         renderer.setAnimationLoop(function (_rafTime, xrFrame) {
-          mainTick(xrFrame, renderer, sceneEl.object3D, camera);
+          mainTick(xrFrame, renderer, scene, camera);
         });
         sceneEl.renderStarted = true;
       });

src/assets/stylesheets/preferences-screen.scss

@@ -20,6 +20,7 @@ $semi-bold: 600;
   display: flex;
   flex-flow: column;
   align-items: center;
+  padding-bottom: 16px;
 
   input[type='number'] {
     -moz-appearance:textfield;

src/bit-systems/camera-tool.js

@@ -168,6 +168,7 @@ function updateRenderTarget(world, camera) {
 
   const tmpRenderTarget = renderer.getRenderTarget();
   renderer.setRenderTarget(renderTarget);
+  renderer.clearDepth();
   renderer.render(sceneEl.object3D, world.eid2obj.get(CameraTool.cameraRef[camera]));
   renderer.setRenderTarget(tmpRenderTarget);
 
@@ -290,9 +291,7 @@ export function cameraToolSystem(world) {
       format: THREE.RGBAFormat,
       minFilter: THREE.LinearFilter,
       magFilter: THREE.NearestFilter,
-      encoding: THREE.sRGBEncoding,
-      depth: false,
-      stencil: false
+      encoding: THREE.sRGBEncoding
     });
     renderTarget.lastUpdated = 0;
     renderTarget.needsUpdate = true;

src/camera-layers.ts

@@ -0,0 +1,17 @@
+// NOTE when changing be sure to check hardcoded mask values in hub.html
+export enum Layers {
+  // These 3 layers are hardcoded in THREE
+  CAMERA_LAYER_DEFAULT,
+  CAMERA_LAYER_XR_LEFT_EYE,
+  CAMERA_LAYER_XR_RIGHT_EYE,
+
+  CAMERA_LAYER_REFLECTION,
+  CAMERA_LAYER_INSPECT,
+  CAMERA_LAYER_VIDEO_TEXTURE_TARGET,
+
+  CAMERA_LAYER_THIRD_PERSON_ONLY,
+  CAMERA_LAYER_FIRST_PERSON_ONLY,
+
+  CAMERA_LAYER_UI,
+  CAMERA_LAYER_FX_MASK
+}

src/components/cursor-controller.js

@@ -11,7 +11,7 @@ import {
 import { paths } from "../systems/userinput/paths";
 import { sets } from "../systems/userinput/sets";
 import { getLastWorldPosition } from "../utils/three-utils";
-import { Layers } from "./layers";
+import { Layers } from "../camera-layers";
 
 export function findRemoteHoverTarget(world, object3D) {
   if (!object3D) return null;
@@ -99,6 +99,7 @@ AFRAME.registerComponent("cursor-controller", {
     this.cursorVisual.renderOrder = window.APP.RENDER_ORDER.CURSOR;
     this.cursorVisual.material.transparent = true;
     this.cursorVisual.layers.set(Layers.CAMERA_LAYER_UI);
+    this.cursorVisual.layers.enable(Layers.CAMERA_LAYER_FX_MASK);
     this.data.cursor.object3D.add(this.cursorVisual);
 
     this.intersection = null;

src/components/layers.js

@@ -1,18 +1,4 @@
-// NOTE when changing be sure to check hardcoded mask values in hub.html
-export const Layers = {
-  // These 3 layers are hardcoded in THREE
-  CAMERA_LAYER_DEFAULT: 0,
-  CAMERA_LAYER_XR_LEFT_EYE: 1,
-  CAMERA_LAYER_XR_RIGHT_EYE: 2,
-
-  CAMERA_LAYER_REFLECTION: 3,
-  CAMERA_LAYER_INSPECT: 4,
-  CAMERA_LAYER_VIDEO_TEXTURE_TARGET: 5,
-
-  CAMERA_LAYER_THIRD_PERSON_ONLY: 6,
-  CAMERA_LAYER_FIRST_PERSON_ONLY: 7,
-  CAMERA_LAYER_UI: 8
-};
+import { Layers } from "../camera-layers";
 
 /**
  * Sets layer flags on the underlying Object3D

src/components/media-image.js

@@ -5,6 +5,7 @@ import { errorTexture } from "../utils/error-texture";
 import { createPlaneBufferGeometry } from "../utils/three-utils";
 import { scaleToAspectRatio } from "../utils/scale-to-aspect-ratio";
 import { createGIFTexture } from "../utils/gif-texture";
+import { Layers } from "../camera-layers";
 
 const textureCache = new TextureCache();
 const inflightTextures = new Map();
@@ -129,6 +130,7 @@ AFRAME.registerComponent("media-image", {
       }
 
       this.mesh = new THREE.Mesh(geometry, material);
+      this.mesh.layers.set(Layers.CAMERA_LAYER_FX_MASK);
       this.el.setObject3D("mesh", this.mesh);
     }
 

src/components/media-video.js

@@ -1,4 +1,3 @@
-/* global performance THREE AFRAME NAF MediaStream setTimeout */
 import configs from "../utils/configs";
 import audioIcon from "../assets/images/audio.png";
 import { paths } from "../systems/userinput/paths";
@@ -21,7 +20,7 @@ import { errorTexture } from "../utils/error-texture";
 import { scaleToAspectRatio } from "../utils/scale-to-aspect-ratio";
 import { isSafari } from "../utils/detect-safari";
 import { isIOS as detectIOS } from "../utils/is-mobile";
-
+import { Layers } from "../camera-layers";
 import qsTruthy from "../utils/qs_truthy";
 
 const ONCE_TRUE = { once: true };
@@ -478,6 +477,7 @@ AFRAME.registerComponent("media-video", {
       }
 
       this.mesh = new THREE.Mesh(geometry, material);
+      this.mesh.layers.set(Layers.CAMERA_LAYER_FX_MASK);
       this.el.setObject3D("mesh", this.mesh);
     }
 

src/components/mirror.js

@@ -4,7 +4,7 @@ const DEFAULT_MIRROR_GEOMETRY = new THREE.PlaneBufferGeometry();
 const DEFAULT_TEXTURE_WIDTH = window.innerWidth * window.devicePixelRatio;
 const DEFAULT_TEXTURE_HEIGHT = window.innerHeight * window.devicePixelRatio;
 
-import { Layers } from "./layers";
+import { Layers } from "../camera-layers";
 
 /**
  * Should need to entity that has geometry primitive

src/components/player-info.js

@@ -4,7 +4,7 @@ import { registerComponentInstance, deregisterComponentInstance } from "../utils
 import defaultAvatar from "../assets/models/DefaultAvatar.glb";
 import { MediaDevicesEvents } from "../utils/media-devices-utils";
 import { createHeadlessModelForSkinnedMesh } from "../utils/three-utils";
-import { Layers } from "./layers";
+import { Layers } from "../camera-layers";
 
 function ensureAvatarNodes(json) {
   const { nodes } = json;
@@ -75,7 +75,7 @@ AFRAME.registerComponent("player-info", {
     const modelEl = this.el.querySelector(".model");
     if (this.isLocalPlayerInfo && e.target === modelEl) {
       let isSkinnedAvatar = false;
-      modelEl.object3D.traverse(function(o) {
+      modelEl.object3D.traverse(function (o) {
         if (o.isSkinnedMesh) {
           const headlessMesh = createHeadlessModelForSkinnedMesh(o);
           if (headlessMesh) {
@@ -87,7 +87,7 @@ AFRAME.registerComponent("player-info", {
       // This is to support using arbitrary models as avatars.
       // TODO We can drop support for this when we go full VRM, or at least handle it earlier in the process.
       if (!isSkinnedAvatar) {
-        modelEl.object3D.traverse(function(o) {
+        modelEl.object3D.traverse(function (o) {
           if (o.isMesh) o.layers.set(Layers.CAMERA_LAYER_THIRD_PERSON_ONLY);
         });
       }

src/components/video-texture-target.js

@@ -1,7 +1,7 @@
 import { disposeTexture } from "../utils/material-utils";
 import { createVideoOrAudioEl } from "../utils/media-utils";
 import { findNode } from "../utils/three-utils";
-import { Layers } from "./layers";
+import { Layers } from "../camera-layers";
 
 /**
  * @component video-texture-source
@@ -35,9 +35,7 @@ AFRAME.registerComponent("video-texture-source", {
       format: THREE.RGBAFormat,
       minFilter: THREE.LinearFilter,
       magFilter: THREE.NearestFilter,
-      encoding: THREE.sRGBEncoding,
-      depth: false,
-      stencil: false
+      encoding: THREE.sRGBEncoding
     });
 
     const texture = this.renderTarget.texture;
@@ -78,6 +76,7 @@ AFRAME.registerComponent("video-texture-source", {
     sceneEl.object3D.autoUpdate = false;
 
     renderer.setRenderTarget(this.renderTarget);
+    renderer.clearDepth();
     renderer.render(sceneEl.object3D, this.camera);
     renderer.setRenderTarget(null);
 

src/components/water.js

@@ -1,4 +1,4 @@
-import { Layers } from "./layers";
+import { Layers } from "../camera-layers";
 import "../vendor/Water";
 import waterNormalMap from "../assets/waternormals.jpg";
 import HubsTextureLoader from "../loaders/HubsTextureLoader";