Scene lighting is now impacted by changes to the environment map in the latest r131 update

In my latest project, I am showcasing various models in a general scene. These models are created with different materials such as MeshPhongMaterial, MeshStandardMaterial, or sometimes both.

The scene is illuminated by an AmbientLight and a DirectionalLight that always aligns with the camera’s direction for better visibility.

To enhance the appearance of the models using MeshStandardMaterial, I incorporated an environment map into the scene rather than directly onto the materials, which resulted in a satisfying outcome.

Initially, in version r130, the models appeared as follows (Phong material on the left, Standard material on the right): https://i.sstatic.net/X3cZG.png

However, after upgrading to r131, the rendering changed significantly: https://i.sstatic.net/Pk07g.png

This alteration was attributed to the automatic conversion of environment maps to PMREM in r131, which affected the overall lighting of the scene. While this may be technically accurate, it disrupted the visual coherence of my scene.

Upon receiving advice to eliminate ambient and directional lights due to the new reliance on environmental lighting, the results were inconclusive: https://i.sstatic.net/3ciYS.png

Removing only the ambient light yielded some improvement but did not fully solve the issue: https://i.sstatic.net/mr6Xu.png

My main concern now is whether there is a method, albeit non-physically correct, to apply an environment map solely for reflective purposes without altering the overall scene illumination?

If you wish to access the code for this particular project, please refer to the following link: https://github.com/kovacsv/Online3DViewer/blob/dev/sandbox/three_envmap_issue/three_viewer.html

For a live demonstration of the scene, click here:

Answer №1

Is there a way to apply an environment map that only affects reflections of standard materials without changing the lighting of the scene, even if it's not physically accurate?

Unfortunately, no. The current PBR workflow with MeshStandardMaterial and MeshPhysicalMaterial does not allow for separate treatment of environment maps. Previous setups that did not follow physical accuracy have been updated, and there are no plans to revert to those workflows. Environment maps are intended to be used as IBLs, so they will always affect the lighting in some way regardless of how you configure the material.

If you need to achieve your desired effect, consider using phong materials or adjusting the lighting in your scene to match the new standards.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Regular Expression: Identify specific characters at the start or end of a string

I am in need of a regular expression (regex) that can precisely match the char set 'AB' only if it is at the beginning or end of a string, and then replace it with an empty string. It is important to note that the regex should not match parts of ...

Having trouble resolving a setInterval problem with JavaScript?

Yesterday, I learned about the setInterval function which allows me to execute a task or function after a specific amount of time. While I have successfully implemented the interval in my code, it keeps adding new lines with the date each time. What I re ...

What are some solutions for troubleshooting a rapid-moving Selenium web driver?

My code is not functioning correctly and I need a better solution. The fast speed of execution makes it difficult for me to detect where the issue lies. Below is my current code: public static void main(String[] args) { //**************************** ...

Cities cannot be obscured by a rotating globe

In my latest project, I have created a jsfiddle showcasing a Bostock spinning globe implementation. After successfully plotting a few city markers, I encountered a problem where not all cities were being displayed. Additionally, the script intended to hid ...

Troubleshooting the issue with the default dropdown select in AngularJS

var jsonData ='[ {"type":"product", "id":1,"label":"Color", "placeholder":"Select Jean Color", "description":"", "defaultValue":"Brown", "choices":[{ "text":"Denim", "price":"$0.00", "isSel ...

The error message in AuthenticatedLayout.jsx on line 43 indicates a problem with trying to access properties of an undefined object, specifically the 'name'

I am encountering this issue react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of undefined (reading 'name') at AuthenticatedLayout (AuthenticatedLayout.jsx:39:55) AuthenticatedLayout.jsx import { useState } from "re ...

Is it possible for a form to direct submissions to various pages depending on the value of certain fields

I need to set up a text field and submit button that will redirect users based on their input: index.html: If the user inputs "123" in the text box and clicks submit, they should be redirected to john.html page. AND If the user inputs "456" and clicks s ...

The v-list-group does not automatically expand sub-groups based on the path specified in the group prop

I have a navigation sidebar that includes nested v-list-groups. Based on the documentation, the "group" prop of v-list-group should expand based on the route namespace. To see more information, visit: https://vuetifyjs.com/en/components/lists/ While this ...

Angular - Async function does not resolve a rejected promise

Currently, my component utilizes an async method for handling file uploads. Here is an example: //component uploadPhotos = async (event: Event) => { const upload = await this.uploadService.uploadPhotos(event, this.files, this.urls); } The UploadSe ...

Unable to execute simple demo on the threejs.org platform

As I delve into learning three.js, I came across some examples worth exploring. One specific code snippet I attempted to execute can be found here. Unfortunately, all I saw was a blank black screen. To troubleshoot, I adjusted the three.js source to my lo ...

"Enhance Your Website with Multiple Video Streams using YouTube API Events

Hello everyone! I am looking to include multiple videos on my website and have them start playing automatically when a user scrolls and the videos are in view. I want the speakers to be muted by default using the mute() function. Previously, I had succes ...

Utilizing webpack, gulp, and typescript to efficiently incorporate jQuery plugins

I'm having trouble figuring out the correct way to load third-party libraries that have dependencies on each other. I am using TypeScript and Gulp with either Webpack or SystemJS for my module loader, both of which are throwing similar errors in this ...

Material UI - sending an icon as a property

I need help with inserting a material-ui icon into my component using props. Can you please advise on what I might be doing wrong? I am struggling with passing the icon down in JSX, and here is the attempt that is not working: This code snippet shows me t ...

Steer clear from using the implicit 'any' type while utilizing Object.keys in Typescript

I have a unique situation where I need to loop over an Object while maintaining their type without encountering the error "Element implicitly has an 'any' type because 'ContactList' has no index signature". Despite extensive discussion ...

What is preventing me from "importing" react-dom.js?

Implementing ReactDOM into my Jest tests has been a bit of a challenge. Let's take a look at the code snippet below. const React = require('../src/js/vendor/react/build/react.js'); const ReactDOM = require('../src/js/vendor/react/build ...

What could be the reason for not receiving any response from my Firestore query?

Hey there! I'm delving into the world of Firebase for the first time and just set up the Firestore emulator. I've added some data that I want to fetch in my Nextjs app. Once I initialized firebase, this is what my component code looks like: funct ...

A compilation of category listings derived from two arrays of objects that share a common parent ID

I have a challenge with two arrays of objects connected by a parent ID. My goal is to create a categorized list where each category contains the corresponding data set. The structure should consist of a header (category) followed by buttons (data) related ...

Is it permissible to assign the same element as a child to multiple parent elements in jQuery?

Imagine you have the following HTML structure: <div id="first"></div> <div id="second"></div> Now, if you use JavaScript and JQuery to perform the following actions: var $child = $("<span id='child'>Hello</span ...

The Johnny-Five stepper initiates movement within a for-loop

I am new to using node.js and johnny-five. I want to move a stepper motor 5 times with 1000 steps each. Here is what I have tried: do 1000 Steps in cw ; console.log('ready); do 1000 steps; console.log('ready') ... It woul ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...