Mars3D开发者中心

外观

访问系统环境要求

872字约3分钟

2024-12-11

本节介绍 浏览访问Mars3D相关系统的环境要求：

  • 必须有 HTTP Server来发布后运行（http方式访问），如：http://mars3d.cn/project/es5/index.html
  • 基于WebGL技术实现三维，所以尽量用最新版本浏览器,建议用现代化的浏览器(如谷歌、火狐等)。
  • 想要流畅的加载三维模型等大量数据，对显卡配置有一定要求。

提示

请确认客户端访问机器的显卡显存不低于2GB，并选择一款合适的浏览器（推荐谷歌）并升级到最新版本。

1. WebGL介绍

WebGL 是一种 JavaScript API，用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式 2D 和 3D 图形。WebGL 完全集成到浏览器的所有网页标准中，可将影像处理和效果的 GPU 加速使用方式当做网页 Canvas 的一部分。WebGL 元素可以加入其他 HTML 元素之中并与网页或网页背景的其他部分混合。WebGL 程序由 JavaScript 编写的句柄和 OpenGL Shading Language（ GLSL ）编写的着色器代码组成。

1.1 检查WebGL支持度

首先，通过浏览器访问http://get.webgl.org（能看到图形即可）或https://webglreport.com（会检查每一个支持指标），检查一下你的浏览器是否支持WebGL和支持的清单。目前，大多数平台和浏览器都支持WebGL，在这些环境下运行Mars3D并没有太大的问题，但效果和性能是否能够满足不同的需求，就需要考虑很多细节和额外因素。

  • 首先，无论是PC还是移动端，Chrome是WebGL开发和应用的最佳平台，所以，如果没有特殊的硬性要求，建议大家使用Chrome。
  • IE11对WebGL支持的还可以，但不支持深度纹理，需要升级到Edge；
  • 在移动平台，WebGL调度比较消耗资源，目前的GPU硬件能力的问题，容易造成比如内存崩溃，机器发烫等问题。

image

如上图，红线是我最关心的几个WebGL属性：

  • 是否支持WebGL标准
  • 是否支持ANGLE 扩展： Chrome通过该扩展，在Windows平台下将OpenGL接口转为D3D，不仅提升了性能，而且还可以支持实例化这一重要特性
  • 是否支持深度纹理： 拾取等功能依赖于深度技术
  • 顶点着色器的最大属性数： 一个功能自从诞生之初，就开始趋于复杂，所以我们还要清楚它的极限，合理控制产品的复杂度。

2. 浏览器支持

推荐使用Chrome 90+ 浏览器， 建议升级浏览器到最新版本访问。

IEEdgeFirefoxChromeSafari
不支持90+80+90+14+

修改Mars3D相关参数

如果电脑的GPU显存不足，可以修改Map的构造参数，来降低对GPU的显存要求。 修改scene的参数（未列处的参数可以原样即可）：

{
  
 "scene": {  
    //以下参数必须修改，影响FPS效率，请设置为false
    "showSkyAtmosphere": false, 
    "fog": false,  
    "fxaa": false,  
    "globe": { 
      "showGroundAtmosphere": false 
    },

    //以下可选修改，可以对比FPS后决定
    "scene3DOnly": true,  //如果不用2D，建议设置为true
    "contextOptions": {
      "requestWebgl1": true   //可以尝试用webgl1渲染，如果FPS差别不大可以忽略
    },
  }
}

更多参数可参考API文档