Incorrect texture coordinate in primitive?

CesiumJS
1

Hello,
I ran into the same problem as the post Texture coordinates problem.
I expected to get 4 repeated images (2X2), but only got 2. The full code example which can run on Sandcastle as following.
Further, I tested GLSL and found that the vertex shader is wrong with the UV coordinates: The U direction is right but the V direction is wrong (V direction coordinate seem to automatically take decimal parts, ranging from 0 to 1). I can provide the GLSL code if you think it is necessary.
I am doing this research in the hope of being able to map the triangular irregular network as I want. Thanks.

const viewer = new Cesium.Viewer("cesiumContainer");
var mypositions =  Cesium.Cartesian3.fromDegreesArray([-110, 20, -100, 20, -100, 30, -110, 30]);
var numPositions = mypositions.length;
var pos = new Float64Array(numPositions * 3);
          for (var i = 0; i < numPositions; ++i) {
              pos[i * 3] = mypositions[i].x;
              pos[i * 3 + 1] = mypositions[i].y;
              pos[i * 3 + 2] = mypositions[i].z;
          }
var uvs = [0, 0, 1, 0, 1, 1, 0, 1];
var indexs = new Uint16Array([0, 1, 2, 2, 3, 0]);

var geometry = new Cesium.Geometry({
  attributes: {
      position: new Cesium.GeometryAttribute({
          componentDatatype: Cesium.ComponentDatatype.DOUBLE,
          componentsPerAttribute: 3,
          values: pos
      }),
      st: new Cesium.GeometryAttribute({
        componentDatatype: Cesium.ComponentDatatype.FLOAT,
        componentsPerAttribute: 2,
        values: uvs
      })
  },
  indices : indexs,
  primitiveType: Cesium.PrimitiveType.TRIANGLES,
  boundingSphere: Cesium.BoundingSphere.fromVertices(pos)
});

var myInstance = new Cesium.GeometryInstance({
    geometry: geometry,
});

viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: myInstance,

    appearance: new Cesium.MaterialAppearance({
        material : new Cesium.Material({
          fabric : {
              type : 'Image',
              uniforms : {
                  image : "../images/Cesium_Logo_Color.jpg"
              }
            }
        })
    }),
    asynchronous: false,
}));

image
image777×594 43.5 KB

You can change line 10 as follow to test

var uvs = [0, 0, 2, 0, 2, 2, 0, 2];

Draw two times in U direction but one time in V direction.

image
image765×523 90.5 KB

or

var uvs = [0, 0, 2.5, 0, 2.5, 2.5, 0, 2.5];

Draw 2.5 times in U direction but half image in V direction.

image
image800×529 86.2 KB

2

Hi @SYSUduzichun,

Instead of changing the UVs you can add a repeat uniform to the material as follows:

        material : new Cesium.Material({
          fabric : {
              type : 'Image',
              uniforms : {
                  image : "../images/Cesium_Logo_Color.jpg",
                  repeat: new Cesium.Cartesian2(2.0, 2.0)
              }
            }
        })

Here’s a sandcastle that demonstrates this result:

image
image1270×534 141 KB

And for future reference, you can look through the Cesium documentation to see all the possible options for modifying materials.