Material animation

I’ve built up a sphere with some polygon countries on it. and i have 2 scenarios which are sortof the same thing.

Basically I want to convert some GLSL shaders to babylon, specifically related to animation. One such example is this:

sphere unwrap

where i run into an issue in my knowledge is I have my own texture, and i have specific settings for it. it is like this:

let tex = new BABYLON.Texture("world.png", _scene, true, false);
tex.uOffset = .4671;
tex.vOffset = .017;
tex.hasAlpha = true;

let spheremat = new BABYLON.StandardMaterial("spheremat", _scene);
spheremat.backFaceCulling = false;
spheremat.diffuseTexture = tex; // assign texture to material
spheremat.emissiveColor = 
spheremat.alpha = _configOptions.translucentConfig.planetAlpha;

spheremat.separateCullingPass = true;  //needed so countries show up on other side.
sphere.material = spheremat;

I noticed that if I make my own shader, even if i set the uOffset and vOffset on the texture and pass it in, those values don’t seem to be honored. so i have to handle that somehow in the shader…

I also have a hemispheric light where I set groundColor and specular. and sometimes I toggle on diffuse light color.

but i can only have 1 material on a mesh, so my shader Material needs to handle these settings.

but the examples i see from shader toy and such may not work with all of it. what i was hoping to do was build up my material (like above), and then like, merge that with the animation code? or maybe export the shader code that babylon generates for it, and then modify that to add the animations?

Is Node Material the way to do this? I saw a thread (here) that mentions including babylon includes in shaders, to re-use what babylon does under the hood.

I have not found any guides or information about that. Which approach would suit me best? (node material or manually including babylon includes?)

The other related issue, is I have an existing animation, but it runs very slow. the playground runs fine, i’m only using 4-5 countries in the demo, but it drops to 18 fps when the whole world is there.

I want to create an animation shader for it, but i run into the above situation with things like texture and lighting and such.

playground for animation

what i do is calculate all of the precise locations for each vertex and animate on that. i feel I can convert that to a math formula based on a ‘stepnumber’ parameter, and just have the shader move the vertex easier / faster. my method is basically not allowing the compiler to see what all is happening so it can’t really help optimize it under the hood.



Node Material editor will support u/v offset and scaling for you on its texture block.

But nonetheless, if you want to support texture matrix, you can get inspiration from here:

The diffuseMatrix uniform comes from texture.getTextureMatrix() function

thank you sir. I am still researching / learning what to do. the effect i want has now changed, and naturally it’s slightly complex. lol.

1 Like