Hi!
using BABYLON.EquiRectangularCubeTexture as scene.environmentTexture (or reflectionTexture on the materials) makes any material appear too dark under any iOS Browser.
To me this really looks like the same bug as this one where it comes down to “Conversion to int loses hdr info”:
Could anyone please give me some feedback?
I’m totally new to Bjs. Love it so far.
Kind regards
Dominic
Welcome @DerDominic a playground would be amazing to try and repro the issue ?
Hello Babylonjs community!
I have the same issue on iPad OS15.4.1 on both Safari and Chrome.
The following code have to be enough to reproduce.
import { Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, StandardMaterial, Color3, HemisphericLight, EquiRectangularCubeTexture, PBRMaterial, CubeTexture, HDRCubeTexture } from "@babylonjs/core";
const createScene = (canvas) => {
const engine = new Engine(canvas);
const scene = new Scene(engine);
const camera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 10, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
new HemisphericLight("light", Vector3.Up(), scene);
const eqTexture = new EquiRectangularCubeTexture('sky01.jpeg', scene, 512);
const metal = new PBRMaterial("metal", scene);
metal.reflectionTexture = eqTexture;
metal.microSurface = 0.96;
metal.reflectivityColor = new Color3(0.9, 0.7, 0.7);
metal.albedoColor = new Color3(0.01, 0.01, 0.01);
const box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
const material = new StandardMaterial("box-material", scene);
material.diffuseColor = Color3.Blue();
box.material = material;
const box2 = MeshBuilder.CreateBox("box", { size: 2 }, scene);
box2.translate(new Vector3(1, 0, 0), 10)
box2.material = metal;
engine.runRenderLoop(() => {
scene.render();
});
};
Thank you all for your countinuing work.
The playground are not deprecated but it might be related to an issue IOS is having at the moment 
It should be fixed in 15.4.2. You can repro in the playground.
You can also try https://playground.babylonjs.com/#WCAFJJ#11 as ios does not support well linear interpolation on cube textures at the moment as well…
Thank you sebavan! I’m still working on it.
I wanted to share the playground, so learned how to use them:
but none of them seems to specify how to use default photodome (equirectangular texture jpeg) – if there is any – or how to share my file(the second option is unlikely, though).
I tried to “reuse” one of the playground on the docs, but I couldn’t find.
any idea?
I made one. But in the playground environment I could not create decent eqTexture.
Thanks.
Hello,
I believe the reason why is not working in the PG is that you got the link to the image wrong 
On another note, this texture you are using is for a photodome and is also not hdr (or dds). I believe best would be to at least convert it to HDR and apply it as an hdr env texture for your materials. It’s not all that much more work.
Gosh.
I hadn’t type code letter by letter … I think.
I will try creating hdr file.
Hello. I inplemented a hdr environment texture, which was fortunately done through, but it loads sky image really really slow.
I switched on and off, and detect that if I use
const hdrTexture = CubeTexture.CubeTexture('sky.dds', scene, "", true);
it gets really slow.
And on the other hand, here is a great example playground of PBR :
,which I cannot have a slightest understanding.
How does
-it deal with PBR texture in such a quick responce?
-it change the sky color?
Thank you in advance.
Hi,
What happens here is that you are loading a .dds file (prefiltered) using a method that works only with .hdr (not prefiltered) or standard texture (such as a skybox made from jpg files).
What you want to do to load your dds file in scene is this:
var hdrenvtex2 = new BABYLON.CubeTexture.CreateFromPrefilteredData(“tex/pg/env/Runyon_Canyon_A_2k_cube_specular.dds”, scene);
as opposed to this (for .hdr or .jpg)
var hdrenvtex1 = new BABYLON.HDRCubeTexture(“tex/vendor/env/wide_street_01_2k.hdr”, scene, 128, false, true, false, true);
It uses a Skybox (cubeTexture) as a reflection texture and is also used for refraction.
It is these 2 lines in the file set on the sphere material
material.refractionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene); material.reflectionTexture = new BABYLON.CubeTexture("/textures/TropicalSunnyDay", scene);
The skybox is simply a serie of 6 jpg files, one for each side of a cube. It loads very fast since the files are only a few hundred k. Note that this is not a pbr material in this example, although it would be just as fast with pbr. The material is created on line 4:
var material = new BABYLON.StandardMaterial("kosh", scene);
It does. To do this it uses a function that runs in the background at 60fps and applies the changes.
The function is:
scene.registerBeforeRender(function () {console.log(“execute this on each call of a frame at 60fps before rendering the scene”);
//place your code to execute here
});
The method that is used here to color the sky is basically applying a color gradient through a special type of texture that applies colorGrading to a material (on line 38):
var colorGrading = new BABYLON.ColorGradingTexture(“/textures/LateSunset.3dl”, scene);
Basically what it does is it looks up at the texture loaded above and sets it to the material.
Here it is simply applied twice, once on the skybox (bg) and once on the sphere (on lines 39 to 42):
skyboxMaterial.cameraColorGradingTexture = colorGrading; material.cameraColorGradingTexture = colorGrading; skyboxMaterial.cameraColorGradingEnabled = true; material.cameraColorGradingEnabled = true;
Finally, within the registerBeforeRender function, some maths are used to modify the level of the texture (which basically sets its ‘intensity’ in this scenario). It increases the material ‘level’ until it reaches a certain point and next decreases it and so on. And it never stops as long as the registerBeforeRender function remains active.
var i = 0;
colorGrading.level = Math.sin(i++ / 120) * 0.5 + 0.5;
Thanks a lot.
I mistakenly put a wrong line. I don’t
Actually, it was
const hdrTexture = new HDRCubeTexture(‘sky01.hdr’, scene, 512);
that made my scene slow.
if you assume that the resolution is the same, processing speed is (I assume):
dds(CreateFromPre…)> hdr(HDRCube…) > jpeg(CubeTexture)
?
I gradually realizing that BABYLONjs is such a fascinating API, but it really hurts that there are too many things for doing the same (partly because of the backcompatibility dogma).
I understand that .3dl is a file extension of 3d lookup table 3dlut - Google Search,
,right?
I’ve noticed that photodome has ‘animation’ property. So can I register animation to photodome and render the environmental change?
In essence, processing speed is faster from pre-filtered data (because it is… prefiltered
Next, hdr takes bigger files than jpg (standard tex) of course, however hdr works better with PBR materials. And the difference is minimal once loaded.
Yes. As I said it uses gradient and makes a lookup at the texture. Therefor, 3dl was mostly indicated for this.
Never tried that before, I must admit. However I believe the animation property is rather for animation the dome (not the texture). I.E. make it rotate. I really don’t know though, you would need to check on that or ask someone else.
Have an amazing Sunday 
I tend to disagree on this (sry). First, yes, I can confirm backwards compatibility is important to BJS (and is also important to the users/devs).
Next, the fact that there are (nearly) always multiple approaches and methods you can use makes the framework so rich and versatile. It’s one of the reasons why I luv it. And I know others feel the same.
The framework also gets richer with lots of addings since version 4 or 3.2. With things like the adding of shaders, node materials, colorspace and a lot more. In fact, a LOT has happened in the past two years.
So, I understand that when starting with BJS now or from 4.1 (without knowing the history) it gets more and more difficult and tedious to learn about it 
(including the ‘old’ and newer methods). I suppose you can’t have everything, now can you?
I really really appreciate BABYLON’s back-compatibility. I thought it is necessary burden (i know it’s not an appropriate expression)
And only recently did I realize that there is texture library. It is so nice.
also getting used to playground’s “do and learn” scheme, althogh it will be much more useful if handy and effective(or fascinating) example matures.
I will do my best to contribute///
I will try photodome animation later. gonna inform if there’s sth interesting to share.
Thank you all!
But at least I want to know which one is new and which one is old 
