PBR Looking Flat + Enviroment Lighting not working

Questions
1

Hi Babylon! I’ve seen several “PBR Looking Flat” posts, but none have solved my issue. I’m coding in Visual Studio and need help fixing the problem. Here’s my current code:

main.ts
```ts
import {
Engine,
Scene,
FreeCamera,
Vector3,
HemisphericLight,
MeshBuilder,
PBRMaterial,
Texture,
Color3,
CubeTexture
} from “@babylonjs/core”;

const canvas = document.getElementById(“renderCanvas”) as HTMLCanvasElement;
const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new FreeCamera(“camera”, new Vector3(0, 1, -5), scene);
camera.attachControl(canvas, true);
camera.speed = 0.25;

const hemiLight = new HemisphericLight(“hemiLight”, new Vector3(0, 1, 0), scene);
hemiLight.intensity = 0.7;

const envTexture = CubeTexture.CreateFromPrefilteredData(“./assets/skybox/sky.env”, scene);
scene.environmentTexture = envTexture;
scene.createDefaultSkybox(envTexture, true);

const ground = MeshBuilder.CreateGround(“ground”, { width: 10, height: 10 }, scene);

const asphaltPBR = new PBRMaterial(“asphalt”, scene);
asphaltPBR.albedoTexture = new Texture(“./assets/materials/asphalt/asphalt_diffuse.jpg”, scene);
asphaltPBR.bumpTexture = new Texture(“./assets/materials/asphalt/asphalt_normal.jpg”, scene);
asphaltPBR.metallicTexture = new Texture(“./assets/materials/asphalt/asphalt_ao_rough_metal.jpg”, scene);
asphaltPBR.useAmbientOcclusionFromMetallicTextureRed = true;
asphaltPBR.useRoughnessFromMetallicTextureGreen = true;
asphaltPBR.useMetallnessFromMetallicTextureBlue = true;
asphaltPBR.environmentIntensity = 1.5;

ground.material = asphaltPBR;

const ball = MeshBuilder.CreateSphere(“ball”, { diameter: 1 }, scene);
ball.position.y = 1;

const ballPBR = new PBRMaterial(“ballPBR”, scene);
ballPBR.albedoColor = new Color3(1, 0, 0);
ballPBR.metallic = 0.2;
ballPBR.roughness = 0.6;
ballPBR.environmentIntensity = 1.5;

ball.material = ballPBR;

engine.runRenderLoop(() => scene.render());

window.addEventListener(“resize”, () => engine.resize());
```

When testing it; it does show the textures and enviroment textures; but it looks.. flat, it doesn’t fit, the enviroment lighting isn’t working, just looks like this, how can I solve the issue?

image
image722×621 91.6 KB

2

looks normal to me based on your material settings.. If you want more reflections then lower the roughness. Also metallic is almost never some value between 0 and 1 , its either 1 metallic or 0 everything else :wink:

3

Thank you! Did mess around with the roughness and it does get the effect! Just have one more topic, before I mark this as solution how do I make it more in high-quality; do I find more higher res textures? and do.. updateSamplingMode(Texture.TRILINEAR_SAMPLINGMODE)?

image
image1120×753 313 KB

4

i meant the roughness on the ball :wink: for the asphalt to get proper rendering it would require a proper roughness map, it cant just use a uniform roughness for the entire surface.

getting textures to look more crisp at very close camera distance does require higher res textures. Internally 3D engines will create mip maps to handle rendering from different mips, great for things rendered at a distance not flickering and looking noisy , but it can only go as big as the biggest you gave it when up close :wink: