Theoretical Question: Is it possible to color mix the RGB channels of an envmap?

Questions
1

Has anyone ever mixed the RGB channels of an envmap (hdr) and applied them back to an env-sphere (equirectengular)? As far I understand three.js the size should be 2:1 (2048x1024) for fast processing.

If it’s possible what would be the best option performance-wise?
Thanks.

2

“Color-mixing” a high dynamic range (HDR) texture is not as simple as working with a standard [0,1] image… if you are not pretty careful here it’s easy to clamp the range of the texture so that it no longer works correctly as a light.

With that bit of caution, if you wanted to do this in a GLSL shader you could render a fullscreen plane filled with the HDR texture, apply the operations in GLSL, and render to a float or half-float render target, using LinearEncoding and without tone mapping to preserve the dynamic range.

1 Like
3

Do you know if there is an working example somewhere?
For now the closest I’ve found is the rtt example: https://threejs.org/examples/?q=texture#webgl_rtt

4

I’m not aware of any easy examples of this sorry. Perhaps some of the post-processing code and pass implementations in the three.js source code.

5

I will figure it out - thanks for your help. I might ask some other questions along the way :slight_smile:

6

Hi don,
I’m a total beginner in terms of GLSL coding.

Just to understand your point; you were referring to something like this?
https://jsfiddle.net/Eketol/ynsLrwg6/
In combination with the rtt demo it might be something (?)

7

That looks about right, yes — You’d use RTT with float or half-float output to retain the HDR range of the result.

8

Another idea just popped into my head
Is it possible to use a PhysicalMaterial with Emissive/Lightmaps as the environment shader?
Thanks.

9

Perhaps — what effect are you going for? Depending on the goal, two more common approaches would be:

  • (A) use THREE.CubeCamera to render an environment from the scene itself
  • (B) generate the environment map from a separate, static scene (example: THREE.RoomEnvironment)

These tend to be expensive enough that you don’t want to update the environment map on every frame. There are some tradeoffs in terms of performance, environment map resolution, and quality.

10

I’ve got two exr’s mixing as highp float. but for some reason I can’t get the gamma correct.
Can anyone spot my mistake? ty
https://jsfiddle.net/gree303/z4e1jmbk/37/

Also when I try adding GUI the scene won’t load anymore… can’t tell what’s wrong with it

Update: This setup does work for two images:

vec4 col1 = texture2D(texture3, vUv);
vec4 col2 = texture2D(texture4, vUv);
col2 = col2.a > 0.5 ? col2 : vec4(0, 0, 0, 1);
gl_FragColor = mix( col1, col2, 0.5 );
https://jsfiddle.net/gree303/z4e1jmbk/42/

But how do you “mathematically” mix multiple images, more than two? Anyone with math expertise here willing to give me some extra lesson? Thanks.

I’ve found this great in detail description; but they are mixing always just two images.
https://www.khronos.org/opengl/wiki/Texture_Combiners

11

thanks @ Reto Koradi
https://stackoverflow.com/questions/24356075/glsl-shader-interpolate-between-more-than-two-textures

…i will try this; sounds like the solution i was looking for.

Update: I tested it; but for some reason I can’t get it working with a mix of 3 like described.