HDR support - environment and image based lighting.

docs/webpack.config.js

@@ -28,7 +28,7 @@ module.exports = {
         loader: "awesome-typescript-loader",
       },
       {
-        test: /\.(glb|mtl|png|jpe?g|gif)$/,
+        test: /\.(glb|mtl|png|jpe?g|gif|hdr|exr)$/,
         use: [
           {
             loader: "file-loader",

src/builders/GameBuilder.ts

@@ -1,4 +1,4 @@
-import { LoadingManager } from "three"
+import { LoadingManager, WebGLRenderer } from "three"
 
 import CameraManager from "../managers/CameraManager"
 import DataManager from "../managers/DataManager"
@@ -26,14 +26,16 @@ const defaultGameBuilder = async ({
   defaultLoadouts
 }: GameBuilderOptions) => {
   const players = replayMetadata.players
-  const sceneManager = await defaultSceneBuilder(players, loadingManager, defaultLoadouts)
+  const renderer = new WebGLRenderer({ antialias: true })
+  const sceneManager = await defaultSceneBuilder(players, renderer, loadingManager, defaultLoadouts)
   defaultAnimationBuilder(replayData, sceneManager.players, sceneManager.ball)
   DataManager.init({ replayData, replayMetadata })
   CameraManager.init()
   KeyManager.init()
 
   return GameManager.init({
     clock,
+    renderer
   })
 }
 

src/builders/SceneBuilder.ts

@@ -1,4 +1,4 @@
-import { Cache, LoadingManager, Scene } from 'three'
+import { Cache, LoadingManager, Scene, WebGLRenderer, Mesh, MeshStandardMaterial } from 'three'
 
 import GameFieldAssets from '../loaders/scenes/GameFieldAssets'
 import SceneManager from '../managers/SceneManager'
@@ -11,6 +11,7 @@ import { RocketAssetManager, RocketConfig, TextureFormat } from 'rl-loadout-lib'
 import { buildRocketLoadoutGroup } from './player/buildRocketLoadoutScene';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
+import { addEnvironment } from "./scene/addEnvironment";
 
 /**
  * @description The sole purpose of this function is to initialize and tie together all of the
@@ -20,6 +21,7 @@ import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
  */
 const defaultSceneBuilder = async (
   playerInfo: ExtendedPlayer[],
+  renderer: WebGLRenderer,
   loadingManager?: LoadingManager,
   defaultLoadouts?: boolean
 ): Promise<SceneManager> => {
@@ -49,11 +51,19 @@ const defaultSceneBuilder = async (
   await GameFieldAssets.load()
   const bodies = await Promise.all(bodyPromises)
 
+  const envMap = addEnvironment(scene, renderer)
   addLighting(scene)
   const field = buildPlayfield(scene)
   const players = bodies.map(value => buildRocketLoadoutGroup(scene, value))
   const ball = buildBall(scene)
 
+  // TODO ?
+  scene.traverse( child => {
+    if ( (<Mesh> child).isMesh ) {
+      (<MeshStandardMaterial> (<Mesh> child).material).envMap = envMap
+    }
+  })
+
   return SceneManager.init({
     scene,
     ball,

src/builders/scene/addEnvironment.ts

@@ -0,0 +1,29 @@
+import { Scene, WebGLRenderer } from "three"
+
+import { PMREMGenerator } from "three/examples/jsm/pmrem/PMREMGenerator"
+import { PMREMCubeUVPacker } from "three/examples/jsm/pmrem/PMREMCubeUVPacker"
+import { EquirectangularToCubeGenerator } from "three/examples/jsm/loaders/EquirectangularToCubeGenerator"
+import GameFieldAssets from "../../loaders/scenes/GameFieldAssets"
+
+export const addEnvironment = (scene: Scene, renderer: WebGLRenderer) => {
+  const { environment } = GameFieldAssets.getAssets()
+
+  const cubeGenerator = new EquirectangularToCubeGenerator( environment, { resolution: 2048 } );
+  cubeGenerator.update( renderer );
+
+  // @ts-ignore
+  const pmremGenerator = new PMREMGenerator( cubeGenerator.renderTarget.texture );
+  pmremGenerator.update( renderer );
+
+  const pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
+  pmremCubeUVPacker.update( renderer );
+
+  // @ts-ignore
+  scene.background = cubeGenerator.renderTarget;
+
+  pmremGenerator.dispose();
+  pmremCubeUVPacker.dispose();
+
+  const envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;
+  return envMap
+}

src/builders/scene/addLighting.ts

@@ -2,12 +2,12 @@ import { AmbientLight, DirectionalLight, HemisphereLight, Scene } from "three"
 
 export const addLighting = (scene: Scene) => {
   // Ambient light provides uniform lighting to all objects in the scene
-  const ambientLight = new AmbientLight(0xffffff, 0.2)
-  scene.add(ambientLight)
+  // const ambientLight = new AmbientLight(0xffffff, 0.2)
+  // scene.add(ambientLight)
 
   // Hemisphere light gives the cars their shine and color
-  const hemisphereLight = new HemisphereLight(0xffffbb, 0xffffff, 0.5)
-  scene.add(hemisphereLight)
+  // const hemisphereLight = new HemisphereLight(0xffffbb, 0xffffff, 0.5)
+  // scene.add(hemisphereLight)
 
   // The directional light is purely responsible for casting shadows
   const dirLight = new DirectionalLight(0xffffff, 1.5)

src/loaders/operators/loadEXR.ts

@@ -0,0 +1,24 @@
+import { LoadingManager, DataTexture, FloatType } from "three"
+import { EXRLoader } from "three/examples/jsm/loaders/EXRLoader"
+
+export const loadEXR = (path: string, loadingManager?: LoadingManager) => {
+  return new Promise(
+    (
+      resolve: (exrTexture: DataTexture) => void,
+      reject: (err: Error | ErrorEvent) => void
+    ) => {
+      const exrLoader = new EXRLoader(loadingManager)
+      exrLoader.setDataType( FloatType )
+      exrLoader.load(
+        path,
+        (exrTexture: DataTexture) => {
+          resolve(exrTexture)
+        },
+        undefined,
+        (error: Error | ErrorEvent) => {
+          reject(error)
+        }
+      )
+    }
+  )
+}

src/loaders/operators/loadRGBE.ts

@@ -0,0 +1,24 @@
+import { LoadingManager, DataTexture, UnsignedByteType } from "three"
+import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"
+
+export const loadRGBE = (path: string, loadingManager?: LoadingManager) => {
+  return new Promise(
+    (
+      resolve: (rgbeTexture: DataTexture) => void,
+      reject: (err: Error | ErrorEvent) => void
+    ) => {
+      const rgbeLoader = new RGBELoader(loadingManager)
+      rgbeLoader.setDataType( UnsignedByteType )
+      rgbeLoader.load(
+        path,
+        (rgbeTexture: DataTexture) => {
+          resolve(rgbeTexture)
+        },
+        undefined,
+        (error: Error | ErrorEvent) => {
+          reject(error)
+        }
+      )
+    }
+  )
+}

src/loaders/scenes/GameFieldAssets.ts

@@ -1,11 +1,13 @@
-import { Group, LoadingManager, Object3D } from "three"
+import { Group, LoadingManager, Object3D, DataTexture } from "three"
 
 import { loadBall } from "../storage/loadBall"
 import { loadField } from "../storage/loadField"
+import { loadEnvironment } from "../storage/loadEnvironment"
 
 interface AvailableAssets {
   ball: Object3D
   field: Group
+  environment: DataTexture
 }
 
 class GameFieldAssets {
@@ -20,11 +22,13 @@ class GameFieldAssets {
     const lm = this.loadingManager
     return Promise.all([
       loadBall(lm),
-      loadField(lm)
-    ]).then(([ball, field]) => {
+      loadField(lm),
+      loadEnvironment(lm)
+    ]).then(([ball, field, environment]) => {
       this.assets = {
         ball,
-        field
+        field,
+        environment
       } as AvailableAssets
     })
   }

src/loaders/storage/loadEnvironment.ts

@@ -0,0 +1,15 @@
+import { LoadingManager, DataTexture } from "three"
+
+import { loadRGBE } from "../operators/loadRGBE"
+// import { loadEXR } from "../operators/loadEXR"
+import { storageMemoize } from "./storageMemoize"
+
+export const loadEnvironment = (loadingManager?: LoadingManager) =>
+  storageMemoize(async () => {
+    const { default: hdr } = await import(
+      // @ts-ignore
+      /* webpackChunkName: "Environment" */ "../../assets/models/textures/Environment/Environment.hdr"
+    )
+    const environmentTexture = await loadRGBE(hdr, loadingManager)
+    return environmentTexture as DataTexture
+  }, "ENVIRONMENT")

src/managers/GameManager.ts

@@ -28,15 +28,16 @@ import KeyManager from "./KeyManager"
 import SceneManager from "./SceneManager"
 
 interface GameManagerOptions {
-  clock: FPSClock
+  clock: FPSClock,
+  renderer: WebGLRenderer
 }
 
 export class GameManager {
   clock: FPSClock
-  private readonly renderer: WebGLRenderer
+  renderer: WebGLRenderer
 
-  private constructor({ clock }: GameManagerOptions) {
-    this.renderer = new WebGLRenderer({ antialias: true })
+  private constructor({ clock, renderer }: GameManagerOptions) {
+    this.renderer = renderer
     this.renderer.shadowMap.enabled = true
     this.animate = this.animate.bind(this)
     this.render = this.render.bind(this)

src/types/exr.d.ts

@@ -0,0 +1,4 @@
+declare module "*.exr" {
+  const value: string
+  export default value
+}

src/types/hdr.d.ts

@@ -0,0 +1,4 @@
+declare module "*.hdr" {
+  const value: string
+  export default value
+}

webpack.config.js

@@ -35,7 +35,7 @@ module.exports = {
         },
       },
       {
-        test: /\.(glb|mtl)$/,
+        test: /\.(glb|mtl|hdr|exr)$/,
         use: [
           {
             loader: "file-loader",