Single color environment for relfections

[IRobot1]

My understanding is that for a material to reflect, there has to be a environmental background. I know that SOBA includes environment for setting the scene background using HDR image. However, when background isn't visible, this causes objects to reflect something that isn't in the scene.

Does the SOBA environment support the ability to pass in my own HDR file?

Is there a possibility to create a fixed color environmental background for reflections? The color would default to white, but could be tinted as needed.

[nartc]

@IRobot1 there will be updated to the Environment component in Soba and will most likely be similar to this https://drei.pmnd.rs/?path=/story/staging-environment--environment-story

[IRobot1]

Ok, so no support for non preset files.

The following code is failing and I can't figure out why.
GET http://localhost:4200/assets/piza/p 404 (Not Found).
GET http://localhost:4200/assets/piza/x 404 (Not Found).
GET http://localhost:4200/assets/piza/ 404 (Not Found)
GET http://localhost:4200/assets/piza/n 404 (Not Found)
GET http://localhost:4200/assets/piza/g 404 (Not Found)

It seems to be breaking the strings into individual characters and using that as the file name.

  constructor(private loader: NgtLoader) {
    const files= [
      'px.png',
      'nx.png',
      'py.png',
      'ny.png',
      'pz.png',
      'nz.png',
    ]
    this.loader.use(CubeTextureLoader, files, (innerLoader) => {
      innerLoader.setPath('assets/piza/');
    }).subscribe(next => {
    });
  }

[nartc]

You would want to do: this.loader.use(CubeTextureLoader, [files]...) instead.

[IRobot1]

files already is an array.

[nartc]

It still needs to be put in an array

[IRobot1]

[nartc]

It is a bug with the typings of NgtLoader. You can force it with as string[]

[IRobot1]

That fixes the syntax error, but still no luck

Note that the following direct use of CubeTextureLoader works fine

    const files = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
    const ldrCubeMap = new CubeTextureLoader()
      .setPath('assets/white/')
      .load(files, function () {
        ldrCubeMap.encoding = sRGBEncoding;
      });
    this.texture = ldrCubeMap;

[nartc]

Weird. Because that's how the Environment component is doing.https://v5--angular-three.netlify.app/soba/?path=/story/staging-environment--files

[IRobot1]

Is there a possibility to create a fixed color environmental background for reflections? The color would default to white, but could be tinted as needed.

Using a preset background for reflection, you get this.

It is possible to have a white environment background. However, without directional or spot light lights, the result is a flat color with a white border.

Here's the settings I used for the mesh

<ngt-mesh [position]="[0,2,0]" castShadow>
  <ngt-sphere-geometry></ngt-sphere-geometry>
  <ngt-mesh-standard-material metalness="0.9" roughness="0.1"
                              color="violet"></ngt-mesh-standard-material>
</ngt-mesh>

However, after adding a point light, it looks better

<ngt-point-light ngtPointLightHelper [position]="[2,3,2]" color="red"></ngt-point-light>

Here's the code to load and set the scene environment to a white background.

    const files = ['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png'];
    const ldrCubeMap = new CubeTextureLoader()
      .setPath('assets/white/')
      .load(files, function () {
        ldrCubeMap.encoding = sRGBEncoding;
      });
    scene.environment = ldrCubeMap;

This this white image for all 6 files.

It should be possible to modify this to extract the image from a temporary 2d canvas filled with a color tint (or white).

Using this gray background removes the washed out edges