Overlaying a Fabric material over the globe

CesiumJS
1

Hi there,

So I’ve been looking for a way to do this for a few days now, and I think I need to ask around for some help because I’m stuck.

Short version: I have a heightmap of the earth, I overlay it on the base layer (with globe.material). The material is made with a GLSL shader and a fabric material. The problem is that the material keeps getting tiled over the globe:

image
image1481×859 274 KB

Long version: I initially used a primitive that I wrapped around the globe. That worked perfectly fine, but my final objective is to have everything on the same layer (so basically, just overlay the processed heightmap with the globe). As of now, I managed to overlay them as you can see on the picture above. I did this with a simple GLSL shader and a fabric material:

const heightMapGLSL = {
  source: heightMap,
  uniforms: {
    blend: 0.8,
    heightmap: 'http://localhost:4200/assets/heightmaps/gebco.png',
    lowColor: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
    highColor: new Cesium.Color(0.0, 1.0, 0.0, 1.0)
  }
};

And the shader:

uniform sampler2D heightmap;
uniform float blend;
uniform vec4 lowColor;
uniform vec4 highColor;

czm_material czm_getMaterial(czm_materialInput materialInput)
{
  czm_material m = czm_getDefaultMaterial(materialInput);

  // Assigning uniforms to local params
  vec3 low = lowColor.rgb;
  vec3 high = highColor.rgb;
  vec4 textureValue = texture2D(heightmap, materialInput.st);
  float opacity = blend;

  // Performing the ✧magic✧
  textureValue.rgb = mix(low, high, textureValue.r);

  // Assigning local parameters to material
  m.diffuse = textureValue.rgb;
  m.alpha = opacity;

  // Returning material
  return m;
}

Now, I’m really new to shaders, but it worked on my primitive and I was happy with it. The problem now is that overlaying it on the globe makes it “tile” in a weird way:

image
image1918×923 450 KB

So I have two questions:

  • How can I make this material overlay properly?
  • Is there an easier way to achieve what I’m trying to do while retaining both the base layer and the processed heightmap on the same layer?

Thanks in advance!