Translate EnvironmentTexture?

I have a scene that uses the full page as a fish tank / aquarium. The user is going to be able view fish in other tanks along the x axis. After adding more tanks and moving the camera further from the origin I now realize I have a problem with my environment texture lighting. Is there a way to translate the environment texture with the camera as the user views other fish tanks?

1 Like

I do not think so. You can rotate the environment in any dimension, but I have not scene a shifting. I am not sure it would even help, because as you move away you would be able to see more than one tank at the same time. The shifting seems like it should be based on what is being lit, not where the camera was.

What you can do, for sure, is have multiple environments. I remember you were asking about making environments via Blender. You could move your camera in Blender & make another env, then assign the env based on the tank. If you have an overhead light source in the env, then effect of the light seeming to be in the same place in the scene would be supported across the tanks.

It would definitely be an improvement, if the location of a mesh could be taken into account for environment lighting, but of course the scaling of the environment would have to be taken into account. Does not sound like a minor improvement, effort wise.

1 Like

Another way to do this, if it does not involve reflections is to do some of your lighting with lights, where you observed a problem. Rather than solely relying on an env.

Thanks JCP. I like your suggestion of creating multiple env textures. I’d do that if I knew the x coordinate of the tanks were going to be fairly consistent.

I also tried using other lights. I couldnt get it to look as good as when the env texture aligned with the camera / tank.

If there isnt a way to move the env texture with the camera then I think I need to add everything in my scene to a transforn node and instead of moving the camera I will move the transform node.

Hopefully that won’t kill the FPS as the node is moving. If it does I just wont animate the movement between tanks.

We could also just call @sebavan, just to be sure there was no way to shift.

Would local cubemaps not be a good fit here: Reflections and Refractions | Babylon.js Documentation ?

1 Like

I’m not sure. Is there a way to use a cube map just for the environment light?

I got plan B going using a transform node. Not ideal, though.

This is what local cubemaps are, you could try setting boundingBoxSize and boundingBoxPosition on your environmentTexture directly

1 Like

I wasn’t able to get it working in my project, so I created a PG:

https://playground.babylonjs.com/#JPQQPG#1

and it IS working there. I’ll add a simple pbr sphere to my project tomorrow to see if that works.

1 Like

The simple pbr sphere is working with the local cubemap. The more complex pbr material the fish are using doesn’t.

Here is what they should look like:

This is what my material setup looks like:

var pbr1 = new BABYLON.PBRMaterial("ranchu"+this.num+"_pbr", scene);
var albedoTexture = new BABYLON.CustomProceduralTexture("ranchu"+this.num+"proctex", "./textures/shaders/goldfish", 1024, this.scene);
albedoTexture.hasAlpha = true;
pbr1.albedoTexture = albedoTexture;
pbr1.bumpTexture = new BABYLON.Texture('textures/ranchuBump.png', scene);
pbr1.reflectivityTexture = new BABYLON.Texture("textures/ranchuReflectivity.png", scene);

var pbr2 = new BABYLON.PBRMaterial("ranchu"+this.num+"_pbr2", scene);
pbr2.albedoTexture = albedoTexture;
pbr2.useAlphaFromAlbedoTexture = true;
pbr2.reflectivityTexture = new BABYLON.Texture("textures/ranchuReflectivity.png", scene);
pbr2.reflectionColor = BABYLON.Color3.White();

let multiMat = <BABYLON.MultiMaterial>mesh.material.clone('ranchu'+this.num+'multimat');
multiMat.subMaterials[0] = pbr1;
multiMat.subMaterials[1] = pbr2;
mesh.material = multiMat;

Would be create if you could share a repro in the playground ?

https://playground.babylonjs.com/#JPQQPG#2

The issue appears to have something to do with the skeleton. Try setting the skeleton to null at line 42.

I created that model in Blender 2.79 and exported it today using Blender 2.93 (what a pain LOL) and a very recent Babylon exporter.

I’m still using the Tower of Babel exporter for my project, since I like the js format (thanks @JCPalmer ) .

1 Like

That’s because the weights are not normalized. If you normalize them it does work:

https://playground.babylonjs.com/#JPQQPG#6

1 Like

Nice! I just tried normalizing all the bone weights in Blender and the the problem still persists. Weird.

Why are local cube maps so sensitive to bone weights not being perfectly normalized?

In Blender I used automatic weights, limited to 4 bones, nnormalized all and it still is a problem.

The weights are probably not normalized correctly in Blender, as when normalized by code it does work (at least I assume your new model with only 4 bones does work with the js normalizing code).

You should display the weight in the console with mesh.getVerticesData("matricesWeights") and check if the sum of the values when taken 4 by 4 == 1.

The exporter default precision for matrix weights is 2 decimals. Usually good enough. You can increase & try again, till it cannot be detected.

1 Like