aframevr · enzofrancescaHM · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/examples/assets/models/fancy-car.glb b/examples/assets/models/fancy-car.glb
diff --git a/examples/index.html b/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>

diff --git a/examples/showcase/post-processing/bloom.js 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
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+  <meta charset="utf-8" />
+  <title>Post Processing Bloom Effect</title>
+  <meta name="description" content="Post Processing Bloom Effect • A-Frame" />
+
+  <style src="./style.css"></style>
+
+  <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>
+
+  <div id="infopanel">
+    <a href="https://aframe.io/" target="_blank" rel="noopener" style="color:#00ceff;pointer-events: auto;">A-Frame</a>
+    PostProcessing - Bloom<br />
+    Model: <a href="https://skfb.ly/owUr9" target="_blank" rel="noopener">Low-poly cartoon style car 03</a> by
+    <a href="https://sketchfab.com/arturs.vitas" target="_blank" rel="noopener">artus.vitas</a>, CC Attribution.
+  </div>
+
+  <a-scene bloom="threshold: 1.0; strength: 0.3; radius: 1;" background="color: #000000"
+    renderer="toneMapping: ACESFilmic;">
+
+    <a-assets>
+      <!-- model by arturs.vitas https://skfb.ly/owUr9 -->
+      <a-asset-item id="testbed" src="../../assets/models/fancy-car.glb"></a-asset-item>
+    </a-assets>
+
+    <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-entity id="base" geometry="primitive: cylinder; height: 0.1; radius: 1.93" position="0 0 -2"
+      material="color: #201d1d" shadow
+      animation="property: rotation; to: 0 360 0 ; loop: true; dur: 15000; easing: linear;">
+
+      <a-entity id="tooncar" gltf-model="#testbed" position="0 0.050 0" scale="2 2 2" shadow>
+      </a-entity>
+
+      <a-entity id="neon01"
+        geometry="primitive: torus; radius: 1.92; radiusTubular: 0.02; segmentsRadial: 50; segmentsTubular: 40"
+        material="color: #d100e0; emissive: #b300a4; emissiveIntensity: 9.34" rotation="90 0 0">
+      </a-entity>
+
+    </a-entity>
+
+    <a-entity id="ambient" light="type: ambient; intensity: 0.48; color: #ffffff">
+    </a-entity>
+
+    <a-entity id="point01" light="color: #7cd2fe; intensity: 5; type: point;" position="0 3.51 -1">
+    </a-entity>
+
+  </a-scene>
+</body>
+
+</html>
diff --git a/examples/showcase/post-processing/style.css 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;
+}