Create Scene without light rendering

Hi,
I try to create an inspector where the loaded mesh is shown with just one material (e.g., normal map). There should also be no light rendering, similar to the windows viewer (as seen below). My mesh material is a pbr material, so I can not just set the environment texture to null. I asign the (normalMap) material as following:

pbrMaterial = <PBRCustomMaterial> mesh.material;
pbrMaterial.albedoTexture = pbrMaterial.bumpTexture;
pbrMaterial.emissiveTexture = pbrMaterial.bumpTexture;
	
mesh.material = pbrMaterial;

How can I recreate some rendering like the one shown?

If you set the normal map as emissive, it shouldn’t need lightning at all: Available Mesh BoomBox | Babylon.js Playground (babylonjs.com)

1 Like

I did it with this line, didn´t I?
pbrMaterial.emissiveTexture = pbrMaterial.bumpTexture;

Yes, are you having any problems with it?

yes, when I do that, it is just black (set environmentTexture = null)

@Marci_Ar , you can also use NME to create a material that shows the normal without been affected by light. Here is an example on how to do that:

Babylon.js Playground (babylonjs.com)

Is it right that your PG looks like this?

Sorry, I forgot to assign the textures to the material copy, to the main one. They normal maps from the last mesh were overriding the ones from the preview’s ones. Here is the updated playground:

Babylon.js Playground (babylonjs.com)

3 Likes

It shows multiple errors like
The property “normalTexture” does not exist for the type “Material”

Are you using typescript in you application? You might need to do the proper casting of object in that case, also if you know you material will be of type PBRCustomMaterial you completely remove the “if(meshes[i].material.normalTexture)” case.

Here is the typescript version of the example:

Babylon.js Playground (babylonjs.com)

2 Likes

yes, I use typescript. My material should be of type PBRMaterial, not PBRCustomMaterial.

Thank you! I don´t know why, but for me in line 20 it throws an error (The type “NodeMaterial” cannot be assigned to the type “Nullable< Material >”). So it seems that at this point my material is suddently of type “Nullable< Material >”?

This shouldn’t happen, because NodeMaterial extends from Material. @RaananW any idea of what Typescript wizardry is happening here?

1 Like

Do you mean in the PG or in your code?

1 Like

In my code

can you share more info? repro in the pG?

3 Likes

It is a little difficult to reproduce the whole thing in the PG, so here is some more of my code. If this is not helpfull, I will try it again with the PG.

public async loadAsset(baseUrl: string, file: string | File): Promise<void> {
		if (!file) return;

		try {
			// SceneLoader.LoadAssetContainerAsync() declaration only allows for string as
			// sceneFilename parameter but under the hood it handles it as string | File just like
			// the LoadAssetContainer() which it calls internally.
			const anyFile = file as any;

			// LoadAssetContainer hides the loading screen but never shows it
			// here we display it and it will be hidden by LoadAssetContainer
			SceneLoader.ShowLoadingScreen = true;
			SceneLoader.ForceFullSceneLoadingForIncremental = true;
			this._scene.getEngine().displayLoadingUI();

			const container: AssetContainer = await SceneLoader.LoadAssetContainerAsync(baseUrl, anyFile, this._scene);

			const mat = await BABYLON.NodeMaterial.ParseFromSnippetAsync("2BYIK5#1");
		
			for(let i = 0; i < container.meshes.length ; i++) {
				let materialInstance = mat.clone("materialClone");
				let originalMaterial = <unknown> container.meshes[i].material as BABYLON.PBRCustomMaterial;
				const textureBlock = materialInstance.getBlockByName("Texture") as BABYLON.TextureBlock;
				if(container.meshes[i].material){
					if(originalMaterial.bumpTexture){
						textureBlock.texture = originalMaterial.bumpTexture as BABYLON.Texture;
					}
				}
				
				container.meshes[i].material = materialInstance;
			}	
		    if (container) {
				this._assetContainer?.removeAllFromScene();
				this._assetContainer = container;

				let bbMin = new Vector3();
				let bbMax = new Vector3();
				TurnerViewer._computeContainerBB(this._assetContainer, bbMin, bbMax);
				this._assetContainer.addAllToScene();
				this._updateSceneSettings(bbMin, bbMax);
				this._fitCamera();
				this._updateSkybox();
				this._updateCameraPanningSpeed();
				if (this._shadowToggle) {
					this._createShadowComponents();
				}
				this.originalFile = file;
				this._scene.getEngine().hideLoadingUI();

				if (window.location.search.match(/(\?|&)profile=(1|true|on)/)) {
					this._scene.executeWhenReady(() => this._profile());
				}
			}
		} catch (e) {
			console.error(e);
		}

	}

Which line there is throwing the error?

This one:
container.meshes[i].material = materialInstance;