Post-Process example

examples/index.html

@@ -158,6 +158,7 @@ <h2>Examples</h2>
       <li><a href="mixed-reality/anchor/">Anchor (Mixed Reality)</a></li>
       <li><a href="mixed-reality/real-world-meshing/">Real World Meshing (Mixed Reality)</a></li>
       <li><a href="boilerplate/importmap/">Importmap (import teapot geometry from three/addons)</a></li>
+      <li><a href="showcase/post-processing/">Post-Processing (bloom effect)</a></li>
     </ul>
 
     <h2>Examples from Documentation</h2>

examples/showcase/post-processing/bloom.js

@@ -0,0 +1,112 @@
+/* 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";
+import { FullScreenQuad } from "three/addons/postprocessing/Pass.js";
+
+// Disable XR projection for fullscreen effects
+// https://github.com/mrdoob/three.js/pull/26160
+const _render = FullScreenQuad.prototype.render;
+FullScreenQuad.prototype.render = function (renderer) {
+  const xrEnabled = renderer.xr.enabled;
+  renderer.xr.enabled = false;
+  _render.apply(this, arguments);
+  renderer.xr.enabled = xrEnabled;
+};
+
+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);
+    },
+    "enter-vr": function () {
+      this.renderer.getSize(this.size);
+      this.composer.setSize(this.size.width, this.size.height);
+    },
+  },
+  init() {
+    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() {
+    this.el.renderer.render = this.originalRender;
+    this.bloomPass.dispose();
+    this.outputPass.dispose();
+    this.composer.dispose();
+  },
+});

examples/showcase/post-processing/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Post Processing Bloom Effect</title>
+    <meta name="description" content="Post Processing Bloom Effect • A-Frame" />
+    <script type="importmap">
+      {
+        "imports": {
+          "aframe": "../../dist/aframe-master.module.min.js",
+          "three": "../../../super-three-package/build/three.module.js",
+          "three/addons/": "../../../super-three-package/examples/jsm/"
+        }
+      }
+    </script>
+    <script type="module" src="./bloom.js"></script>
+  </head>
+
+  <body>
+    <a-scene
+      background="color: black"
+      renderer="toneMapping: ACESFilmic"
+      bloom="threshold: 1.0; strength: 0.5; radius: 1"
+    >
+      <a-entity id="rig" position="0 0 2">
+        <a-entity
+          id="camera"
+          position="0 1.6 0"
+          camera
+          look-controls
+          wasd-controls
+        ></a-entity>
+      </a-entity>
+
+      <a-box
+        id="boxemissivewhite"
+        position="1 1.7 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #FFF; emissive: #FFF; emissiveIntensity: 4"
+      ></a-box>
+
+      <a-box
+        id="boxemissivegreen"
+        position="0 1.7 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #0F0; emissive: #0F0; emissiveIntensity: 4"
+      ></a-box>
+
+      <a-box
+        id="boxemissivered"
+        position="-1 1.7 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #F00; emissive: #F00; emissiveIntensity: 5"
+      ></a-box>
+
+      <a-box
+        id="boxwhite"
+        position="1 1 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #FFF; emissive: #FFF; emissiveIntensity: 0"
+      ></a-box>
+
+      <a-box
+        id="boxgreen"
+        position="0 1 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #0F0;emissive: #0F0; emissiveIntensity: 0"
+      ></a-box>
+
+      <a-box
+        id="boxred"
+        position="-1 1 -1"
+        scale="0.2 0.2 0.2"
+        material="color: #F00; emissive: #F00; emissiveIntensity: 0"
+      ></a-box>
+
+      <a-box
+        id="pulsingneon"
+        position="0 1.25 -1"
+        scale="2 0.1 0.1"
+        material="color: #F0F; emissive: #F0F; emissiveIntensity: 2.5"
+        animation="property: material.emissiveIntensity; from: 2.5; to: 3.5; dir: alternate; dur: 2000; easing: linear; loop: true"
+      ></a-box>
+
+      <a-plane
+        id="plane"
+        position="0 0.2 -4"
+        rotation="-90 0 0"
+        width="40"
+        height="40"
+        color="#111111"
+      ></a-plane>
+
+      <a-entity
+        id="sun"
+        light="type: directional; intensity: 2.6; color: #FFD"
+        position="0.12 5.76 -2.14"
+      >
+      </a-entity>
+    </a-scene>
+  </body>
+</html>