Img **Edge stretching**

CesiumJS
1

In this demo, when I use my photo, the photo there will be ​​Edge stretching​

image
image619×499 60 KB

test
test1080×1620 136 KB

2

It looks like the texture wrap mode is REPEAT by default, meaning that it will just repeat the last pixel from the border, along each direction.

Depending on the exact use-case and requirements, ther may be different options for solving that. It might be possible to change this wrap mode, but I have doubts that this will be possible on the API level. An easy solution could be to just add a one-pixel transparent border to the image, like this one:

image
image335×502 201 KB

The result, using this exact image, is shown here:

2 Likes
3

Will also add that, if you don’t need the image to conform to terrain or anything, you could simply use a rectangle with an ImageMaterialProperty instead (example).

4

I use UrlTemplateImageryProvider and set rectangle，REPEAT too. This is the code

  const viewer = cesiumGlobalState.viewer!;
  const imageryProvider = new UrlTemplateImageryProvider({
    url: `${props.url}/${props.path}/{z}/{x}/{y}.jpg`,
    rectangle: Rectangle.fromDegrees(73.5, 3.9, 135.0, 53.5),
  });
  layer = viewer.imageryLayers.addImageryProvider(imageryProvider);

image
image258×146 40.8 KB

5

When I use entity ImageMaterialProperty
The primitive point and label Content not fully displayed, It is even invisible from certain angles

image
image482×106 11.1 KB

6

Hi @edgexie,

I see you marked my response as a solution, but it sounds like you may have a new question? I’m not sure I understand what you’re asking though - what’s the end goal you’re trying to achieve? (Another sandcastle example may help, as well).

Best,
Matt