Environment map rotation

[mkeblx]

Model element supports setting a environment map via the environmentMap attribute.

Something very useful is the ability to set the rotation of the env map, as the initial rotation an env map is often arbitrary and not what a creator desires. I think this would be pretty crucial to support.

What are thoughts on how this could best be supported? Here's one idea.

<model environmentmap="envmap.hdr" environmentrotation="180">
   <source src="model.glb">
</model>

Here restricted to rotation around the y-axis.

Some references:

• Three.js: https://threejs.org/docs/#api/en/materials/MeshStandardMaterial.envMapRotation
• Blender: not supported out-of-the-box, but simple to add two nodes to rotate

[zachernuk]

this is a great topic! My general thoughts are that this will be a relevant thing to do for some time, but I'm conscious that it opens the door to multiple global IBLs, potentially have selective IBLs influencing different parts of the scene etc.

And beyond that, IBLs are the best we can offer folks, but it might only be a few years before something more sophisticated is practical - though we do need to make something work for today!

/agenda

[mkeblx]

I agree that creators will want more lighting control including including selective influence, among other things.

I linked to the above three.js per material envMap rotation control but I meant to link to the per scene control: https://threejs.org/docs/index.html#api/en/scenes/Scene.environmentRotation

I hope we could get pretty far with some basic additions to the lighting setup, but with an eye towards what we can do in the future.

[mkeblx]

During the call, it was in general agreed that this makes sense to support. Some additional points made:

• we want to not restrict to an axis, but allow fully rotation control
• Euler angles are simpler but a Quaternion would have advantage for animating
• DOMPoint would be a good candidate for the type
• only exposing as a JS property would avoid issues with string serialization, and usually content attributes are for a single value
• a new type like a ~DOMQuaternion could be useful for the helper methods it could offer (example), but that would be a new set of work

With this in mind, this below could work, only exposed as a JS property:

const rotation = new DOMPoint(x, y, z, w);
modelEl.environmentMapRotation = rotation;