aframevr · enzofrancescaHM · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025 · Jan 30, 2025
diff --git a/examples/post-process/bloom.js b/examples/post-process/bloom.js
@@ -0,0 +1,104 @@
+/**
+ * Unreal Bloom Effect
+ * Implementation for A-Frame
+ * Code modified from Akbartus's UnrealBloomPass.js
+ * https://github.com/akbartus/A-Frame-Component-Postprocessing
+ */
+
+import AFRAME from "aframe";
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js"; // This uses the same three instance.
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js"; // This uses the same three instance.
+import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"; // This uses the same three instance.
+
+/////////////////////////////////////
+// A-FRAME COMPONENT: POST-PROCESSING //
+/////////////////////////////////////
+AFRAME.registerComponent("bloom", {
+  schema: {
+    threshold: {
+      type: "number",
+      default: 0,
+    },
+    strength: {
+      type: "number",
+      default: 0.4,
+    },
+    radius: {
+      type: "number",
+      default: 0,
+    },
+    exposure: {
+      type: "number",
+      default: 1,
+    },
+  },
+  init: function () {
+
+    this.scene = this.el.object3D;
+    this.renderer = this.el.renderer;
+    this.camera = this.el.camera;
+    this.bound = false;
+
+    var that = this;
+
+    // delay half second to get the right resolution
+    setTimeout(function () {
+      that.evaluateEffect();
+      that.bind();
+    }, 500);
+  },
+  update: function (oldData) {
+    console.log("Post-processing UPDATE effect");
+    this.evaluateEffect();
+  },
+  evaluateEffect: function () {
+    this.scene = this.el.object3D;
+    this.renderer = this.el.renderer;
+    this.camera = this.el.camera;
+    this.composer = new EffectComposer(this.renderer);
+    const renderScene = new RenderPass(this.scene, this.camera);
+    this.composer.addPass(renderScene);
+
+    // creating bloom pass    
+    const bloomPass = new UnrealBloomPass(
+      new THREE.Vector2(
+        this.renderer.domElement.clientWidth,
+        this.renderer.domElement.clientHeight
+      ),
+      1.5,
+      0.4,
+      0.85
+    );
+
+    bloomPass.threshold = this.data.threshold;
+    bloomPass.strength = this.data.strength;
+    bloomPass.radius = this.data.radius;
+    this.composer.addPass(bloomPass);
+  },
+  tick: function (t, dt) {
+    this.t = t;
+    this.dt = dt;
+  },
+  bind: function () {
+    const render = this.renderer.render;
+    const system = this;
+    let isDigest = false;
+
+    this.renderer.render = function () {
+
+      if (isDigest) {
+        render.apply(this, arguments);
+      } else {
+        isDigest = true;
+        if (system.occlusionComposer) {
+          system.occlusionComposer.render(system.dt);
+        } else {
+          system.composer.render(system.dt);
+        }
+        isDigest = false;
+      }
+
+    };
+
+  },
+});
diff --git a/examples/post-process/index.html b/examples/post-process/index.html
@@ -0,0 +1,74 @@
+<html>
+
+<head>    
+     <script type="importmap">
+        {
+          "imports": {
+            "aframe": "../../dist/aframe-master.module.min.js",
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+          }
+        }
+     </script>
+     <script type="module" src="./bloom.js"></script>;
+
+     <meta charset="utf-8">
+     <title>Post Processing Bloom A-Frame Demo</title>
+     <meta name="description" content="Post Processing Bloom Demo">
+
+</head>
+
+<body>
+
+    <a-scene         
+        reflection="directionalLight:#sun;"
+        ßshadow="type: pcfsoft; autoUpdate: true" 
+        background="color:black;"        
+        renderer="anisotropy:4; stencil:true; alpha:false; colorManagement:true; exposure:1.0;">
+
+        <a-entity id="pov-camera" position="0 1.6 2" rotation="3.323 -8.136 0" camera="" look-controls="" wasd-controls="" data-aframe-inspector-original-camera=""></a-entity>
+
+        <a-box id="boxemissivewhite" shadow="cast:false; receive:false" position="1 1.720 -1" rotation="0 0 0"
+            scale="0.2 0.2 0.2" color="#FFFFFF" material="emissive: #FFF; emissiveIntensity:4;"></a-box>
+
+        <a-box id="boxemissivegreen" shadow="cast:false; receive:false" position="0 1.720 -1" rotation="0 0 0"
+            scale="0.2 0.2 0.2" color="#00FF00" material="emissive: #0F0; emissiveIntensity:4;"></a-box>
+
+        <a-box id="boxemissivered" shadow="cast: false; receive: false" position="-1 1.720 -1" rotation=""
+            scale="0.2 0.2 0.2" color="#FF0000" material="emissive: #F00; emissiveIntensity: 4"></a-box>
+
+        <a-box id="boxwhite" shadow="cast:false; receive:false" position="1 1 -1" rotation="0 0 0"
+            scale="0.2 0.2 0.2" color="#FFFFFF" material="emissive: #FFF; emissiveIntensity:0;"></a-box>
+
+        <a-box id="boxgreen" shadow="cast:false; receive:false" position="0 1 -1" rotation="0 0 0"
+            scale="0.2 0.2 0.2" color="#00FF00" material="emissive: #0F0; emissiveIntensity:0;"></a-box>
+
+        <a-box id="boxred" shadow="cast: false; receive: false" position="-1 1 -1" rotation=""
+            scale="0.2 0.2 0.2" color="#FF0000" material="emissive: #F00; emissiveIntensity:0;"></a-box>       
+
+        <a-box id="pulsingneon" shadow="cast:false; receive:false" position="0 1.250 -1" rotation="0 0 0"
+            scale="2 0.1 0.1" color="#FF00FF" material="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"shadow></a-plane>        
+
+        <a-entity id="sun" radius="0.5" color="#FFD"
+            light="type: directional; intensity:2.6; color: #FFD; shadowBias: -0.00001; castShadow: true; shadowCameraRight: 7.9; shadowMapHeight: 2048; shadowMapWidth: 2048;"
+            position="0.12 5.76 -2.14" rotation="0 0 0">
+        </a-entity>
+
+    </a-scene>
+
+    <script>
+        // intercept the scene loaded event
+        document.querySelector('a-scene').addEventListener('loaded', function () {
+            // get the scene            
+            var scene = document.querySelector('a-scene');            
+            // add the bloom effect
+            scene.setAttribute('bloom', {threshold: 1.0, strength: 0.6, radius: 1, exposure: 1.0});            
+        });
+    </script>
+
+</body>
+
+</html>