Question

使用产品：SuperMap iClient3D 11i(2023) SP1 for WebGL/WebGPU beta 操作系统：win10 x64
数据类型： 官网示例
问题详细描述：根据https://ask.supermap.com/135775这个问题的回答进行尝试，在官网示例中配置“contextOptions: {contextType : SuperMap3D.ContextType.WebGPU,}”或者配置“contextOptions: {contextType : 3,}”都会报错“SuperMap3D.js:357 Uncaught TypeError: Cannot read properties of undefined (reading 'imageryLayers')”。根据问题回答中小驼峰命名的的SuperMap3D.ContextType.webGPU进行配置是可以正常运行，但是SuperMap3D.ContextType.webGPU实际为undefined，大驼峰命名的WebGPU才为3，配置上去就会报错。
问题重现步骤： 1.打开官网示例 2.配置初始化options为contextOptions: {contextType : SuperMap3D.ContextType.WebGPU,}3.点击运行

Answer 1

您好，

测试是并没有报错的

并且看您这个报错应该是没找到对应的影像文件

您可以查看一下请求，是否是对官网的影像数据请求失败了

Comments

麻烦您仔细看一下问题啊，您配置的SuperMap3D.ContextType.webGPU是undefined，并不是3，配置为大驼峰的WebGPU才会有值为3并且会报错

---

<script>
function onload(SuperMap3D) {
    var viewer = new SuperMap3D.Viewer('Container',{
        //创建地形服务提供者的实例，url为SuperMap iServer发布的TIN地形服务
        terrainProvider : new SuperMap3D.SuperMapTerrainProvider({
            url : URL_CONFIG.SiChuan_TERRAIN,
            isSct : true,//地形服务源自SuperMap iServer发布时需设置isSct为true
            invisibility:true
        }),
        contextOptions: {contextType : SuperMap3D.ContextType.WebGPU,}
    });
    
    viewer.resolutionScale = window.devicePixelRatio;
    viewer.scenePromise.then(function(scene){
        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
        }
    });
    viewer.scene.lightSource.ambientLightColor = new SuperMap3D.Color(0.65, 0.65, 0.65, 1);
    
    var viewModel = {
        color : '#ffffff',
        tolerance : 0
    };
    $("#colorPicker").spectrum({
        color: "rgba(255,0,0,1)",
        showPalette: true,
        showAlpha: true,
        localStorageKey: "spectrum.demo",
        palette: palette
    });
    $("#colorPicker").on('change', function(event) {
        var selectedColor = SuperMap3D.Color.fromCssColorString(event.target.value);
        layer.transparentBackColor = selectedColor;
    });
    SuperMap3D.knockout.track(viewModel);
    var toolbar = document.getElementById('toolbar');
    SuperMap3D.knockout.applyBindings(viewModel, toolbar);
    SuperMap3D.knockout.getObservable(viewModel,'tolerance').subscribe(
        function(newValue) {
            layer.transparentBackColorTolerance = newValue;
        }
    );
    $("#terrainVisible").click(function(){
        viewer.terrainProvider.visible = true;
    });
    $("#terrainUnvisible").click(function(){
        viewer.terrainProvider.visible = false;
    });
    $('#loadingbar').remove();
    $('#toolbar').show();
}
if (typeof SuperMap3D !== 'undefined') {
    window.startupCalled = true;
    onload(SuperMap3D);
}
</script>

---

再请教下您，我在谷歌浏览器（浏览器已将WebGPU Developer Features设置为enabled）上运行官网示例，按您提供的方式配置之后，控制台提示“WebGPU is not supported by your browser.” 麻烦您再帮忙指导一下，还需要其他的操作来运行webGPU模式吗？或者说需要什么样的硬件来支撑webGPU模式？电脑目前的配置运行webgl是没有问题的。

---

谷歌浏览器从Chrome 113 Beta测试版开始默认支持WebGPU。如果你的谷歌浏览器低于113版本，请下载新版本浏览器才能正常学习WebGPU。

https://www.google.cn/intl/zh-CN/chrome/

---

<script type="module">
    if(navigator.gpu){
        console.log('你的浏览器支持WebGPU。');
    }else{
        console.log('你的浏览器不支持WebGPU，请更换新版本浏览器。');
    }
</script>

这个代码可以测试浏览器是否支持WebGPU

---

能不能麻烦您通过网盘啥的发一个能直接跑起来的webgpu的示例压缩包给我，我这折腾了一天了都没有跑起来。我按照您发的navigator.gpu做测试，只要在官网示例域名下访问navigator.gpu=undefined，但是在其他的域名下都navigator.gpu都有值，所以在官网示例下修改源码切换WebGPU模型就一直提示浏览器不支持webgpu。只在官网域名下不支持我也不知道什么原因导致的，我试了公司的四五台电脑都是这样。然后我在官网下载了supermap-iclient3d-11.1.1a-beta-webgl产品包运行起来之后，将代码里修改为了WebGPU，结果页面渲染不出来。如下是问题截图：

---

和研发确认目前118Chrome浏览器版本刚发布，修改了一些东西导致产品渲染有误，目前正在修复中，如果需要使用WebGPU模式建议使用113-117Chrome之间的任意浏览器版本。