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,46 @@
+/* @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 {Texture, Vector2} from 'three';
+
+import ModelViewerElementBase, {$needsRender, $renderer} from '../model-viewer-base.js';
+import {clamp, Constructor, deserializeUrl} from '../utilities.js';
+
+export declare interface PostProcessingInterface {
+  bloomEffect: boolean;
+  vignetteEffect: boolean;
+  ssaoEffect: boolean;
+}
+
+export const PostProcessingMixin = <T extends Constructor<ModelViewerElementBase>>(
+    ModelViewerElement: T): Constructor<PostProcessingInterface>&T => {
+  class PostProcessingModelViewerElement extends ModelViewerElement {
+    @property({type: Boolean, attribute: 'bloom-effect'})
+    bloomEffect: boolean = false;
+    @property({type: Boolean, attribute: 'vignette-effect'})
+    vignetteEffect: boolean = false;
+    @property({type: Boolean, attribute: 'ssao-effect'})
+    ssaoEffect: 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-base.ts

@@ -409,6 +409,12 @@ export default class ModelViewerElementBase extends ReactiveElement {
     }
   }
 
+
+  /** @export */
+  getRenderer() { 
+    return this[$renderer];
+  }
+
   /** @export */
   toDataURL(type?: string, encoderOptions?: number): string {
     return this[$renderer]

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

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {BackSide, BoxGeometry, Mesh, MeshBasicMaterial, MeshStandardMaterial, PointLight, Scene} from 'three';
+import {BackSide, BoxGeometry, Mesh, MeshBasicMaterial, MeshStandardMaterial, PointLight, AmbientLight, DirectionalLight, Scene} from 'three';
 
 export default class EnvironmentScene extends Scene {
   constructor() {
@@ -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,30 @@
+import { EffectComposer, RenderPass, EffectPass, BloomEffect, BlendFunction, KernelSize, FXAAEffect, SSAOEffect, 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 TONEMAPPING_EFFECT = new ToneMappingEffect({mode: ToneMappingMode.OPTIMIZED_CINEON});
+
+export const POST_PROCESSING_PIPELINE = new EffectPass(null, FXAA_EFFECT, SSAO_EFFECT, BLOOM_EFFECT, TONEMAPPING_EFFECT);
+POST_PROCESSING_PIPELINE.name = "postProcessing";
+POST_PROCESSING_PIPELINE.enabled = false;
+
+export const CreateEffectComposer = (threeRenderer: WebGLRenderer) => {
+    const effectComposer = new EffectComposer(threeRenderer);
+
+    effectComposer.addPass(RENDER_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,7 @@ 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';
 
 export interface RendererOptions {
   powerPreference: string;
@@ -92,6 +94,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);
@@ -141,21 +145,28 @@ export class Renderer extends EventDispatcher {
       this.threeRenderer = new WebGLRenderer({
         canvas: this.canvas3D,
         alpha: true,
-        antialias: true,
+        antialias: false,
         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
 
       this.debugger = !!options.debug ? new Debugger(this) : null;
       this.threeRenderer.debug = {checkShaderErrors: !!this.debugger};
 
+      // this.threeRenderer.setClearColor(0x000000, 0.0);
       // 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,12 @@ export class Renderer extends EventDispatcher {
     const exposureIsNumber =
         typeof exposure === 'number' && !Number.isNaN(exposure);
     this.threeRenderer.toneMappingExposure = exposureIsNumber ? exposure : 1.0;
+
+    for (const pass of this.effectComposer.passes) {
+      if (scene.hasOwnProperty(pass.name)) pass.enabled = scene[pass.name];
+      pass.mainScene = scene;
+      pass.mainCamera = scene.getCamera();
+    }
   }
 
   render(t: number, frame?: XRFrame) {
@@ -491,7 +512,8 @@ 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.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/examples/scenegraph/index.html

@@ -253,14 +253,14 @@ <h2 class="demo-title">Change Material Metalness and Roughness Factors</h2>
           </div>
           <example-snippet stamp-to="changeMaterial" highlight-as="html">
             <template>
-<model-viewer id="sphere" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/reflective-sphere.gltf" ar alt="A 3D model of a sphere">
+<model-viewer style="background: black;" id="sphere" debug camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/glTF-Sample-Models/2.0/EmissiveStrengthTest/glTF-Binary/EmissiveStrengthTest.glb" alt="A 3D model of a sphere" bloom-effect max-field-of-view="100deg">
   <div class="controls">
     <div>
       <p>Metalness: <span id="metalness-value"></span></p>
-      <input id="metalness" type="range" min="0" max="1" step="0.01" value="1" />
+      <input id="metalness" type="range" min="0" max="1" step="0.01" value="0" />
     </div>
     <div>
-      <p>Roughness: <span id="roughness-value"></span></p>
+      <p>Emissive: <span id="roughness-value"></span></p>
       <input id="roughness" type="range" min="0" max="1" step="0.01" value="0" />
     </div>
   </div>
@@ -270,26 +270,30 @@ <h2 class="demo-title">Change Material Metalness and Roughness Factors</h2>
 
 modelViewerParameters.addEventListener("load", (ev) => {
 
-  let material = modelViewerParameters.model.materials[0];
-
-  let metalnessDisplay = document.querySelector("#metalness-value");
-  let roughnessDisplay = document.querySelector("#roughness-value");
-
-  metalnessDisplay.textContent = material.pbrMetallicRoughness.metallicFactor;
-  roughnessDisplay.textContent = material.pbrMetallicRoughness.roughnessFactor;
-
-  // Defaults to gold
-  material.pbrMetallicRoughness.setBaseColorFactor([0.7294, 0.5333, 0.0392]);
-
-  document.querySelector('#metalness').addEventListener('input', (event) => {
-    material.pbrMetallicRoughness.setMetallicFactor(event.target.value);
-    metalnessDisplay.textContent = event.target.value;
-  });
-
-  document.querySelector('#roughness').addEventListener('input', (event) => {
-    material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
-    roughnessDisplay.textContent = event.target.value;
-  });
+  // let material = modelViewerParameters.model.materials[0];
+
+  // let metalnessDisplay = document.querySelector("#metalness-value");
+  // let roughnessDisplay = document.querySelector("#roughness-value");
+
+  // metalnessDisplay.textContent = material.pbrMetallicRoughness.metallicFactor;
+  // roughnessDisplay.textContent = material.pbrMetallicRoughness.roughnessFactor;
+
+  // // Defaults to gold
+  // material.pbrMetallicRoughness.setBaseColorFactor([0,0,1]);
+  // material.pbrMetallicRoughness.setMetallicFactor(0);
+  // material.pbrMetallicRoughness.setRoughnessFactor(1);
+  // material.setEmissiveFactor([0, 0, 1]);
+  // document.querySelector('#metalness').addEventListener('input', (event) => {
+  //   material.pbrMetallicRoughness.setMetallicFactor(event.target.value);
+  //   metalnessDisplay.textContent = event.target.value;
+  // });
+
+  // document.querySelector('#roughness').addEventListener('input', (event) => {
+  //   //material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
+  //   // material.setEmissiveFactor([event.target.value, 0, event.target.value]);
+  //   //material.pbrMetallicRoughness.setRoughnessFactor(event.target.value);
+  //   roughnessDisplay.textContent = event.target.value * 5;
+  // });
 });
 </script>
             </template>