Skip to content

Instantly share code, notes, and snippets.

@zwcloud
Created January 22, 2018 06:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zwcloud/182c2e2c23ad1aef4b2dd9e6df4c1ea7 to your computer and use it in GitHub Desktop.
Save zwcloud/182c2e2c23ad1aef4b2dd9e6df4c1ea7 to your computer and use it in GitHub Desktop.
Cesium custom geometry

I have created a custom geometry.

Cesium-1.41\Source\Workers\createTetrahedronGeometry.js

define([
        '../Core/TetrahedronGeometry',
        '../Core/defined',
    ], function(
        TetrahedronGeometry,
        defined) {
    "use strict";

    function createTetrahedronGeometry(tetrahedronGeometry, offset) {
        if (defined(offset)) {
            tetrahedronGeometry = TetrahedronGeometry.unpack(tetrahedronGeometry, offset);
        }
        return TetrahedronGeometry.createGeometry(tetrahedronGeometry);
    }

    return createTetrahedronGeometry;
});

Cesium-1.41\Source\Core\TetrahedronGeometry.js

define([
    './Cartesian3',
    './ComponentDatatype',
    './PrimitiveType',
    './BoundingSphere',
    './GeometryAttribute',
    './GeometryAttributes',
    './GeometryPipeline',
    './VertexFormat',
    './Geometry'
], function(
    Cartesian3,
    ComponentDatatype,
    PrimitiveType,
    BoundingSphere,
    GeometryAttribute,
    GeometryAttributes,
    GeometryPipeline,
    VertexFormat,
    Geometry) {
"use strict";

var TetrahedronGeometry = function() {
    this._workerName = 'createTetrahedronGeometry';

};

TetrahedronGeometry.createGeometry = 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 GeometryAttributes({
        position : new GeometryAttribute({
            componentDatatype : ComponentDatatype.DOUBLE,
            componentsPerAttribute : 3,
            values : positions
        })
    });

    return new Geometry({
        attributes : attributes,
        indices : indices,
        primitiveType : PrimitiveType.TRIANGLES,
        boundingSphere : new BoundingSphere(new Cartesian3(0.0, 0.0, 0.0), 1.0)
    });
};

TetrahedronGeometry.unpack = function(array, startingIndex, result) {
    return new TetrahedronGeometry();//do nothing but return a defualt TetrahedronGeometry
}

return TetrahedronGeometry;
});

Then in the Sandcastle app:

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

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

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

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

result:

Now the next problem is: how to apply custom shader with uniforms to it?

@hongbinzhang
Copy link

great

@gusucaizi
Copy link

thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment