Mixing two env map into a forked MeshStandardMaterial

Resources
1

Since someone recently asked me how to mix 2 different environments in the same material (reflections), I’m reposting the proposed solution here.

Note: For a better effect, more generally supported, it would be preferable to mix the 2 environments in a render target. But if for some reason this is not desired (for example to push the effect further (eg fake caustics or whatever)), this solution remains an interesting avenue.

The project is created with next-js, (using react), but the code for three.js is encapsulated in a dedicated module.

Btw, any comments appreciated, thx.

2 Likes
2

Excellent.

A very useful behavior. I have always hoped that we could get a more pluggable API for this kind of effect, which I guess the wip material nodes may address.

Have you considered implementing this as a shader injection via onBeforeCompile?

It seems to me like the actual code modification might be rather minimal, and cleanly achieved with a little surgery on a shader chunk?

Like… editing the:

#include <envmap_common_pars_fragment>
#include <envmap_physical_pars_fragment>

chunks?

Then the behavior could perhaps work across all material types, without having to swap out materials etc.

3

Hi jniac,
that is awesome - works really great.thanks for sharing.
Is it possible to use an equirectengular 360 hdr image as an input within your setup?
Answer-YES *just found out about it.

 const pmremGenerator = new PMREMGenerator(three.renderer)
  const env1 = await loadRgbe('https://threejs.org/examples/textures/equirectangular/royal_esplanade_1k.hdr')
  const env2 = await loadRgbe('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')

Would it be hard to add another layer, a third one, on top?
This way it would be using 3x360 hdr images with an additional slider for mixing them.

Thanks for sharing your insights.
Will have a closer look at the three.js code.