Add envmap generation for environments

[msfeldstein]

PBR materials, particularly anything metallic, don't look good without an envmap. They are very dark. With this change, an envmap will be automatically generated with the environment component, and applied to any materials in the scene. Here is an example of a before and after.

[msfeldstein]

i realize that this probably won't bundle properly, having includes in the index.js. If this is something you think would belong in this component we can figure out a solution, otherwise i can package this up as its own optional sibling component

[donmccurdy]

Nice work! I'll leave to others whether this should be part of the environment component but my hunch would be a separate component makes best sense. A few other comments:

1. Better to use object3dset event instead of model-loaded, to catch meshes added outside of loaders.
2. Why scene.remove(this.el.object3D) and then reattaching? I don't think that should be needed, but note it triggersobject3dset events if you implement (1).
3. Looks like the camera is located at 0,0,0, and some reflections are under the ground plane. Maybe use 0,1.6,0 instead, or default camera position? Or if doing a separate component, could include a property for this.
4. In applyEnvMap() I would take an argument for the root node, and only traverse that. This would avoid re-compiling more shaders than necessary. Maybe also limit to PBR materials and handle multi-materials:

var materials = Array.isArray(mesh.material) ? mesh.material: [mesh.material];
materials.forEach((material) => {
  if (material.isMeshStandardMaterial) {
    material.envMap = this.envMap;
    material.needsUpdate = true;
  }
});

If you go the separate component route, could also include some more options:

<a-scene env-map-generator="sourcePosition: 0 1.6 0;
                            near: 0.1;
                            far: 1000;
                            resolution: 512;">
</a-scene>

Could also attach the component within the scene, to have an inherent position.... can't decide if I prefer that vs this scene-level singleton syntax.

[msfeldstein]

the reason i removed the environment elements is because i didn't want to apply the envmap onto anything inside the actual environment objects. A better way will be to just check if the environment component is an ancestor of the object im traversing. I'm going to pull this into a separate compoenent and will post a link here.

[msfeldstein]

So talking with @donmccurdy a bit in the slack, and if this is a separate component, we need a way to target just the environment elements (actually we need it if its built in too). We were thinking we could add an "environment-object" class name or something to all the children in this component, so when people add an environment map they can target all .environment-object's and anythign else they want in the reflections. This is necessary because if you add environment component to the a-scene element, there's no way to get just the environment tags, and not the rest of the scene.

[feiss]

Dude, this is brilliant, thanks for making this. Yup, I agree with @donmccurdy and I think this should be a separated component, so everybody can benefit from it, not only environment-component users.

Yup, I do agree on adding a classname to the entities in this component. Will do it asap.

[msfeldstein]

Cool I have a separate component set up. Let me know when you add classnames so I can finalize and publish mine

…

On Tue, Mar 20, 2018 at 5:14 PM Diego F. Goberna ***@***.***> wrote: Dude, this is brilliant, thanks for making this. Yup, I agree with @donmccurdy <https://github.com/donmccurdy> and I think this should be a separated component, so everybody can benefit from it, not only environment-component users. Yup, I do agree on adding a classname to the entities in this component. Will do it asap. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/feiss/aframe-environment-component/pull/38#issuecomment-374800337>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJ1b35STs-i_6oUoeLzep5l8XODheCKks5tgZtlgaJpZM4SvfHO> .

[feiss]

done! environment-entity added to all entities

[msfeldstein]

looks very cool, but you mark this.el with the class, and this.el is the scene element a lot of times (for example in the examples set up via angle). This would cause everything in the scene to be captured.

[donmccurdy]

Also minor nit i would vote for just environment as the classname, i think object or entity is implied. 😇

[feiss]

yeah ok! environment class, removed from this.el 👍

[feiss]

oh @msfeldstein , when you have the component ready, could you open a PR here modifying the README, explaining how to use it with the environment? thanks a lot!

(Add a section called sth like "Environment Map Generation" before the "Performance" section, for example)

[msfeldstein]

Here's what ive got so far. I don't want to publish this until this aframe-environment-component pushes a new version so people can get the latest with the class names. It does work great though!

https://github.com/msfeldstein/aframe-environment-map-component/blob/master/README.md