Lookdev
A lot of things can happen when trying to transfer 3D scenes between render engines and 2D/3D authoring software.
To achieve a consistent & synchronized look, we built the same scene/setup in 5 different engines:
Unity, Godot, Babylon.js, Three.js and 3ds Max.
We wanted to compare the visual difference when all parameters are properly set - same scene, light, material & shader settings...
Spoiler! The rendered scenes 👇 look almost identical.
Use this website as a quick reference to fix:
- linear/gamma 2.2 sRGB color space issues
- textures that look washed out or too bright
- very dark colors or wrong contrast
- flipped textures or normal bump map channels
- wrong reflections (environment orientation)
- multi-channel map texture issues (01)
- PBR metal workflow issues (roughness/glossiness)
- visual differences when exporting from Blender/3ds Max to Babylon.js or Three.js (WebGL)
The Scene Setup...
We need a sphere, a camera and a light!
Sphere at [0,0,0] - Radius 1.0
Camera at position [0,0,5] - Look-At [0,0,0] (Front view)
Cam FOV 45° (vertical)
Directional light* at [5,5,5]- pointing towards center
*keep in mind: the actual position is not important for directional lights
Sphere Scale 2.0 ⚠️
FOV 45°
Cam Pos [0,0,5]
Light Directional
Sphere Radius 1.0
FOV 45°
Cam Pos [0,0,5]
Light Directional
Sphere Diameter 2 ⚠️
FOV 0.785 ⚠️
Cam Pos [0,0,-5] ⚠️
Light Directional
Sphere Radius 1
FOV 45️
Cam Pos [0,0,5]
Light Directional
Sphere Radius 1.0
FOV 72.735° ⚠️
Cam Pos [0,-5,0] ⚠️
Light Distant ⚠️
Sphere Radius 1.0
FOV 45°
Cam Pos [0,-5,0]
3 Elements - What could go wrong?
To give you an idea: Compared to Babylon.js, the Godot default sphere is twice as big!
There are different coordinate systems, wordings, gamma values, orientations and default settings we have to deal with.
In order to guarantee consistent results when comparing across all engines we need to carefully setup the same test scene.
⚠️ If you want to avoid potential traps, pay attention to the warning sign in the box (bottom left).
Useful tips
👉 When creating objects, always check the bounding box.
👉 Check the orientation (XYZ) (01)
👉 Is the cam using a horizontal or vertical FOV?
👉 Directional lights are a good start (simple setup)
Basic - Test Scene 01
Let's start with a white sphere, a neutral background and always identical viewport size.
Albedo color RGB(255,255,255) - White
Roughness 0.25
Metallic 0 (Dielectric)
Clear color RGB(128,128,128) - Gray
Ambient color RGB(0,0,0) - Black
Render Output
1024x576 Pixel (16:9 PNG Image)
Shader Standard
Smoothness 0.75 ⚠️
Light Rotation [145,-45,0]
Light Intensity 1.0
Shader SpatialMaterial
Roughness 0.25
Light Rotation [-35,45,0]
Light Energy 1.0
Light Specular 1.0 ⚠️
Shader PBRMaterial
Roughness 0.25
Light Vector [-5,-5,5]
Light Intensity 3.1415 ⚠️
Shader MeshPhysicalMat
Roughness 0.25
Light Energy 1.0
Shader Physical Material
Roughness 0.25
Light Targeted [0,0,0]
Clear Color (55,55,55) ⚠️
Shader pbr
Roughness 0.25
Light Matrix [0,0,0]
Light Energy 1.0
Texture - Test Scene 02
Albedo leather_albedo.png
Metallic leather_metallicsmooth.png ⚠️
Normal leather_normal.png
Albedo leather_albedo.png
Roughness leather_roughness.png
Normal Map leather_normal.png
Flip UVs (uscale/vscale) ⚠️
Albedo leather_albedo.png
Metallic leather_metallicrough.png ⚠️
Bump leather_normal.png (Invert X/Y)⚠️
Map leather_albedo.png
Rough. Map leather_roughness.png
Normal Map leather_normal.png
Sphere UV Phi Length 180⚠️
Albedo leather_albedo.png
Roughness leather_roughness.png - Gamma 1.0⚠️
Normal Bump leather_normal.png - Gamma 1.0⚠️
Normal Map leather_normal.png - Flip Green (Y)⚠️
IBL Metal - Test Scene 03
Scene rotation [0,90,0]⚠️
IBL Gold - Test Scene 04
Albedo RGB(255,195,86)
Smoothness 0.85⚠️
Color RGB(255,195,86)
Roughness 0.15
Color (1, 0.55, 0.09)⚠️
Roughness 0.15
Scene rotation [0,90,0]
Color RGB(255,140,23)⚠️
Roughness 0.15
Scene rotation [0,90,0]
Base Color (1, 0.55, 0.09)⚠️
Roughness 0.15