My best attempt to render beautiful crystals in Babylon.js can be found on playground page.
There are three problems:
The crystals don’t look too realistic ))
In Chrome, rendering is too light, but in Firefox – it’s too dark ))
Moreover, colors in Chrome and in Firefox noticeably different. In Chrome - red tint, in Firefox –cyan tint.
My questions are:
What would you recommend to get a more realistic crystal rendering (maybe the right Fresnel parameters would help - I don’t really understand where to get the right values)?
What would you recommend to render scene with same lightness and colors in different browsers?
Left: Firefox 129, right: Chrome 127.
Maybe you could provide screenshots, browser versions and check you are using the same renderer in both browsers (webglreport.com)?
Edit: also check for browser settings or extensions that alter colors, like dark mode
Didn’t try on PC. Incidentally, was just working on my MACs
EDIT: Just booted on my WIN10 to start my gaming session of the day … and … nothing to report for chrome (latest) on win10. I however cannot compare the color thingy accurately. I’ve got some fancy calibration and color settings. I don’t really want to set all back to the defaults (sry). Still, I hope this helps
EDIT1: Just comparing the 2 (chrome on windows VS firefox on mac) and I do not have a tremendeous change in colors. Here I’m using two different rigs/monitors but they are both calibrated the same and use the same color profiles for display. I mean there’s always a slight difference between firefox and chrome color rendering (I have this in all projects). But it’s really just the tiny-mini (and I believe, expected, is it?)
Print screens, both for Chrome and Firefox windows (copied to Paint on Windows 11), and image in my Firefox window itself, and images, indicated by you - are all the same. Nevertheless, in my Chrome’s window itself image is different.
Version of Chrome: 127.0.6533.100 (Official Build) (64-bit). Version of Firefox: 130.0b2 (64-bit).
I’ve used dark themes, but change it to light - images are not changed.
In Chrome I have found one “Google Docs Offline” extension and set it to disabled state (nothing in image have changed).
But sometimes it seems like Chrome fulfills some lighting procedure above the image, even with noticeable delay.
In Edge, version 127.0.2651.86 (Official build) (64-bit), image is “lightened” too.
Yes, you are right - of course, I did not expect the colors to be accurately the same. But lighting is another story. If you have many similar shapes - the excess illumination (or darkening) becomes quite noticeable. In the example given, I specifically selected the transparency so that the effect was not so noticeable. If the shape is made less transparent, the difference will become more noticeable.
So, I am wondering if it is possible to somehow track this situation programmatically and adjust, for example, the intensity of the light?
Just to make this clear, I don’t have the skills on the programming side I’m essentially a creative and an art dir. I however, have a long history with color management, color profiles and color settings. So this is the part where I can may be give some input.
For a start, could you just make these 2 screenshots of the visual (chrome VS firefox). I believe we would all like to have just a visual representation of this difference.
Then, when you say ‘lighting’ it can also be translated into ‘gamma’ or ‘luminosity’ or a combination of both. I mean, obviously, we would want to have the same image when looking at it on the same monitor (which apparently is already not the case). And may be there’s a way to fix it or better said, adjust it (as you say, ‘programmatically’). Surely not through light intensity, because it’s gonna mess with a lot of other aspects in the scene, starting with all PBR mats and env). However, even so, I’m sure you understand that there will always be this part on which we have absolutely no control. When moving on a different hardware, with a variety of monitor quality, calibration, settings, etc… There’s simply no way we can ensure all users will see the same. In fact the only best way ever found was/is to straight normalize everything to the very bottom. That’s basically why the sRGB profile norm has been created (and that’s what it does: limiting the colorspace to a ‘safe’ range of colors). So I’m not sure what just exactly are your expectations. If there really is a ‘bug’ and a ‘discrepancy’ in the rendering of BJS across browsers? Of course, if this would be an identified matter (strictly related to the framework), I believe we would be wanting to fix/improve this…
Hum Sorry, you got me confused there I must be stupid … but for all others, stupid like myself, can you just explain ‘photos of screen by external camera’?
If I look at the screen capture, which are comparable, providing they have been taken on the same rig using the same capture tool and without reworking… I say, they pretty much look the same (except for this tiny-mini difference that likely comes from the color engine used in the browser).
As for the second, as I said, I have no faen clue. I suppose if it really is an ‘external camera’ taking photos, It should start by being placed on a pod, make sure the angle is exactly the same. Ensure the light in the room is unchanged. Make a burst of shots with very low time between each because there’s also the vSync of the monitor… As said, this last post gets me even more confused. Hopefully, others will better understand? Or try to be a bit more ‘specific’…
EDIT: I’ve just tried opening both screenshots in PSD, wanting to quickly create an overlay for comparison BUT… they are already not of the same size. If you want us to be able to accurately compare anything, you need to provide both original screen captures EXACTLY the same. Else, speaking about what I believe to be just a VERY LITTLE difference, we are going to just waste time… yours and mine/ours.
“can you just explain ‘photos of screen by external camera’” - this means that I take two photos by camera in my tablet in approximately same conditions, without any “reworking”. This is not perfect, but captures difference (the difference is more visible on PC screen).
In fact, I am surprised myself that the image I see on the screen does not match the screenshot (but it goes through clipboard and may be there some information lost).
At the end:
There are no problems from Babylon.js side.
Prevent this effect (in main cases) is possible by adjusting colors by browser name and version (if it really needed, but this is not very good workaround).
What about my second question about Fresnel parameters? Could you recommend some materials to learn and decide how better to use it to model crystals (may be you have experience)?
Mawa, I think, there is no sense to spend time more about color difference. The situation is quite clear now. I simply play further with parameters and make it less noticeable as possible on main browsers.
No, it doesn’t. This is just technically incorrect. It’s already hard to compare/analyze two situations on a same hardware. Adding a second layer hardware with variables to it just cannot provide an accurate input.
or may be you didn’t put it to fullscreen (engine.enterFullscreen() and you have still had the bar of the browser (of a different size between browsers ) or you didn’t fix the camera to ensure you have the exact same view or you captured only a selected portion of the screen
I’m happy to hear that … and I’m sure the Team will be too
Well, yes. I suppose it is. It will never be 100%. But I suppose you could adjust using the levels (i.e. baseTexture.level or albedoTexture.level or diffuseTexture.level or emissiveTexture.level or if using just the colors then the *color.level). Adjusting the level without changing the lighting would be my attempt. I actually did this in one of my latest scenes )
Honestly, there’s I believe better than ‘fresnel’ to create ‘crystals’ fx. Problem is right now, I need to go make dinner… but if you’re still at it tomorrow, I can push you a few links to investigate (or else, make a search in the forum with diamond. There are shaders, node materials and GLSL examples available you can soak-up, twist and tweak to your liking
Yes. Thank you. I don’t think we can push this a lot further. From the screenshots you provided (and despite the fact that they are not of the same size ) I quickly did this overlay preview of chrome VS firefox. You can see that the difference remains (in my opinion) ‘acceptable’.
I checked the documentation and couldn’t find the Color3.level property. I tried it in the code and nothing - nor errors, nor visible changes. Did I understand your recommendation correctly? Where can I read more about it?
I think I found a way to get a more or less acceptable display. My secret )) is an additional light source, a slight desynchronization of the light directions and, most importantly, call of glow.referenceMeshToUseItsOwnMaterial(shape). This gives different, but acceptable images in Chrome and Firefox. You can see the result of my experiment on the playground page.
Yes, well, it’s depending on the type of material. Not very user friendly but they have different names. I suppose it comes from how the material is built/channeled.
For example, the emissive color level on a PBRMaterial can be set using *Intensity (i.e. emissiveIntensity). And then, I believe you cannot set a color level for the albedo in PBR. I suppose it would work through the environment intensity or by setting a lightly darker or brighter albedo color (like a light grey instead of white). Or the other way round, push the environment level intensity above 1. I’m not sure whether you can scale an albedoColor? You can give it a try but it looks like it doesn’t apply to your current choice of material. Did you get a chance to check out the other options? (Searching for diamond in the forum)
Edit:
Here are a couple of links you may want to visit:
And then, there’s more… try search for em in the forum and be curious… before you make your final decision on which approach/design to use (my recom).
Meanwhile, have a great day
Thank you very much for all useful and detailed recommendations and explanations. The links you provided are very interesting. Of course, I will study them and also follow your advice to search the Forum. At the moment, I have no experience with Babylon.js, but my project is dedicated to learning Babylon.js and figuring out how to apply it better to much more serious projects.
I believe this to be a very reasonable approach. I did the same a few years ago GL with your discovery and analyses and don’t forget to post your findings/results for us to admire and cheer … it could take a bit of time , it took me a LOT of time …but that was just me