GithubHelp home page GithubHelp logo

oframe / ibl-converter Goto Github PK

View Code? Open in Web Editor NEW
43.0 3.0 6.0 1.56 MB

IBL map converter for PBR

Home Page: https://oframe.github.io/ibl-converter/

License: MIT License

HTML 2.04% JavaScript 97.38% CSS 0.58%

ibl-converter's Introduction

O-GL


IBL Converter For PBR

Generate IBL maps for use with PBR shaders.



Use this to convert different environment maps into the required formats for use in a PBR render.

Link here

Overview

Drag and drop an equirectangular environment map to generate the two necessary textures for adding Image Based Lighting to PBR shaders.

Made for use with the OGL PBR example shader, however can be plugged into any framework.

Supported input types:

  • .hdr (Radiance/RGBE), which outputs a .png in RGBM format. This conversion takes the HDR (high dynamic range) values and converts them into the RGBA channels of an 8bit PNG (8bit per channel = 32bits); the output PNG will likely look mostly transparent when previewed directly.

  • .exr (OpenEXR), which outputs a .png in RGBM format. Same output as above.

  • .jpg/.png (sRGB) bitmap, which outputs a .png in sRGB format. This is an SDR (standard dynamic range) format.

Output files:

  • Irradiance Diffuse Map. Currently outputting at 128x64, however can likely go smaller with no quality drop. This map is pre-filtered and hence looks very blurry. It gives the average diffuse lighting in a given direction.

  • Radiance Specular Map Atlas. Currently set at 512x512, which is ok for most cases but not close-up reflections. If wished, this setting can be increased in Specular.js. This map is an atlas made up of 7 sequentially prefiltered renders, each half the size of the previous - used to simulate varying roughness levels in the PBR render. The renders are stacked vertically, with the bottom half of the texture being the first, non-filtered level.

When you hit the download prompt, the two maps will be downloaded to your local file system. The downloaded files use the following naming structure:

[input filename]-[map type]-[output format].png

eg. sky-diffuse-RGBM.png and sky-specular-RGBM.png

TODO

  • feature small library of pre-generated maps
  • Reduce artifacts at the poles
  • Allow user to select output type

ibl-converter's People

Contributors

gordonnl avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

ibl-converter's Issues

RGBM or RGBE?

Looking at the code, RGBM is mentioned as the encoding, but loadHDR seems to just be returning the HDR data as RGBE still(there's a mention of RGBA, but my understanding is that the alpha channel 8-bits covers the E exponent values, so no difference other than purpose of channel data).

RGBM is meant to be use the alpha channel as a multiplier instead of an exponent. This afaik requires a constant for the range of 0-M that is mapped to the alpha channels 0-255 values. Such as RGBM16 would support an EV range up to 16 for HDR inputs/exports(still learning about RGBM, I may be incorrect about that constant mapping to EV range). Unity Engine uses RGBM5 iirc, wheras I've also seen 6,7,9 in use, which requires the shader to match that value for reconstruction.

This constant doesn't appear to be used here, so is it really RGBM? Or is the alpha channel encoding the exponent still?

EDIT: According to a comment on this article, the supported EV range is gamma^M, although their input doesn't seem to produce the claimed value, M^gamma does(gamma^(M-1) is close but not quite correct). This gives Unity's M5 a range up to 34.5 from what I understand which should be sufficient for most needs.

EDIT2: Further confirmed with the official Unity docs, they clear up that the range of 34.5 is for linear space, and 0-5 in gamma space.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.