Cesium Fabric —— 材质JSON规范

Fabric 介绍

Fabric 是 Cesium 中用于描述材质的一种 JSON 规定。

材质表现了多边形、折线、椭圆等形状的外观。

使用 Fabric 和 GLSL,可以完全自定义材质

通过几何对象的 material 属性可以创建材质,这个属性是 Cesium.Material 对象。

可以这么用:

javascript 复制代码
// 假设 polygon 是一个 primitive
polygon.appearance.material = Cesium.Material.fromType('color');

这就创建了一个只有颜色的材质,包括透明度的颜色。Cesium.Material.fromType() 方法是一个简写,完整的写法是:

javascript 复制代码
polygon.appearance.material = new Cesium.Material({
  fabric: {
    type: 'Color' // 大写
  }
})

每一个 Material 都可以有 0 ~ N 个 uniform,这个参数在创建时指定,也可以在渲染后修改。例如,color 类型的 Material 就有格式为 rgba 的颜色 uniform:

javascript 复制代码
polygon.appearance.material = new Cesium.Material({
  fabric: {
    type: 'Color',
    uniforms: {
      color: new Cesium.Color(1.0, 0.0, 0.0, 0.5)
    }
  }
})

// 修改颜色
polygon.appearance.material.uniforms.color = Cesium.Color.WHITE

内置材质(23种)

Cesium 有几个内置的材质。列举两个比较常用的

材质类型 描述
type: 'Color' 一个简单的颜色,包括透明通道
type: 'Image' jpg 或 png 贴图类型的材质

所有的内置材质可以简单地使用 Cesium.Material.fromType() 方法创建:

javascript 复制代码
polygon.appearance.material = Cesium.Material.fromType('Image')
polygon.appearance.material.uniforms.image = 'image.png'

或者用全写法:

javascript 复制代码
polygon.appearance.material = new Cesium.Material({
  fabric: {
    type: 'Image',
    uniforms: {
      image: 'image.png'
    }
  }
})

机器生成的规律纹理

材质类型 描述
type: 'Checkerboard' 国际象棋格子
type: 'Stripe' 竖条纹旗帜
type: 'Dot' 行列点阵
type: 'Grid' 线状网格,显示一些网状结构的图形

基础材质

材质类型 描述
type: 'DiffuseMap' 漫反射贴图,即最常见的贴图,通常是 rgb 三个颜色
type: 'SpecularMap' 单通道贴图,表示的是入射光强度贴图
type: 'AlphaMap' 单通道的不透明度贴图
type: 'NormalMap' 三通道贴图,表示的是法线贴图
type: 'BumpMap' 单通道的凹凸贴图
type: 'EmissionMap' 三通道的自发光贴图

折线材质

材质类型 描述
type: 'PolylineArrow' 箭头线,终点在折线末端
type: 'PolylineGlow' 发光线
type: 'PolylineOutline' 描边线

Misc 材质

材质类型 描述
type: 'Water' 水面贴图,看起来有水波动效
type: 'RimLighting' 发边缘会比较亮

自定义材质

使用 fabric 对象 + GLSL 代码和其他素材,就可以创建材质。

如果一个材质不想被复用,那么就不要指定它的 type 属性。

javascript 复制代码
let fabric = {
  // ...
}

polygon.appearance.material = new Cesium.Material({
  fabric: fabric
})

当 fabric 对象中的 type 属性之前是没有指定过的,那么在第一次调用 new Cesium.Material() 时,这个新的 fabric 材质将被缓存,随后再次 new Material 或 Material.fromType() 时将从缓存中取用。

javascript 复制代码
let fabric = {
   type : 'MyNewMaterial',
   // ...其他 fabric JSON 的属性
}
polygon.appearance.material = new Cesium.Material({
  fabric : fabric
});
// ... 然后在另一处需要这个 fabric
anotherPolygon..appearance.material = Material.fromType('MyNewMaterial');
相关推荐
左耳咚2 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu2 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After2 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
用户47949283569154 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在4 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好15 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
明仔的阳光午后6 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人7 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San308 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze8 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js