WebGPU使用手册

概述

全新推出的三维WebGPU客户端，提供更高真实感的三维场景表现力和更强大的海量数据承载力，能够更好兼顾可视化效果和业务管理需求。SuperMap GIS 2023从底层同时支持WebGL和WebGPU两种渲染框架，对外使用一套API接口便于用户根据实际需求快速切换。

本文档将以基础示例为例，指导用户如何实现从WebGL到WebGPU的快速切换。

操作流程

下面以加载地形影像为例，介绍从WebGL切换到WebGPU的操作流程。

1、文件引入

（1）WebGPU的文件引入方式与WebGL相同。也是将获取版本解压缩后，在examples文件夹下新建HTML文件，在文件中通过<script> 标签将SuperMap3D.js文件引入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
</html>

（2）同时应该根据需要在 <head> 标签中引入的其他css文件和js文件，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
    <link href="./css/pretty.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/config.js"></script>
    <script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
</html>

2、使用WebGPU的方式添加地形与影像

（1）将开启WebGPU属性添加到Viewer接口的参数里，若不开启此属性，则默认以WebGL2.0方式加载。

（2）由于WebGPU采用异步加载，初始化场景操作需要放在回调中打开。

				 
<script>
function onload(SuperMap3D) {
    var viewer = new SuperMap3D.Viewer('Container',{
        //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
        terrainProvider : new SuperMap3D.SuperMapTerrainProvider({
            url : URL_CONFIG.SiChuan_TERRAIN,
            //地形服务源自SuperMap iServer发布时需设置isSct为true
            isSct : true,
            invisibility:true
        }),
        //使用WebGPU方式加载（若不开启此属性，则默认以WebGL2.0方式加载）
        contextOptions: {
            contextType : SuperMap3D.ContextType.WebGPU,
        }
    });
    viewer.resolutionScale = window.devicePixelRatio;
    
    viewer.scenePromise.then(function(scene){
        //初始化场景（由于WebGPU采用异步加载，初始化场景需要放在回调中打开）	
        init(SuperMap3D, scene, viewer);
    });
}
function init(SuperMap3D, scene, viewer){
    //添加SuperMap iServer发布的影像服务
    var layer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
        url : URL_CONFIG.SiChuan_IMG
    }));
    //设置相机位置，定位至地形
    viewer.scene.camera.setView({
        destination : new SuperMap3D.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
        orientation : {
            heading : 1.4059101895600987,
            pitch : -0.20917672793046682,
            roll : 2.708944180085382e-13
        }
    });
}
</script>
</body>
</html>

以上为加载地形影像示例从WebGL到WebGPU的快速切换的方式，产品包中还提供了一些使用WebGPU方式加载的示例供用户参考。

注意事项：

（1）终端设备与浏览器兼容性

IE	Chrome	Firefox	Opera	Safari	Edge
/	推荐113.0以上版本	暂未直接支持	推荐最新版本	暂未直接支持	推荐最新版本