How to handle differences in viewing screens with Babylon.Js

I recently have been playing with a couple of old laptops (which most people use now-a-days ?). One of them is a “Lenovo Legion” which has an I5 CPU (8th generation) and a separate NVidia 1050 video card and is quite capable of 60 fps in my worlds. The other is an older “Toshiba Satellite” - an i3 with no separate video card but is capable of 30fps with my worlds.

However, the displays on both of them are very shiny/glossy/lots of reflections and can be difficult to see unless I am really sitting in a very dark room. The scene lighting also seems different from my desktop PC and Samsung monitor.

Does BJS have a way of handling this?

cheers, gryff :slight_smile:

I think this probably also a problem for more than just your scenes, right? Either playing with any hardware controls to adjust the screen, or with your OS might be the first step, if you have not already done so. Like this on Windows10

I seem to remember a topic about making things B/W for color blind, or something, maybe on the old site. I did change the black/white post process to allow degrees of color in the ancient past using a (0 - 1) variable. If you think that might be work trying, I could maybe try to find that topic.

2 Likes

@JCPalmer : Yes Jeff. everything I look at :frowning: I have a feeling that I read somewhere about screen lighting (back lit/side lit?)

It is not so bad in a darkened room, so maybe I will give your suggestion a try by playing with Windows 10. Not that I will use them a lot - just more or less for testing impact of meshes, draw calls, and animations in scenes on the frame rates.

cheers, gryff :slight_smile:

I forgot about Image Processing. I actually made something (unpublished) that allowed you to edit in scene, then write out the source code to make it happen (Report Button). Here are a bunch of settings, some at the extreme of the parameter, and the code to make that adjustment.

The code examples are simple enough such that you can add the code, and trial and error numbers from 0 - 1 for the exposure, contrast in place of the sliders. You do not need to use all of them.

First is base line of doing nothing:


You can turn on Tone mapping. Standard does not do much, but here is ACES:

let ip = scene.imageProcessingConfiguration;
ip.toneMappingEnabled = true;
ip.toneMappingType = BABYLON.ImageProcessingConfiguration.TONEMAPPING_ACES;

Here is contrast close to turned all the way down:

let ip = scene.imageProcessingConfiguration;
ip.contrast = 0.0098;

Here is exposure close to turned all the way down:

let ip = scene.imageProcessingConfiguration;
ip.exposure = 0.0031;

Here is just it on as a post process:

let ip = scene.imageProcessingConfiguration;
ip.applyByPostProcess = true;

I think the most important factor by far is screen brightness and to a lesser degree contrast. To see the screen outside or in high light conditions you need really high brightness, while an enhanced contrast ratio can help distinguish stuff a little bit.

@jeremy-coleman : I gather that Jeremy, just that somehow I don’t like the idea that people have to keep adjusting their computers to view different scenes. And does that adjustment stop the screen reflections of the room around the computer?

cheers, gryff :slight_smile:

Maybe an anti glare screen cover or new monitor to stop the reflections? Never used a screen cover but only a few dollars on amazon, so maybe worth a shot. Brightness will kind of drown it out too, for example you see reflections on your tv when its off but not so much when you turn it on

1 Like