Code Monkey home page Code Monkey logo

hdre.js's Introduction

HDRE: HDR file format for 3D environments

Description

A HDRE is a binary file containing the information of a cubemap environment and some of the computed mipmapped versions needed in Photorealistic Rendering (PBR) to simulate different materials (Prefiltering steps). It also contains other information as the values for the spherical harmonics (since v1.5) or the maximum luminance.

Since v2.0 there is an available version for C++ applications.

Examples irradiance/reflection

PBR Irradiance and reflection probes rendered using HDRE files

To create images you must use the HDRETool or download them from the HDRERepository.

Structure

Header

Contains all the HDRE properties. Default size: 256 bytes [v2.0].

Property Size
Header signature ("HDRE") 4 bytes
Version 4 bytes
Width 2 bytes
Height 2 bytes
Max file size 4 bytes
Number of channels 2 bytes
Bits per channel 2 bytes
Header size 2 bytes
Encoding (LE) 2 bytes
Maximum luminance 4 bytes
Data type (UInt, Float..) 2 bytes
SH (9 coef) [v2.0]

Pixel data

The maximum size of a texture stored in HDRE is 256x256 pixels per face. Each prefiltered level is stored using half the size of the previous one so it is possible to store them in the mipmaps of the original image. In the case of a 256 sized HDRE, the mipmap levels would be:

  • Original image: 256x256
  • Mip1: 128x128
  • Mip2: 64x64
  • Mip3: 32x32
  • Mip4: 16x16
  • Mip5: 8x8

Note: Faces are stored individually, removing empty spaces when using cubemaps.

HDRE pixel storage HDRE pixel storage

hdre.js's People

Contributors

jagenjo avatar jxarco avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

hengle

hdre.js's Issues

V2.0 with lots of fixes

Some requirements:

Better HDRE data JS object

Instead of a strange object with fields like header (??) and _envs (????), what about an object with all the info, descriptive names, etc, like size, num_channels, and skip useless fields like signatura (???).

Data object have to be easy to use to others, not easy to code for you, remember that the file format should never impose an object representation of the data. The data object is the important element, the file format is just a medium.

Also, instead of returning a generic JS object, what about returning a class like HDREImage object? with some methods like toTexture(), flipY() etc.

Remove any flip Y requirement

All cubemaps must be stored in a way that are direct to upload to the GPU without requiring to flipY (as firefox do not supports it and it is very slow to do it manually).

Spherical harmonics

Force that all files must have ALWAYS spherical harmonics, and be sure no HDRE in the database doesnt have them.

Creating HDRE from the library itself

Currently you need to use HDR4EU Studio to create them. But I may have a regular HDR cubemap, or a EXT image, and I want to create my HDRE file from my application (for instance to create reflection probes of realtime rendered scenes).

I need an easy way to call HDRE.createHDRE( texture ) passing the texture and get the HDRETexture object. If it require to include an EXR library it is ok.

Include shader snippets

Add some shader examples in the library to make it easy for people to include, like:

HDRE.shader_read_cubemap = " vec3 readCubemap( samplerCube texture, float roughness ) .... ";

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.