We have launched a 3D WebGPU client, offering a more realistic 3D scene representation and a more powerful capacity for handling massive amounts of data, which can better balance the visualization effects and business management needs. Starting from SuperMap iClient3D 2023, the product supports both WebGL and WebGPU rendering engines, and uses the same set of API interfaces, which facilitates users to quickly switch according to actual needs and reduces migration costs.
This documentation demonstrates, using the example of terrain loading, how to quickly switch from WebGL to WebGPU.
This is a guide to switching from WebGL to WebGPU by using the example of terrain and image loading.
（1）The file importing method for WebGPU client is the same as that for WebGL client. After decompressing the product package, create a new HTML file in the examples folder. Within this file, you can include the SuperMap3D.js file using the <script> tag, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head>
</html>
（2）At the same time, you should include other CSS and JavaScript files through the <head> tag as needed, like so:
<!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>
（1）Add the WebGPU feature to the parameters of the Viewer interface. If this feature is not enabled, it will default to loading with WebGL 2.0.
（2）Due to the asynchronous nature of WebGPU, the initialization of the scene must be placed within a callback to be executed.
<script>
function onload(SuperMap3D) {
var viewer = new SuperMap3D.Viewer('Container',{
//Create an instance of the terrain service provider with the URL being the TIN terrain service published by SuperMap iServer.
terrainProvider : new SuperMap3D.SuperMapTerrainProvider({
url : URL_CONFIG.SiChuan_TERRAIN,
//When the terrain service originates from a SuperMap iServer, it is necessary to set `isSct` to `true`.
isSct : true,
invisibility:true
}),
//Using WebGPU to load data(If this feature is not enabled, it will default to loading with WebGL 2.0)
contextOptions: {
contextType : SuperMap3D.ContextType.WebGPU,
}
});
viewer.resolutionScale = window.devicePixelRatio;
viewer.scenePromise.then(function(scene){
// Initialize the scene (since WebGPU uses asynchronous loading, the scene initialization needs to be placed within a callback to be executed).
init(SuperMap3D, scene, viewer);
});
}
function init(SuperMap3D, scene, viewer){
// Load the image service published by SuperMap iServer.
var layer = viewer.imageryLayers.addImageryProvider(new SuperMap3D.SuperMapImageryProvider({
url : URL_CONFIG.SiChuan_IMG
}));
// Set the camera position to locate to the terrain.
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>
In addition to this, the product package also provides some examples that use the WebGPU for loading data.
| IE | Chrome | Firefox | Opera | Safari | Edge |
| / | Recommended to use version 113.0 or above | Not directly supported yet | Recommended to use the latest version | Not directly supported yet | Recommended to use the latest version |
WebGPU is not yet supported on mobile devices.