Post processing

packages/model-viewer/package.json

@@ -73,8 +73,9 @@
     "3d"
   ],
   "dependencies": {
-    "three": "^0.146.0",
-    "lit": "^2.2.3"
+    "lit": "^2.2.3",
+    "postprocessing": "^6.29.1",
+    "three": "^0.146.0"
   },
   "devDependencies": {
     "@open-wc/karma-esm": "^4.0.0",

packages/model-viewer/src/features/post-processing.ts

@@ -0,0 +1,61 @@
+/* @license
+ * Copyright 2019 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { property } from 'lit/decorators.js';
+import { EffectPass } from 'postprocessing';
+
+import ModelViewerElementBase, { $needsRender } from '../model-viewer-base.js';
+import { BLOOM_PASS, FXAA_PASS, OUTLINE_PASS, PIXELATE_PASS, SSAO_PASS } from '../three-components/PPRenderPipeline.js';
+import { Constructor } from '../utilities.js';
+
+export declare interface PostProcessingInterface {
+  fxaaEffect: boolean
+  ssaoEffect: boolean;
+  bloomEffect: boolean;
+  pixelateEffect: boolean;
+  outlineEffect: boolean;
+}
+
+export const EffectMap = new Map<string, EffectPass>([
+  ['fxaaEffect', FXAA_PASS],
+  ['ssaoEffect', SSAO_PASS],
+  ['bloomEffect', BLOOM_PASS],
+  ['outlineEffect', OUTLINE_PASS],
+  ['pixelateEffect', PIXELATE_PASS],
+]);
+
+export const PostProcessingMixin = <T extends Constructor<ModelViewerElementBase>>(
+    ModelViewerElement: T): Constructor<PostProcessingInterface>&T => {
+  class PostProcessingModelViewerElement extends ModelViewerElement {
+    @property({type: Boolean, attribute: 'fxaa-effect'})
+    fxaaEffect: boolean = false;
+    @property({type: Boolean, attribute: 'ssao-effect'})
+    ssaoEffect: boolean = false;
+    @property({type: Boolean, attribute: 'bloom-effect'})
+    bloomEffect: boolean = false;
+    @property({type: Boolean, attribute: 'pixelate-effect'})
+    pixelateEffect: boolean = false;
+    @property({type: Boolean, attribute: 'outline-effect'})
+    outlineEffect: boolean = false;
+
+    updated(changedProperties: Map<string|number|symbol, unknown>) {
+      super.updated(changedProperties);
+      // TODO: check if any of the properties were updated, then re-render
+      this[$needsRender]()
+    }
+  }
+
+  return PostProcessingModelViewerElement;
+};

packages/model-viewer/src/model-viewer.ts

@@ -23,14 +23,15 @@ import {SceneGraphMixin} from './features/scene-graph.js';
 import {StagingMixin} from './features/staging.js';
 import ModelViewerElementBase from './model-viewer-base.js';
 import {FocusVisiblePolyfillMixin} from './utilities/focus-visible.js';
+import {PostProcessingMixin} from './features/post-processing.js';
 
 // Uncomment these lines to export PMREM textures in Glitch:
 // export {default as TextureUtils} from './three-components/TextureUtils';
 // export * from 'three';
 
-export const ModelViewerElement = AnnotationMixin(SceneGraphMixin(StagingMixin(
+export const ModelViewerElement = PostProcessingMixin(AnnotationMixin(SceneGraphMixin(StagingMixin(
     EnvironmentMixin(ControlsMixin(ARMixin(LoadingMixin(AnimationMixin(
-        FocusVisiblePolyfillMixin(ModelViewerElementBase)))))))));
+        FocusVisiblePolyfillMixin(ModelViewerElementBase))))))))));
 
 export type ModelViewerElement = InstanceType<typeof ModelViewerElement>;
 

packages/model-viewer/src/three-components/EnvironmentScene.ts

@@ -73,7 +73,6 @@ export default class EnvironmentScene extends Scene {
     box6.scale.set(3.875, 3.487, 2.986);
     this.add(box6);
 
-
     // -x right
     const light1 = new Mesh(geometry, this.createAreaLightMaterial(50));
     light1.position.set(-16.116, 14.37, 8.208);

packages/model-viewer/src/three-components/PPRenderPipeline.ts

@@ -0,0 +1,46 @@
+import { EffectComposer, RenderPass, EffectPass, BloomEffect, BlendFunction, KernelSize, FXAAEffect, SSAOEffect, PixelationEffect, OutlineEffect, ToneMappingEffect, ToneMappingMode } from 'postprocessing';
+import { WebGLRenderer } from 'three';
+
+export const RENDER_PASS = new RenderPass(null, null);
+
+export const FXAA_EFFECT = new FXAAEffect();
+
+export const SSAO_EFFECT = new SSAOEffect();
+
+export const BLOOM_EFFECT = new BloomEffect({
+    blendFunction: BlendFunction.ADD,
+    mipmapBlur: true,
+    luminanceThreshold: 0.85,
+    luminanceSmoothing: 0.025,
+    intensity: 3,
+    kernelSize: KernelSize.LARGE
+});
+
+export const PIXELATE_EFFECt = new PixelationEffect(6);
+
+export const OUTLINE_EFFECT = new OutlineEffect();
+// export const TONEMAPPING_EFFECT = new ToneMappingEffect({mode: ToneMappingMode.OPTIMIZED_CINEON});
+
+export const FXAA_PASS = new EffectPass(null, FXAA_EFFECT);
+export const SSAO_PASS = new EffectPass(null, SSAO_EFFECT);
+export const BLOOM_PASS = new EffectPass(null, BLOOM_EFFECT);
+export const OUTLINE_PASS = new EffectPass(null, OUTLINE_EFFECT);
+export const PIXELATE_PASS = new EffectPass(null, PIXELATE_EFFECt);
+
+FXAA_PASS.enabled = false;
+SSAO_PASS.enabled = false;
+BLOOM_PASS.enabled = false;
+OUTLINE_PASS.enabled = false;
+PIXELATE_PASS.enabled = false;
+
+export const CreateEffectComposer = (threeRenderer: WebGLRenderer) => {
+    const effectComposer = new EffectComposer(threeRenderer);
+
+    effectComposer.addPass(RENDER_PASS);
+    effectComposer.addPass(FXAA_PASS);
+    effectComposer.addPass(SSAO_PASS);
+    effectComposer.addPass(BLOOM_PASS);
+    effectComposer.addPass(OUTLINE_PASS);
+    effectComposer.addPass(PIXELATE_PASS);
+    // effectComposer.addPass(POST_PROCESSING_PIPELINE);
+};

packages/model-viewer/src/three-components/Renderer.ts

@@ -14,6 +14,7 @@
  */
 
 import {ACESFilmicToneMapping, Event, EventDispatcher, sRGBEncoding, Vector2, WebGLRenderer} from 'three';
+import { RenderPass, EffectComposer } from 'postprocessing';
 
 import {$updateEnvironment} from '../features/environment.js';
 import {ModelViewerGlobalConfig} from '../features/loading.js';
@@ -26,6 +27,8 @@ import {Debugger} from './Debugger.js';
 import {ModelViewerGLTFInstance} from './gltf-instance/ModelViewerGLTFInstance.js';
 import {ModelScene} from './ModelScene.js';
 import TextureUtils from './TextureUtils.js';
+import { CreateEffectComposer, RENDER_PASS } from './PPRenderPipeline.js';
+import { EffectMap } from '../features/post-processing.js';
 
 export interface RendererOptions {
   powerPreference: string;
@@ -92,6 +95,8 @@ export class Renderer extends EventDispatcher {
 
   public threeRenderer!: WebGLRenderer;
   public canvas3D: HTMLCanvasElement;
+  public renderPass!: RenderPass;
+  public effectComposer!: EffectComposer;
   public textureUtils: TextureUtils|null;
   public arRenderer: ARRenderer;
   public loader = new CachingGLTFLoader(ModelViewerGLTFInstance);
@@ -143,10 +148,13 @@ export class Renderer extends EventDispatcher {
         alpha: true,
         antialias: true,
         powerPreference: options.powerPreference as WebGLPowerPreference,
-        preserveDrawingBuffer: true
+        preserveDrawingBuffer: true,
+        stencil: false,
+        depth: false
       });
       this.threeRenderer.autoClear = true;
       this.threeRenderer.outputEncoding = sRGBEncoding;
+
       this.threeRenderer.physicallyCorrectLights = true;
       this.threeRenderer.setPixelRatio(1);  // handle pixel ratio externally
 
@@ -156,6 +164,9 @@ export class Renderer extends EventDispatcher {
       // ACESFilmicToneMapping appears to be the most "saturated",
       // and similar to Filament's gltf-viewer.
       this.threeRenderer.toneMapping = ACESFilmicToneMapping;
+
+	    this.effectComposer = CreateEffectComposer(this.threeRenderer);
+      this.renderPass = RENDER_PASS;
     } catch (error) {
       console.warn(error);
     }
@@ -281,6 +292,10 @@ export class Renderer extends EventDispatcher {
 
     if (this.canRender) {
       this.threeRenderer.setSize(width, height, false);
+      this.effectComposer.setSize(width, height, false);
+      this.renderPass.setSize(width, height);
+      this.effectComposer.passes[1].setSize(width, height);
+      // this.effectComposer.setSize(width, height);
     }
 
     // Each scene's canvas must match the renderer size. In general they can be
@@ -418,6 +433,14 @@ export class Renderer extends EventDispatcher {
     const exposureIsNumber =
         typeof exposure === 'number' && !Number.isNaN(exposure);
     this.threeRenderer.toneMappingExposure = exposureIsNumber ? exposure : 1.0;
+
+    for (const [effectName, pass] of EffectMap.entries()) {
+      pass.enabled = scene[effectName];
+    }
+    for (const pass of this.effectComposer.passes) {
+      pass.mainScene = scene;
+      pass.mainCamera = scene.getCamera();
+    }
   }
 
   render(t: number, frame?: XRFrame) {
@@ -491,7 +514,7 @@ export class Renderer extends EventDispatcher {
       this.threeRenderer.setRenderTarget(null);
       this.threeRenderer.setViewport(
           0, Math.ceil(this.height * this.dpr) - height, width, height);
-      this.threeRenderer.render(scene, scene.camera);
+	    this.effectComposer.render();
 
       if (this.multipleScenesVisible || scene.renderCount === 0) {
         this.copyPixels(scene, width, height);

packages/model-viewer/tsconfig.json

@@ -10,8 +10,8 @@
     "sourceMap": true,
     "inlineSources": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "outDir": "./lib",

packages/modelviewer.dev/data/docs.json

@@ -1052,5 +1052,35 @@
         ]
       }
     ]
+  },
+  {
+    "Title": "PostProcessing Effects",
+    "htmlName": "postprocessing",
+    "Attributes": [
+      {
+        "name": "bloom-effect",
+        "htmlName": "bloomEffect",
+        "description": "Toggle the Bloom effect.",
+        "links": [
+          "<a href=\"../examples/postprocessing/#effects\">Related examples</a>"
+        ]
+      },
+      {
+        "name": "ssao-effect",
+        "htmlName": "ssaoEffect",
+        "description": "Toggle the SSAO effect.",
+        "links": [
+          "<a href=\"../examples/postprocessing/#effects\">Related examples</a>"
+        ]
+      },
+      {
+        "name": "pixelate-effect",
+        "htmlName": "pixelateEffect",
+        "description": "Toggle the Pixelate effect.",
+        "links": [
+          "<a href=\"../examples/postprocessing/#effects\">Related examples</a>"
+        ]
+      },
+    ]
   }
 ]

packages/modelviewer.dev/data/examples.json

@@ -256,5 +256,15 @@
         "name": "Exporter"
       }
     ]
-  }
+  },
+  {
+    "name": "PostProcessing Effects",
+    "htmlName": "postprocessing",
+    "examples": [
+      {
+        "htmlId": "effects",
+        "name": "Toggle Effects"
+      }
+    ]
+  } 
 ]

packages/modelviewer.dev/docs/index.html

@@ -56,6 +56,7 @@
     <div id="lightingandenv-docs"></div>
     <div id="animation-docs"></div>
     <div id="scenegraph-docs"></div>
+    <div id="postprocessing-docs"></div>
     <div class="footerDocumentation">
       <div class="footer">
         <div style="margin-top:24px;" class="copyright">©Copyright 2018-2020 Google Inc. Licensed under the Apache License 2.0.</div>