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