custom geometry shading

Hi

I have read the Geometry and Appearances Part 2 (https://github.com/AnalyticalGraphicsInc/cesium/wiki/Geometry-and-Appearances), and try the code, the Tetrahedron shape is ok, the normals is ok, but the shading has no effect.

how to make the shading worked? Thanks for the help.

here is the code, you can run it in Sandcastle.

var TetrahedronGeometry = function() {
    var negativeRootTwoOverThree = -Math.sqrt(2.0) / 3.0;
    var negativeOneThird = -1.0 / 3.0;
    var rootSixOverThree = Math.sqrt(6.0) / 3.0;

    var positions = new Float64Array(4 * 3 * 3);
    // back triangle
    positions[0] = 0.0;
    positions[1] = 0.0;
    positions[2] = 1.0;
    positions[3] = 0.0;
    positions[4] = (2.0 * Math.sqrt(2.0)) / 3.0;
    positions[5] = negativeOneThird;
    positions[6] = -rootSixOverThree;
    positions[7] = negativeRootTwoOverThree;
    positions[8] = negativeOneThird;

    // left triangle
    positions[9] = 0.0;
    positions[10] = 0.0;
    positions[11] = 1.0;
    positions[12] = -rootSixOverThree;
    positions[13] = negativeRootTwoOverThree;
    positions[14] = negativeOneThird;
    positions[15] = rootSixOverThree;
    positions[16] = negativeRootTwoOverThree;
    positions[17] = negativeOneThird;

    // right triangle
    positions[18] = 0.0;
    positions[19] = 0.0;
    positions[20] = 1.0;
    positions[21] = rootSixOverThree;
    positions[22] = negativeRootTwoOverThree;
    positions[23] = negativeOneThird;
    positions[24] = 0.0;
    positions[25] = (2.0 * Math.sqrt(2.0)) / 3.0;
    positions[26] = negativeOneThird;

    // bottom triangle
    positions[27] = -rootSixOverThree;
    positions[28] = negativeRootTwoOverThree;
    positions[29] = negativeOneThird;
    positions[30] = 0.0;
    positions[31] = (2.0 * Math.sqrt(2.0)) / 3.0;
    positions[32] = negativeOneThird;
    positions[33] = rootSixOverThree;
    positions[34] = negativeRootTwoOverThree;
    positions[35] = negativeOneThird;

    var indices = new Uint16Array(4 * 3);

    // back triangle
    indices[0] = 0;
    indices[1] = 1;
    indices[2] = 2;

    // left triangle
    indices[3] = 3;
    indices[4] = 4;
    indices[5] = 5;

    // right triangle
    indices[6] = 6;
    indices[7] = 7;
    indices[8] = 8;

    // bottom triangle
    indices[9] = 9;
    indices[10] = 10;
    indices[11] = 11;

    var attributes = new Cesium.GeometryAttributes({
        position: new Cesium.GeometryAttribute({
            componentDatatype: Cesium.ComponentDatatype.DOUBLE,
            componentsPerAttribute: 3,
            values: positions
        })
    });

    var boundingSphere = new Cesium.BoundingSphere(new Cesium.Cartesian3(0.0, 0.0, 0.0), 1.0);

    var geometry = Cesium.GeometryPipeline.computeNormal(new Cesium.Geometry({
        attributes: attributes,
        indices: indices,
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        boundingSphere: boundingSphere
    }));

    this.attributes = geometry.attributes;
    this.indices = geometry.indices;
    this.primitiveType = geometry.primitiveType;
    this.boundingSphere = geometry.boundingSphere;

};

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;

var modelMatrix = Cesium.Matrix4.multiplyByUniformScale(
    Cesium.Matrix4.multiplyByTranslation(
        Cesium.Transforms.eastNorthUpToFixedFrame(ellipsoid.cartographicToCartesian(
            Cesium.Cartographic.fromDegrees(-100.0, 40.0))),
        new Cesium.Cartesian3(0.0, 0.0, 200000.0), new Cesium.Matrix4()),
    500000.0, new Cesium.Matrix4());

var tetrahedron = new TetrahedronGeometry();
var instance = new Cesium.GeometryInstance({
    geometry: tetrahedron,
    modelMatrix: modelMatrix,
    attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.WHITE)
    }
});

scene.primitives.add(new Cesium.Primitive({
    geometryInstances: instance,
    asynchronous: false,
    appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        translucent: false
    })
}));

scene.primitives.add(Cesium.createTangentSpaceDebugPrimitive({
    geometry: tetrahedron,
    modelMatrix: modelMatrix,
    length: 0.2
}));

I think all you need to do is remove the “flat: true” line.

That's great, it worked, thank you so much!
I just read the documentation of appearance, when flat is true, lighting is not taking into account.