SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 显示优化设置

作者:kk


文章目录

  • 前言
  • 一、获取S3MTilesLayer的方法
    • 1、Cesium.when回调获取
    • 2、通过scene查找获取
  • 二、显示优化设置
    • 1.显示精度问题
    • 2.显示控制
    • 3.显示色彩
  • 三、加载速度优化
    • 1.多子域


前言

三维的加载效率以及显示效果一直以来都是大家关注的重点,本篇文章主要从显示精度,色彩,泛光等几个方面来探讨学习S3MTilesLayer里面的显示优化设置


一、获取S3MTilesLayer的方法

1、Cesium.when回调获取

a、如果添加的是单个图层,则通过函数返回的是单个layer图层,直接用就可以了

		var promise = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine/config',{
            name:'aa'
        });
        Cesium.when(promise,(layer)=>{
        	var s3mLayer = layer
        	console.log(layer)
        })

b、如果添加的是多个图层,则使用Cesium.when.all方法,返回的是一个图层数组,可以通过索引取图层

		var promise = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine/config',{
            name:'aa'
        });
        var promise1 = scene.addS3MTilesLayerByScp('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace/datas/Combine1/config',{
            name:'bb'
        });
        Cesium.when.all([promise,promise1],(layers)=>{
            var s3mLayer = layers[0]
        })

c、如果是通过viewer.scene.open打开的场景,则使用Cesium.when返回的是一个图层数组,可以通过索引取图层

        var promise = scene.open('http://localhost:8091/iserver/services/3D-fuwu/rest/realspace');

        Cesium.when(promise,(layers)=>{
            var s3mLayer = layers[0]
        })

2、通过scene查找获取

a、如果知道图层的名称,则可以使用viewer.scene.layers.find()方法传入图层的名称,则可以返回图层。
b、如果知道图层的索引,则可以使用viewer.scene.layers.findByIndex()方法传入图层的索引,返回图层。
c、如果需要获取有选中对象的那层s3m图层,则可以使用viewer.scene.layers.getSelectedLayer() 方法获取选中对象的那一层s3m图层。

通过上述的方法,大家就可以获取到S3MTilesLayer这个图层对象了,接下来我们学习下显示优化设置。

二、显示优化设置

1.显示精度问题

a、viewer.resolutionScale
官方文档介绍为:获取或设置渲染分辨率的缩放因子。 值小于1.0时能够在不太强大的设备上提高性能;相反,值大于1.0时将会以更高分辨率渲染,然后按比例缩小,以此提高视觉保真度。 例如窗口部件以640x480的大小布设,将此属性设置为0.5,将导致场景以320x240分辨率渲染,场景按比例放大,而将其设置为2.0将导致场景以1280x960渲染,场景按比例缩小。
接下来我我们来实验一下效果,我们分别将resolutionScale设置为0.2和2。
代码如下:

viewer.resolutionScale=0.2;

显示效果:

resolutionScale为2
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 显示优化设置_第1张图片 resolutionScale为0.2

所以当我们在不同分辨率的机器上进行展示数据时,可以调整这个参数,特别是针对大屏程序,往往分辨率都特别大。

b、S3MTilesLayer.lodRangeScale
S3M图层的LOD层级切换距离缩放系数,这里首先了解下LOD技术,根据百度百科介绍,LOD技术即Levels of Detail的简称,意为多细节层次。LOD技术指根据物体模型的节点在显示环境中所处的位置和重要度,决定物体渲染的资源分配,降低非重要物体的面数和细节度,从而获得高效率的渲染运算。也就是说把模型根绝距相机远近进行分配:据摄像机近,用面数多细节高的模型,据摄像机远,用面数少细节少的模型。
接下来我们来实验下
我们分别将s3mLayer.lodRangeScale设置为0.1和100,看下效果。


这里可以看到,lodRangeScale设置大于1后,当我们拉远模型时,显示的模型出现了模糊的情况,这里的模糊是因为加载的是LOD层级中的粗糙层,和viewer.resolutionScale的像素模糊有着本质的区别。当设置的参数小与1时,拉远模型,显示的依旧很清晰,说明加载的是精细层。
LOD设置的越小越精细,但是当场景中存在大量模型时,越小加载的效率也越低,所以请根据现场实际情况调整参数的大小。

2.显示控制

a、从高度上控制显示
我们可以通过S3MTilesLayer.maxVisibleAltitude/S3MTilesLayer.minVisibleAltitude这一组属性控制图层的最大最小可见高度。
b、从可见距离控制显示
当数据量特别大时,我们可以只显示视线范围内的数据,这时就可以通过距离来进行控制
我们可以通过S3MTilesLayer.visibleDistanceMax /S3MTilesLayer.visibleDistanceMin 这一组属性控制图层的最大最小可见距离。

3.显示色彩

对于显示的色彩,主要有亮度(brightness )、对比度(contrast )、色调(hue )、饱和度(saturation )、伽马(gamma )等参数的设置。
具体的设置方法已经有在线范例,大家可以参考下范例:
http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#S3MTiles_suofeiya

三、加载速度优化

1.多子域

由于浏览器对同一个域名服务的并发请求数量有限制,通过部署多个子域名,加大向iServer发送数据请求的并发量,从而达到提升加载速度的目的。

多子域的搭建以及使用:
1、nginx客户端部署。
修改nginx.conf文件,如下图所示,修改完成重启nginx,则 http://localhost:8081/iserver、http://localhost:8082/iserver、http://localhost:8083/iserver 都会指向http://localhost:8090/iserver

SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 显示优化设置_第2张图片
2、scene.open()打开场景

		var promise = viewer.scene.open('http://{s}/iserver/services/3D-CBD/rest/realspace', undefined, {
            subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
        });

3、scene.addS3MTilesLayerByScp()添加模型

		var config = {
            subdomainConfig: {
                urlScheme: " http://{s}/iserver/services/3D-CBD/rest/realspace",
                subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
            },
            name: "building"
        };

        var promise = viewer.scene.addS3MTilesLayerByScp('http://localhost:8090/iserver/services/3D-CBD/rest/realspace/datas/building/config', config);
        Cesium.when(promise, function (layer) {
            viewer.flyTo(promise);
        })
    

4、地形

        var viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: new Cesium.CesiumTerrainProvider({
                url: ' http://{s}/iserver/services/3D-terrain/rest/realspace/datas/dem',
                subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
            })
        });

5、影像

        var imageLayer = viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
            url: ' http://{s}/iserver/services/3D-image/rest/realspace/datas/image',
            subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
        }));
        viewer.flyTo(imageLayer);

6、mvt

    mvtMap = scene.addVectorTilesMap({
    url: 'http://{s}/services/map-mvt-JingJinDiQuDiTu/restjsr/v1/vectortile/maps/JingJin',
    subdomains: ['localhost:8081', 'localhost:8082', 'localhost:8083']//设置子域
    canvasWidth: 512,
    name: 'testMVT',
    viewer: viewer
});

加载效果:从网络请求里看是否有不同端口的请求,比如’localhost:8081’, ‘localhost:8082’, ‘localhost:8083’
SuperMap iClient3D for WebGL教程(S3MTilesLayer)- 显示优化设置_第3张图片

你可能感兴趣的:(3d,webgl,javascript)