diff --git a/examples/assets/models/fancy-car.glb b/examples/assets/models/fancy-car.glb
new file mode 100644
index 00000000000..b06a48829a9
Binary files /dev/null and b/examples/assets/models/fancy-car.glb differ
diff --git a/examples/index.html b/examples/index.html
index 7abca21f73e..2706c8c9c63 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -158,6 +158,7 @@ Examples
Anchor (Mixed Reality)
Real World Meshing (Mixed Reality)
Importmap (import teapot geometry from three/addons)
+ Post-Processing
Examples from Documentation
diff --git a/examples/showcase/post-processing/bloom.js b/examples/showcase/post-processing/bloom.js
new file mode 100644
index 00000000000..e053619e6e2
--- /dev/null
+++ b/examples/showcase/post-processing/bloom.js
@@ -0,0 +1,97 @@
+/* global THREE */
+/**
+ * Unreal Bloom Effect
+ * Implementation for A-Frame
+ * Code modified from Akbartus's post-processing A-Frame integration
+ * https://github.com/akbartus/A-Frame-Component-Postprocessing
+ */
+
+import AFRAME from 'aframe';
+import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
+import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
+import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
+import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
+
+AFRAME.registerComponent('bloom', {
+ schema: {
+ threshold: { type: 'number', default: 1 },
+ strength: { type: 'number', default: 0.5 },
+ radius: { type: 'number', default: 1 }
+ },
+ events: {
+ rendererresize: function () {
+ this.renderer.getSize(this.size);
+ this.composer.setSize(this.size.width, this.size.height);
+ }
+ },
+ init: function () {
+ this.size = new THREE.Vector2();
+ this.scene = this.el.object3D;
+ this.renderer = this.el.renderer;
+ this.camera = this.el.camera;
+ this.bind();
+ },
+ update: function () {
+ if (this.composer) {
+ this.composer.dispose();
+ }
+ // create composer with multisampling to avoid aliasing
+ const resolution = this.renderer.getDrawingBufferSize(new THREE.Vector2());
+ const renderTarget = new THREE.WebGLRenderTarget(
+ resolution.width,
+ resolution.height,
+ { type: THREE.HalfFloatType, samples: 8 }
+ );
+
+ this.composer = new EffectComposer(this.renderer, renderTarget);
+
+ // create render pass
+ const renderScene = new RenderPass(this.scene, this.camera);
+ this.composer.addPass(renderScene);
+
+ // create bloom pass
+ const strength = this.data.strength;
+ const radius = this.data.radius;
+ const threshold = this.data.threshold;
+ if (this.bloomPass) {
+ this.bloomPass.dispose();
+ }
+ this.bloomPass = new UnrealBloomPass(
+ resolution,
+ strength,
+ radius,
+ threshold
+ );
+ this.composer.addPass(this.bloomPass);
+
+ // create output pass
+ if (this.outputPass) {
+ this.outputPass.dispose();
+ }
+ this.outputPass = new OutputPass();
+ this.composer.addPass(this.outputPass);
+ },
+
+ bind: function () {
+ this.originalRender = this.el.renderer.render;
+ const self = this;
+ let isInsideComposerRender = false;
+
+ this.el.renderer.render = function () {
+ if (isInsideComposerRender) {
+ self.originalRender.apply(this, arguments);
+ } else {
+ isInsideComposerRender = true;
+ self.composer.render(self.el.sceneEl.delta / 1000);
+ isInsideComposerRender = false;
+ }
+ };
+ },
+
+ remove: function () {
+ this.el.renderer.render = this.originalRender;
+ this.bloomPass.dispose();
+ this.outputPass.dispose();
+ this.composer.dispose();
+ }
+});
diff --git a/examples/showcase/post-processing/index.html b/examples/showcase/post-processing/index.html
new file mode 100644
index 00000000000..f29b063aa8a
--- /dev/null
+++ b/examples/showcase/post-processing/index.html
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+ Post Processing Bloom Effect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/examples/showcase/post-processing/style.css b/examples/showcase/post-processing/style.css
new file mode 100644
index 00000000000..6134a71eb85
--- /dev/null
+++ b/examples/showcase/post-processing/style.css
@@ -0,0 +1,23 @@
+#infopanel {
+ font-family: Monospace;
+ font-size: 13px;
+ line-height: 24px;
+ color:#ffffff;
+ position: absolute;
+ top: 0px;
+ width: 100%;
+ padding: 10px;
+ box-sizing: border-box;
+ text-align: center;
+ pointer-events: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ z-index: 1;
+}
+
+#infopanel a {
+ color:#00ceff;
+ pointer-events: auto;
+}
\ No newline at end of file