-
Notifications
You must be signed in to change notification settings - Fork 10
HDR support - environment and image based lighting. #72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
Changes from 1 commit
b5d8311
f77aea6
127e84e
6099461
dc54b0a
3211f9f
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 } ); | ||
Abbondanzo marked this conversation as resolved.
Show resolved
Hide resolved
Longi94 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
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 | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
} | ||
) | ||
} | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
} | ||
) | ||
} | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Has this made it into SharedAssets yet? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, I haven't finished final render yet, current environment texture is a testrender I made. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it is okay to put the test render in. It is honestly high quality enough for temporary use. @Abbondanzo is there a way to flag the render under beta? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Not entirely, but we can flag the version number in |
||
) | ||
const environmentTexture = await loadRGBE(hdr, loadingManager) | ||
return environmentTexture as DataTexture | ||
}, "ENVIRONMENT") |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
declare module "*.exr" { | ||
const value: string | ||
export default value | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
declare module "*.hdr" { | ||
const value: string | ||
export default value | ||
} |
Uh oh!
There was an error while loading. Please reload this page.