Cesium学习笔记-工具篇20-PrimitiveTexture自定义渲染-贴图【转】

前几篇博客我们了解了自定义点、线、面绘制，这篇我们接着学习cesium自定义纹理贴图。我们完成点线面的绘制，只是绘制出了对象的框架，没有逼真的外观。逼真外观是需要设置材质来实现：Material 。
再次查看appearance对象：

 

image.png

属性里面的material就是设置对象的材质，查看material：

 

image.png

我们发现，cesium提供很多材质接口，如果要自定义设置纹理贴图，我们使用fabric接口定义自己材质。
首先看cesium给出的demo：

 

image.png

我们看到在uniforms属性设置通过type设置类型、通过uniforms设置对应值。

1、首先我们新加着色代码，设置材质：

 

image.png

2、修改顶点着色器代码：

 

image.png

3、修改片源着色器源码：

 

image.png

4、修改CreateGeometry函数。这里，我们看到将颜色换成了UV坐标：

 

image.png

5、修改CreateAppearence函数,在uniform的url关联纹理：

 

image.png

直接上示例源码（因为我也不知道为何这样写）：

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

        //封装PrimitiveTexture
        var PrimitiveTexture= (
                function () {
                    var vertexShader;
                    var fragmentShader;
                    var materialShader;
                    var viewer;
                    var url;
                    function _(options) {
                        viewer = options.viewer;
                        vertexShader = getVS();
                        fragmentShader = getFS();
                        materialShader = getMS();
                        url = options.url ? options.url : 'sampledata/images/texture1';
                        if (options.Cartesians && options.Cartesians.length >= 3) {
                            var postionsTemp = [];
                            var stsTemp = [];
                            var indicesTesm = [];

                            for (var i = 0; i < options.Cartesians.length; i++) {
                                postionsTemp.push(options.Cartesians[i].x);
                                postionsTemp.push(options.Cartesians[i].y);
                                postionsTemp.push(options.Cartesians[i].z);
                            }
                            for (var i = 0; i < options.Cartesians.length; i+=3) {
                                indicesTesm.push(i);
                                indicesTesm.push(i+1);
                                indicesTesm.push(i + 2);

                                stsTemp.push(0);
                                stsTemp.push(1);
                                stsTemp.push(1);
                                stsTemp.push(1);
                                stsTemp.push(1);
                                stsTemp.push(0);
                            }
                            this.positionArr = new Float64Array(postionsTemp);
                            this.sts = new Uint8Array(stsTemp);
                            this.indiceArr = new Uint16Array(indicesTesm);

                        } else {
                            var p1 = Cesium.Cartesian3.fromDegrees(0, 0, -10);
                            var p2 = Cesium.Cartesian3.fromDegrees(0, 0.001, -10);
                            var p3 = Cesium.Cartesian3.fromDegrees(0.001, 0.001, -10);
                            this.positionArr = new Float64Array([
                                p1.x, p1.y, p1.z,
                                p2.x, p2.y, p2.z,
                                p3.x, p3.y, p3.z
                            ]);
                            this.sts = new Uint8Array([0, 1,
                                1, 1,
                                1, 0]);
                            this.indiceArr = new Uint16Array([0,1,2]);
                        }

                        this.geometry = CreateGeometry(this.positionArr, this.sts, this.indiceArr);
                        this.appearance = CreateAppearence(fragmentShader, vertexShader,materialShader,url);

                        this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
                            geometryInstances: new Cesium.GeometryInstance({
                                geometry: this.geometry
                            }),
                            appearance: this.appearance,
                            asynchronous: false
                        }));
                    }

                    function CreateGeometry(positions, sts, indices) {
                        return new Cesium.Geometry({
                            attributes: {
                                position: new Cesium.GeometryAttribute({
                                    componentDatatype: Cesium.ComponentDatatype.DOUBLE,
                                    componentsPerAttribute: 3,
                                    values: positions
                                }),
                                st: new Cesium.GeometryAttribute({
                                    componentDatatype: Cesium.ComponentDatatype.FLOAT,
                                    componentsPerAttribute: 2,
                                    values: sts
                                })
                            },
                            indices: indices,
                            primitiveType: Cesium.PrimitiveType.TRIANGLES,
                            boundingSphere: Cesium.BoundingSphere.fromVertices(positions)
                        });
                    }

                    function CreateAppearence(fs, vs,ms,url) {
                        return new Cesium.Appearance({
                            material: new Cesium.Material({
                                fabric: {
                                    uniforms: {
                                        image: url
                                    },
                                    source: ms
                                }
                            }),
                            aboveGround: true,
                            faceForward: true,
                            flat: true,
                            translucent: false,
                            renderState: {
                                blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
                                depthTest: { enabled: true },
                                depthMask: true,
                            },
                            fragmentShaderSource: fs,
                            vertexShaderSource: vs
                        });
                    }

                    function getVS() {
                        return "attribute vec3 position3DHigh;
                        attribute vec3 position3DLow;
                        attribute vec2 st;
                        attribute float batchId;
                        varying vec2 v_st;
                        void main()
                        {
                            vec4 p = czm_computePosition();
                            v_st=st;
                            p = czm_modelViewProjectionRelativeToEye * p;
                            gl_Position = p;
                        }
                        ";
                    }
                    function getFS() {
                        return "varying vec2 v_st;
                        void main()
                        {
                            czm_materialInput materialInput;
                            czm_material material=czm_getMaterial(materialInput,v_st);
                            vec4 color=vec4(material.diffuse + material.emission,material.alpha);
                            if(color.x==1.0&&color.y==1.0&&color.z==1.0&&color.w==1.0) color=vec4(vec3(0.0,0.0,0.0),0.0);
                            gl_FragColor =color;
                        }
                        ";
                    }
                    function getMS() {
                        return "czm_material czm_getMaterial(czm_materialInput materialInput,vec2 v_st)
                        {
                            vec4 color = texture2D(image, v_st);
                            czm_material material = czm_getDefaultMaterial(materialInput);
                            material.diffuse= color.rgb;
                            material.alpha=color.a;
                            return material;
                        }
                        ";
                    }
                    _.prototype.remove = function () {
                        if (this.primitive != null) {
                            viewer.scene.primitives.remove(this.primitive);
                            this.positionArr = null;
                            this.colorArr = null;
                            this.indiceArr = null;
                            this.geometry = null;
                            this.appearance = null;
                            this.primitive = null;
                        }
                    }
                    _.prototype.updateTexture = function (url) {

                        if (this.primitive != null) {
                            viewer.scene.primitives.remove(this.primitive);

                            this.appearance = CreateAppearence(fragmentShader, vertexShader, materialShader, url);

                            this.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
                                geometryInstances: new Cesium.GeometryInstance({
                                    geometry: this.geometry
                                }),
                                appearance: this.appearance,
                                asynchronous: false
                            }));
                        } else { return; }
                    }
                    return _;
                })();

            //定义顶点坐标（经纬度）
            var positions = new Float64Array([
                110.2, 20.6,
                111.2, 21.9,
                111, 23
            ]);
            var cartesian3Positions = Cesium.Cartesian3.fromDegreesArray(positions);

            var p = new PrimitiveTexture({
                viewer:_this.viewer,
                Cartesians:cartesian3Positions,
                url:'http://localhost:8083/static/image/fire.png'
            });

 

image.png

作者：WebGiser
链接：https://www.jianshu.com/p/7d81256b120e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。