Texture coordinates problem

CesiumJS
1

I want to construct a custom geometry with texture, this is my code, everything goes well.

              var mypositions =  Cesium.Cartesian3.fromDegreesArray([60.0, 20.0, 120, 20, 120.0, 40.0, 60, 40]);
              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, 0, 2, 3])

              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 : './Cesium_Logo_Color.jpg'
                          }
                        }
                    })
                })
            }));

57528546-33d50380-7365-11e9-920f-4ae09d38c371.png
57528546-33d50380-7365-11e9-920f-4ae09d38c371.png900×500 290 KB

then i want to map the texture repeate two times in both u and v direction, so i change my texture coordinate

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

57528810-e0af8080-7365-11e9-9ed1-69d01aee5d9e.png

it seems like just work in u direction. And i know there is the other soultion is build a material with repeate times with x and y values, but my situation is i need to build many geometry and combine in a primitive with the same material. So only i can do is build different geometry with different texture coordinates. I don’n know it’s a bug in cesium or my solution is wrong. If anybody has a answer, please help me. Thank you!

2

I think even the original image isn’t completely correct. If you look at the letter E in the first image you can see it’s leftmost edge is not straight. Are you able to post a full code example I can run on Sandcastle (https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/) to try to help you with this?

Another resource you may find useful is the unofficial tutorials and examples on here about creating custom primitives and geometry:

https://github.com/cesiumlab/cesium-custom-primitive

If you figure it out please post your solution here! I’ve been collecting resources to better document how to create custom geometry and shaders in Cesium.

3

Hello, I have the same problem as above. 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, which is important for my future work. I wish you can help, either to solve the above problem, or to provide a better solution. Thank you.

const viewer = new Cesium.Viewer("cesiumContainer");
var mypositions =  Cesium.Cartesian3.fromDegreesArray([60, 20, 120, 20, 120, 40, 60, 40]);
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,
}));

You can change line 10 as follow to test

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

or

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