Cesium实战(二十二)自定义entity动态纹理

Cesium实战(二十二)自定义entity动态纹理

引言

本篇我们来写一个自定义的纹理, cesium编程中级(十五)cesium动态图片曾经使用过使贴到用canvas动态构建纹理图片,然后使用回调ImageMaterialProperty再赋值给rectangle的方式实现过同样的效果,但是,这个流程中每次都动态构建纹理会有效率问题–每次绘制都将纹理信息传给GPU,数据量大的时候,会造成卡顿;如何解决这个问题呢?

答案是使用着色器。

这里我们只传一次纹理数据,使用着色器来动态渲染

思路

要构建一个最简单的材质,我们的目标有两个

  1. 将纹理传入着色器
  2. 使用着色器动态修改渲染
  3. 构建一个entity,并使用自定义材质来渲染

从已知线索出发,我们可以查看官方示例中的Materials.html,看到

primitive.appearance.material = new Cesium.Material({
    fabric: {
        uniforms : {
            image: '../images/earthspec1k.jpg',
            heightField : '../images/earthbump1k.jpg'
        },
        materials: {
            bumpMap: {
                type : 'BumpMap',
                uniforms : {
                    image : '../images/earthbump1k.jpg'
                }
            }
        },
        source :
            'czm_material czm_getMaterial(czm_materialInput materialInput) { \n' +
            '    czm_material material = czm_getDefaultMaterial(materialInput); \n' +
            '    vec4 color; \n' +
            '    float heightValue = texture2D(heightField, materialInput.st).r; \n' +
            '    color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue); \n' +
            '    color.a = (1.0 - texture2D(image, materialInput.st).r) * 0.7; \n' +
            '    color = czm_gammaCorrect(color); \n' +
            '    material.diffuse = color.rgb; \n' +
            '    material.alpha = color.a; \n' +
            '    material.normal = bumpMap.normal; \n' +
            '    material.specular = step(0.1, heightValue); \n' + // Specular mountain tops
            '    material.shininess = 8.0; \n' + // Sharpen highlight
            '    return material; \n' +
            '} \n'
    }
});

这是一个典型的材质,uniforms是传入参数,可以解决第一个问题,source里面是着色器代码,可以解决第二个问题。

注: 其实这里我一直在想,这个问题是我解决了之后再回过头来讲述,好比我站在上帝视角,观察这些;如果我是初次处理这个问题,会想得到这些吗?大概率是不会想到吧,我处理这些问题经历了很长很长的时间,知识慢慢积累,多次回头看,才慢慢明白是这样,如果看到文章中的描述不能一次明白透,没关系,在心里留个印象,在以后学习的过程中,随着知识的积累,你会慢慢明白的,加油~~

翻一翻 Source\Scene\Material.js ,发现了很多材质都是类似这样:

/**
    * Gets the name of the polyline arrow material.
    * @type {String}
    * @readonly
    */
Material.PolylineArrowType = 'PolylineArrow';
Material._materialCache.addMaterial(Material.PolylineArrowType, {
    fabric : {
        type : Material.PolylineArrowType,
        uniforms : {
            color : new Color(1.0, 1.0, 1.0, 1.0)
        },
        source : PolylineArrowMaterial
    },
    translucent : true
});

大概可以链接材质的构成,同时,在Material中有个键值对记录了类型和材质效果;

接下来看第三个问题:

我们知道官方实例中对线,面的材质调用很简单,比如

var glowingLine = viewer.entities.add({
    name : 'Glowing blue line on the surface',
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 37,
                                                        -125, 37]),
        width : 10,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.2,
            taperPower : 0.5,
            color : Cesium.Color.CORNFLOWERBLUE
        })
    }
});

这里我们可以找到PolylineGlowMaterialProperty 的源码,并且打上断点,慢慢调试,观察,哪些是必须的属性,哪些是可有可无的;

动态线

经过刚才的思路

function PolylineTrailLinkMaterialProperty(color, duration) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = color;
    this.duration = duration || 3000;
    this._time = (new Date()).getTime();
    this.isTranslucent = function () {
        return true;
    }
}
Cesium.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
    isConstant: {
        get: function () {
            return false;
        }
    },
    definitionChanged: {
        get: function () {
            return this._definitionChanged;
        }
    },
    color: Cesium.createPropertyDescriptor('color')
});
PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
    return 'PolylineTrailLink';
}
PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
        result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = Cesium.Material.PolylineTrailLinkImage;
    result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    return result;
}
PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
    return this === other ||
        (other instanceof PolylineTrailLinkMaterialProperty &&
            Property.equals(this._color, other._color))
}
Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;
Cesium.Material.PolylineTrailLinkType = 'PolylineTrailLink';
Cesium.Material.PolylineTrailLinkImage = "./colors1.png";
Cesium.Material.PolylineTrailLinkSource = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                                                {\n\
                                                    czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                                    vec2 st = materialInput.st;\n\
                                                    vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                                    material.alpha = colorImage.a * color.a;\n\
                                                    material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                                    return material;\n\
                                                }";
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType, {
    fabric: {
        type: Cesium.Material.PolylineTrailLinkType,
        uniforms: {
            color: new Cesium.Color(0.0, 0.0, 1.0, 0.5),
            image: Cesium.Material.PolylineTrailLinkImage,
            time: 20
        },
        source: Cesium.Material.PolylineTrailLinkSource
    },
    translucent: function (material) {
        return true;
    }
});

调用比较简单

let item = viewer.entities.add({
    name: 'PolylineTrail',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            lon, lat, 2500,
            lon + 10, lat, 2500,
            lon + 10, lat + 10, 2500
        ]),
        width: 15,
        material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.ORANGE, 3000)
    }
});

示例

发表评论

电子邮件地址不会被公开。 必填项已用*标注