add env map & update build workflow

Author: breathingcyborg

.github/workflows/build_and_deploy.yml

@@ -10,6 +10,14 @@ jobs:
       - name: Checkout 🛎️
         uses: actions/checkout@v2
 
+      - name: Setup Node.js 12.22.12
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12.22.12
+
+      - name: Install Yarn
+        run: npm install -g yarn
+
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         env:
           PUBLIC_PATH: https://breathingcyborg.github.io/mediapipe-face-effects/

package.json

@@ -17,7 +17,7 @@
     "@mediapipe/drawing_utils": "^0.3.1620248257",
     "@mediapipe/face_mesh": "^0.4.1633559619",
     "core-js": "2",
-    "three": "^0.136.0"
+    "three": "^0.174.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",

src/js/three_components/environment.js

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+
+export class Environment {
+    constructor(scene, renderer) {
+        this.scene = scene;
+        this.renderer = renderer;
+        this.setup();
+    }
+
+    async setup() {
+        const pmremGenerator = new THREE.PMREMGenerator( this.renderer );
+        this.scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+    }
+}

src/js/three_components/scene_manager.js

@@ -2,7 +2,8 @@ import * as THREE from 'three';
 import { FaceMask } from './face_mask';
 import { Glasses } from './glasses';
 import { VideoBackground } from './video_bg';
-import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { Environment } from './environment';
 
 /**
  * 
@@ -32,14 +33,24 @@ export class SceneManager {
     this.useOrtho = useOrtho;
     this.renderer = new THREE.WebGLRenderer({
       canvas: this.canvas,
-      devicePixelRation: window.devicePixelRatio || 1
+      devicePixelRation: window.devicePixelRatio || 1,
+      antialias: true,
     });
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+    this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    this.renderer.toneMappingExposure = 1;
+
     this.fov = 63;
     this.buildCamera();
     this.buildControls();
     this.buildVideoBg();
     this.buildFaceMask();
     this.buildGlasses();
+    this.buildEnvironment();
+  }
+
+  buildEnvironment() {
+    this.environment = new Environment(this.scene, this.renderer);
   }
 
   buildVideoBg() {

src/js/three_components/video_bg.js

@@ -52,8 +52,12 @@ export class VideoBackground {
         color: new THREE.Color(0xcccccc)
       });
     }
+
+    const videoTexture = new THREE.CanvasTexture(this.image);
+    videoTexture.colorSpace = THREE.SRGBColorSpace;
+
     let material = new THREE.MeshBasicMaterial({
-        map: new THREE.CanvasTexture(this.image),
+        map: videoTexture,
     });
     return material;
   }

src/styles.css

@@ -6,7 +6,8 @@ body {
 .video-container {
   display: flex;
   flex-direction: column;
-  max-width: 1024px;
+  max-width: 100%;
+  padding: 0 2rem;
   margin: 0 auto;
   position: relative;
 }

yarn.lock

@@ -3061,9 +3061,10 @@ terser@^5.10.0, terser@^5.7.2:
     source-map "~0.7.2"
     source-map-support "~0.5.20"
 
-three@^0.136.0:
-  version "0.136.0"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.136.0.tgz#b1504db021b46398ef468aa7849f3dcabb814f50"
+three@^0.174.0:
+  version "0.174.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.174.0.tgz#53f46d6fd27515231b2af321f798f1e0ecf3f905"
+  integrity sha512-p+WG3W6Ov74alh3geCMkGK9NWuT62ee21cV3jEnun201zodVF4tCE5aZa2U122/mkLRmhJJUQmLLW1BH00uQJQ==
 
 thunky@^1.0.2:
   version "1.1.0"