Combine custom bg layer and slope ramp layer in react app

CesiumJS
1

Hi There Cesium Community,
My goal is to render the DEM and have black background on the map except for the the actual DEM, I used the below mentioned code for achieving that

const viewer = await InitializeCesium();

			// /* adding bg color */
			const layers = [
				{
					entries: [
						{ height: 52.0, color: new Color(0.0, 0.0, 0.0, 0) },
						{ height: -10.0, color: Color.BLACK },
					],
					extendDownwards: true,
					extendUpwards: true,
				},
			];

			const backgroundMaterial = createElevationBandMaterial({
				scene: viewer.scene,
				layers,
			});

			viewer.scene.globe.material = backgroundMaterial;

now the problem is when i add SlopeRamp it is getting overwritten, how do i avoid this ?

	const rampMaterial = Material.fromType("SlopeRamp");
			viewer.scene.globe.material = rampMaterial;
			viewer.scene.globe.material.uniforms.image =
				GetColorByRampType("SlopeRamp");

I am trying to get the surrounding areas painted black and have slope ramp on my DEM
here is the sandcastle link for the complete code

Please help me.

2

Hi there,

You’ll need to create a composite material. Here is your example using a composite material.

As an alternative, if you know the positions defining the boundary of your DEM, I would suggest using Clipping regions to hide the rest of the terrain.

3

Hi Gabby first of all thanks alot for helping us out. There is one last issue that we are facing and that is high loading times of the asset’s shading. We want to have current level of details but we also want it to loader faster than it is loading now. without increasing the maximumScreenSpaceError.

4

There is one last issue that we are facing and that is high loading times of the asset’s shading…without increasing the maximumScreenSpaceError

I want to confirm my understanding here. Do you mean the loading times for the highest levels of detail for the terrain geometry? That you would like to maintain a high level of detail via a low value for maximumScreenSpaceError?

5

yes exactly we want to maintain the highest possible details for our terrain but want to reduce the time it takes to load fully.
currently when i keep maximumScreenSpaceError to 0.1 it takes aroun 1 to 1.5 mins to load, is there a way to reduce the time to like 10 to 20 seconds?
also when i keep the maximumScreenSpaceError to 0.1 the fps i get is below 20, would want it to be locked at at least 60

6

Got it.

There are several things at play here. First, let’s discuss the overall topic of maximumScreenSpaceError. A lower value will indeed load higher levels of detail, but at the cost of runtime performance. Loading more geometry in the scene 1) will take longer to load over the network, and 2) take up more rendering resources, having an impact on FPS. This is the trade off: Visual quality and runtime performance.

There are some ways we could speed up some loading times, for instance the concept of skipping levels of detail. This behavior can be achieved by setting scene.globe.loadingDescendantLimit to a high number.

There are also ways to “fake” a higher level of detail for terrain geometry, such as pre-processing a slope map as imagery ahead of time and overlaying this on terrain. Let me know if you’d like to talk about this solution more.

7

please tell me about the last approach, manwhile i will try out the method you have mentioned.

8

I tried with loading decendant limit , did not find any noticeable difference in performance, it might have had an impact on rendering times but not that big of a difference, now i have two concerns.

  1. how can i achieve 60fps while maintaining current level of details, even with my AMD 7900xtx GPU the performance is sluggish, the loading times are fine , i just want to achieve a consistent FPS.
  2. i want to show contour lines on my DEM, will it be possible to show the contour only on my terrain and not the whole globe?

here is the sandcastle link for the same

9

Hi there,

I think the best solution then would be to reset the maximumScreenSpaceError to the default value and bake the slope map or contour lines into imagery.

I would suggest using a tool such as QGIS to generate 2D imagery based on your DEM. You can render slope, contour lines, or any other analytic properties of the terrain.

That image can then be imported in Cesium ion for use in CesiumJS on top of your terrain.