cesuim加载倾斜摄影OSGB三维数据

---

由于个人开发经验问题，之前直接使用obj文件转化的gltf或b3dm文件，转化的文件非常大几百兆直接导入了项目，这样直接会导致浏览器崩溃。后来参考文献发现我这里用的文件不对，应该用osgb文件在较大的做三维模型加载。

1、得到正确原始.osgb格式数据；

（1）倾斜摄影数据仅支持 smart3d 格式的 osgb 组织方式， 数据目录必须有一个 “Data” 目录的总入口， “Data” 目录同级放置一个
metadata.xml 文件用来记录模型的位置信息。

（2）每个瓦片目录下，必须有个和目录名同名的 osgb 文件，否则无法识别根节点。

正确的目录结构如图

2、由于cesuim暂不支持.osgb格式数据显示，所以要将.osgb格式数据转换为3dtile 格式数据，提供一个比较简单的转化工具。

链接：https://pan.baidu.com/s/1QUoolsZ0WDfdEBENqIxwgQ
提取码：z2u7

转换成功后的数据格式如图

3、将转换成功后的数据在服务器上发布（这应该是挺简单的，就是将数据和代码放到同一个服务器上就行了），然后利用cesuim接口进行数据添加显示。

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: './b3dm/tileset.json',
    shadows:Cesium.ShadowMode.DISABLED,//去除阴影
    scale:1
}));
tileset.readyPromise.then(function () {
    viewer.zoomTo(tileset);
})

4、解决Cesium 1.50（2018/10/01)版本打开3dtiles可能会出现加载不上导致渲染停止的错误。

（1）错误说明为：RuntimeError: Unsupported glTF Extension: KHR_technique_webgl。错误截图如下：

（2）解决方案：
原因是KHR_technique_webgl扩展新版Cesium已经不支持的缘故，需要升级一下gltf数据，使用KHR_techniques_webgl扩展即可(注意多了一个s)。当然如果直接修改3dtiles数据，比较劳心费神。这里提供一个简单的方法，只需要在Cesium.js加载以后，运行以下代码即可正常显示3dtiles数据了。

var fixGltf = function (gltf) {
    if (!gltf.extensionsUsed) {
        return;
    }
    var v = gltf.extensionsUsed.indexOf('KHR_technique_webgl');
    var t = gltf.extensionsRequired.indexOf('KHR_technique_webgl');
    if (v !== -1) {
        gltf.extensionsRequired.splice(t, 1, 'KHR_techniques_webgl');
        gltf.extensionsUsed.splice(v, 1, 'KHR_techniques_webgl');
        gltf.extensions = gltf.extensions || {};
        gltf.extensions['KHR_techniques_webgl'] = {};
        gltf.extensions['KHR_techniques_webgl'].programs = gltf.programs;
        gltf.extensions['KHR_techniques_webgl'].shaders = gltf.shaders;
        gltf.extensions['KHR_techniques_webgl'].techniques = gltf.techniques;
        var techniques = gltf.extensions['KHR_techniques_webgl'].techniques;

        gltf.materials.forEach(function (mat, index) {
            gltf.materials[index].extensions['KHR_technique_webgl'].values = gltf.materials[index].values;
            gltf.materials[index].extensions['KHR_techniques_webgl'] = gltf.materials[index].extensions['KHR_technique_webgl'];

            var vtxfMaterialExtension = gltf.materials[index].extensions['KHR_techniques_webgl'];

            for (var value in vtxfMaterialExtension.values) {
                var us = techniques[vtxfMaterialExtension.technique].uniforms;
                for (var key in us) {
                    if (us[key] === value) {
                        vtxfMaterialExtension.values[key] = vtxfMaterialExtension.values[value];
                        delete vtxfMaterialExtension.values[value];
                        break;
                    }
                }
            };
        });
        techniques.forEach(function (t) {
            for (var attribute in t.attributes) {
                var name = t.attributes[attribute];
                t.attributes[attribute] = t.parameters[name];
            };

            for (var uniform in t.uniforms) {
                var name = t.uniforms[uniform];
                t.uniforms[uniform] = t.parameters[name];
            };
        });
    }
}
Object.defineProperties(Cesium.Model.prototype, {
    _cachedGltf: {
        set: function (value) {
            this._vtxf_cachedGltf = value;
            if (this._vtxf_cachedGltf && this._vtxf_cachedGltf._gltf) {
                fixGltf(this._vtxf_cachedGltf._gltf);
            }
        },
        get: function () {
            return this._vtxf_cachedGltf;
        }
    }
});

5、效果图

参考文章地址：
cesuim中文网
cesuim加载倾斜摄影OSGB三维数据完整过程（超详细）
osgb转3dtiles工具

我不介意孤独，只是介意变得微不足道。