adding in postprocessing; adding in outlines for clickables and potion bottles

game.js

@@ -939,13 +939,29 @@ export function update(game) {
     candleLit.position.y = 0.625 * Math.sin(0.5 * elapsedTime) + 1.3
 
     let intersects = raycast.intersectObjects(game.entities.filter(entity => entity.visible))
+    game.outlinePass.selectedObjects = []
+    document.body.style.cursor = "default"
     if (intersects.length > 0) {
         document.body.style.cursor = "pointer"
-    } else {
-        document.body.style.cursor = "default"
+        if(!stageData.chest.isStocking && !stageData.isSellingPotions && !stageData.cauldron.isBrewing) {
+            highlightParents(intersects, [stageData.cauldron, stageData.shopWitch, stageData.sellingSkeleton])
+        } else if(stageData.isSellingPotions) {
+            highlightParents(intersects, stageData.displayedPotions) 
+        }
     }
 }
 
+function highlightParents(intersects, entities) {
+    intersects.forEach(intersect => {
+        entities.forEach(entity => {
+            if(isAChildOf(entity, intersect.object)) {
+                game.outlinePass.selectedObjects = [entity]
+                return
+            }
+        })
+    })
+}
+
 function isAChildOf(parent, childToCheck) {
     if (parent == childToCheck) return true
     if (childToCheck.parent != null) {

main.js

@@ -1,5 +1,10 @@
 import * as THREE from 'three'
-import { GLTFLoader, EXRLoader, RGBELoader, OrbitControls } from 'three/examples/jsm/Addons.js'
+import { GLTFLoader, EXRLoader, RGBELoader, OrbitControls, ShaderPass, GammaCorrectionShader } from 'three/examples/jsm/Addons.js'
+import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
+import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
+import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass';
+import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
 import { init, update, onClick, onKeyPress } from './game.js'
 import gsap from 'gsap'
 import { MotionPathPlugin } from 'gsap/MotionPathPlugin.js'
@@ -7,7 +12,7 @@ import Howler from 'howler'
 
 gsap.registerPlugin(MotionPathPlugin)
 Howler.autoUnlock = true
-    
+
 const game = {}
 game.entities = []
 game.loadingManager = new THREE.LoadingManager()
@@ -25,14 +30,46 @@ game.lookAtFocus = new THREE.Vector3(0, 0, 0)
 
 function loaded() {
     game.renderer = new THREE.WebGLRenderer({
-        canvas:game.canvas,
+        canvas: game.canvas,
         antialias: true,
 
     })
+    game.renderer.outputColorSpace = THREE.SRGBColorSpace
     game.renderer.setSize(game.canvas.offsetWidth, game.canvas.offsetHeight)
     game.renderer.shadowMap.enabled = true
     game.renderer.shadowMap.type = THREE.PCFSoftShadowMap
 
+    /******************
+     * Postprocessing *
+     ******************/
+
+    const renderPass = new RenderPass(game.scene, game.camera)
+
+    const bloomPass = new UnrealBloomPass(new THREE.Vector2(game.canvas.offsetWidth, game.canvas.offsetHeight));
+    bloomPass.threshold = 0.5
+    bloomPass.strength = 0.25
+    bloomPass.radius = 0.0
+
+    // Highlight
+    game.outlinePass = new OutlinePass(new THREE.Vector2(game.canvas.offsetWidth, game.canvas.offsetHeight), game.scene, game.camera)
+    // game.outlinePass.edgeThickness = 1
+    // game.outlinePass.edgeGlow = 0
+    game.outlinePass.edgeStrength = 4
+    game.outlinePass.pulsePeriod = 4
+    game.outlinePass.visibleEdgeColor = new THREE.Color(1, 1, 1)
+    game.outlinePass.hiddenEdgeColor = new THREE.Color(1, 1, 1)
+
+    const gammaCorrection = new ShaderPass( GammaCorrectionShader )
+
+    const outputPass = new OutputPass()
+
+    game.effectComposer = new EffectComposer(game.renderer)
+    game.effectComposer.addPass(renderPass)
+    game.effectComposer.addPass(game.outlinePass)
+    game.effectComposer.addPass(bloomPass)
+	// game.effectComposer.addPass( gammaCorrection )    
+    game.effectComposer.addPass(outputPass)
+
     game.orbitControls = new OrbitControls(game.camera, game.renderer.domElement)
     game.orbitControls.enabled = false
     onResize()
@@ -40,7 +77,7 @@ function loaded() {
         document.getElementById("loading").style.display = "none"
         game.clock.start()
         attachAnimationFrame()
-    })   
+    })
 }
 
 function onResize() {
@@ -52,13 +89,15 @@ function onResize() {
 }
 
 function renderOneFrame() {
-    
+
     update(game)
     game.orbitControls.update()
-    if(!game.orbitControls.enabled) {
+    if (!game.orbitControls.enabled) {
         game.camera.lookAt(game.lookAtFocus)
     }
-    game.renderer.render(game.scene, game.camera)
+
+    game.effectComposer.render()
+    //game.renderer.render(game.scene, game.camera)
 }
 
 function attachAnimationFrame() {
@@ -75,16 +114,16 @@ export default async function main(canvasElement) {
         game.mousePosition.y = -2 * (event.clientY / game.canvas.offsetHeight - 0.5)
     })
     game.canvas.addEventListener('touchmove', event => {
-        if(event.touches.length == 1) {
-            game.mousePosition.x = 2 * ( event.touches[0].clientX / game.canvas.offsetWidth - 0.5)
-            game.mousePosition.y = -2 * ( event.touches[0].clientY / game.canvas.offsetHeight - 0.5)  
+        if (event.touches.length == 1) {
+            game.mousePosition.x = 2 * (event.touches[0].clientX / game.canvas.offsetWidth - 0.5)
+            game.mousePosition.y = -2 * (event.touches[0].clientY / game.canvas.offsetHeight - 0.5)
         }
     })
 
     game.canvas.addEventListener('touchstart', event => {
-        if(event.touches.length == 1) {
-            game.mousePosition.x = 2 * ( event.touches[0].clientX / game.canvas.offsetWidth - 0.5)
-            game.mousePosition.y = -2 * ( event.touches[0].clientY / game.canvas.offsetHeight - 0.5)  
+        if (event.touches.length == 1) {
+            game.mousePosition.x = 2 * (event.touches[0].clientX / game.canvas.offsetWidth - 0.5)
+            game.mousePosition.y = -2 * (event.touches[0].clientY / game.canvas.offsetHeight - 0.5)
         }
     })
     game.canvas.addEventListener('mousedown', event => {