cesium Material的理解与使用

2024-06-04 23:28
文章标签 使用 理解 material cesium

本文主要是介绍cesium Material的理解与使用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.简介

材质Material可以是比较简单的,比如直接将一张图片赋予表面,或者使用条纹状、棋盘状的图案;也可以使用FabricGLSL,重新创建一个新的材质或者组合现有的材质。例如,我们可以通过程序生成的纹理(procedural brick)、凹凸贴图(bump map)和高光贴图(specular map)来生成一个潮湿碎裂的砖块材质。

2. Fabric是什么

Fabric 是Cesium中定义的描述材质Material的JSON 结构体。Material代表了一个物体的外观

 在Cesium中支持赋予材质的图元都有一个material属性。

polygon.material = Material.fromType('Color');

上边这行代码中,Color是一个内置材质属性,代表了单一颜色,包括透明度(alpha)。Material.fromType是一个快捷的方式,完整的Fabric JSON 应该是这样: 

polygon.material = new Cesium.Material({
  fabric : {
    type : 'Color'
  }
});

注意每一种材质(material)都有uniforms属性,uniforms可以在创建材质(material)时或之后设置。 

polygon.material = new Cesium.Material({
  fabric : {
    type : 'Color',
    uniforms : {
      color : new Cesium.Color(1.0, 0.0, 0.0, 0.5)
    }
  }
});

// Change from translucent red to opaque white
polygon.material.uniforms.color = Cesium.Color.WHITE;
 

3内置材质 

Cesium有一些内置的材质,常用的两种为:

所有内置的材质都可以像我们创建颜色那样简单的创建:

 polygon.material = Material.fromType('Image');
polygon.material.uniforms.image = 'image.png';

 也可以这样创建:建议使用fabric的方式

 polygon.material = new Cesium.Material({
  fabric : {
    type : 'Image',
    uniforms : {
      image : 'image.png'
    }
  }
});

 3.1程式化纹理

程式化纹理不直接依赖于图片文件,而是通过GPU计算而来,他们可以设置漫反射(diffuse)和透明度(alpha)

3.2 基础材质

基础材质较为底层,可以设置基础的材质特性,比如某个方向有多少光线被反射(镜面强度)、或者光线发射量等等。这些材质特性通常组合起来使用,从而创建一个复杂的材质。

3.3多段线(polyline)材质 

多段线材质只可以用于线状的物体。

 3.4 其他材质

更多材质参考 https://cesium.com/learn/cesiumjs/ref-doc/Material.html?classFilter=Material

 4 uniform

很多的材质(material)都有image uniform,定义了图片路径或数据路径

polygon.material.uniforms.image = 'image.png';
polygon.material.uniforms.image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhPrZPRDYQgEEQpjVKuFEvhw0IoxU6QgQwMK+vdx5FsooT3GHdjCM4qZnnnHvvkYoxFi/uvIhwiRCClXFC6v5UQ1uQAsbrkHCLsbaPjFgIzQQc1yUOwu33ePGE3BQUaee2BpjhbP5YUmkAlbNzsAURfBDqJnMIyyv4JjsCCgCnIR32uZUfcJuGBOwEk6bOKhoAADh31EIq3MgFg1mgkE1BA2AoUZoo2iZ3gyqGgmMDC/xWwkfb3/eUd7A1v3kxjNW9taQAAAABJRU5ErkJggg=='
 

一些属性,例如漫反射(diffuse)或法线贴图(NormalMap)的属性,要求图片的每个像素具有RGB三个通道;其他材质属性,例如高光(specular)和透明度(alpha),要求具有一个通道。我们可以指定从纹理图片的那个通道中获取数据,通过channels或者channel来设置。
例如,默认情况下高光specular属性读取r通道,我们可以改变读取的通道: 

polygon.material = new Cesium.Material({
  fabric : {
    type : 'SpecularMap',
    uniforms : {
      image : 'specular.png',
      channel : 'a'
    }
  }
});
 

 允许多个材质从相同的图片中读取数据,例如一张相同的图片即存储了漫反射属性(diffuse)所需的rgb通道,也存储了高光属性(specular)所需的a通道。这样这张图片只会加载一次,节省了资源。

材质material也可以使用images的repeat属性,控制图片在横向和纵向的重复次数。经常被用于在物体表面的瓦片纹理。

polygon.material = new Cesium.Material({
  fabric : {
    type : 'DiffuseMap',
    uniforms : {
      image : 'diffuse.png',
      repeat : {
        x : 10,
        y : 2
      }
    }
  }
});
 

5.创建一个新的材质

创建一个新的材质,可以通过Fabric、一些GLSL代码,以及其他的材质组合起来。
如果新创建的材质只使用一次,可以不设置Type属性

var fabric = {
   // no type
   // ...rest of fabric JSON
};
polygon.material = new Cesium.Material({
  fabric : fabric
});
 

当使用一个新的材质类型type时,材质会在第一次绘制时缓存,之后的绘制(通过new Cesium.Material或者Material.fromType)就可以直接使用缓存的材质,就像使用内置材质一样,不需要提供完整的Fabric描述,只需要通过type和定义需要使用的uniforms即可。 

var fabric = {
   type : 'MyNewMaterial',
   // ...rest of fabric JSON
};
polygon.material = new Cesium.Material({
  fabric : fabric
});
// ... later calls just use the type.
anotherPolygon.material = Material.fromType('MyNewMaterial');
 

5.1 Components 

可能最简单的使用材质的方式就是直接反射白色

var fabric = {
  components : {
    diffuse : 'vec3(1.0)'
  }
}
 

稍微复杂的例子是添加高光反射属性specular component,这样材料的反射光线在直视的时候最强烈,而在斜视时就变弱。

 {
  components : {
    diffuse : 'vec3(0.5)',
    specular : '0.1'
  }
}

components属性包含了定义材料外观的子属性。每个子属性都是一个GLSL代码片段,比如上面示例代码中的vec(0.5)创建了一个3D向量,3D向量中每个分量都被设置为0.5,。
共有以下几个子属性:

属性名默认值描述
漫反射
diffuse
'vec3(0.0)'漫反射属性是一个三维向量vec3,这个向量定义了光在所有方向上的散射值。
高光
specular
0.0高光属性,使用浮点数定义了单一方向上的反射强度。
光泽度
shininess
1.0镜面反射的光泽度。越高的值创建一个更小、更集中的镜面高光。
法线
normal
材质的法线属性是一个三维向量vec3,定义了视点坐标系下的表面法向量。通常用于法向贴图。默认值是物体表面默认的发现。
自发光
emission
'vec3(0.0)'自发光属性使用三维向量vec3定义,定义了在所有方向上灯光发出的颜色值。默认是vec3(0.0),也就是不发光。
alpha1.0阿法尔通道使用浮点数定义,0.0表示全透,1.0表示不透明。

 总的来说,这些子属性定义了材质的特点,他们是材质material的输出值,同时也是光照系统的输入值。

5.2 Source

source属性通过为czm_getMaterial函数定义GLSL代码的方式,提供了一个更加灵活的定义材质的方式。

struct czm_materialInput
{
    float s;
    vec2 st;
    vec3 str;
    mat3 tangentToEyeMatrix;
    vec3 positionToEyeEC;
    vec3 normalEC;
};

struct czm_material
{
    vec3 diffuse;
    float specular;
    float shininess;
    vec3 normal;
    vec3 emission;
    float alpha;
};

czm_material czm_getMaterial(czm_materialInput materialInput);
 

使用source最简单的方式是每一个属性都直接返回默认值 

czm_material czm_getMaterial(czm_materialInput materialInput)
{
    return czm_getDefaultMaterial(materialInput);
}
 

Fabric定义

{ source : 'czm_material czm_getMaterial(czm_materialInput materialInput) { return czm_getDefaultMaterial(materialInput); }' } 

我们把之前的例子中通过source来实现的: 

// 通过FABRIC 定义
{
    components : {
        diffuse : 'vec3(0.5)',
        specular : '0.1'
    }
}

// 通过source
{
    source:`
        czm_material czm_getMaterial(czm_materialInput materialInput)
    {
        czm_material m = czm_getDefaultMaterial(materialInput);
        m.diffuse = vec3(0.5);
        m.specular = 0.5;
        return m;
    }`
}
 

使用source代替components的方式代码量更加多,但也会更加灵活,包括可以为不同的组件公用相同的计算逻辑和函数。一个经验法则是在大多数情况下使用components,除非需要用到czm_getMaterial的灵活性。在底层实现上,components子属性也是通过czm_getMaterial来实现的。在这两种方式下,我们都可以用到GLSLCesium提供的内置的函数、变量、常量等。 

5.3 Input 

materialInput变量在sourcecomponents属性中都是有效的,materialInput具有以下参数字段

名称类型描述
**s**float一维纹理坐标
**st**vec2二维纹理坐标
**str**vec3三维纹理坐标。> 注意:一维、二维、三维纹理坐标之间并不一定分量相同,不能保证str.st == st and st.s == s。例如,对于一个椭圆体,一维纹理坐标s可能是从底部到顶部,二维纹理坐标st是经纬度坐标,三维纹理坐标是沿着坐标轴的包围盒。

|
**tangentToEyeMatrix** | mat3 | 片元切线空间到视点坐标系的转换矩阵,通常用于法线贴图和凹凸贴图中。 |
**positionToEyeEC** | vec3 | 在视点坐标系下从片元到视点的向量,用于反射、折射等等。值大小表示从片元到视点的距离。 |
**normalEC** | vec3 | 片元在视点坐标系下单位化后的发现了,用于凹凸贴图、反射、折射等。 |

一个使用二维纹理坐标st的简单材质使用如下:

{components : {diffuse : 'vec3(materialInput.st, 0.0)'}
}

同样的我们可以设置materialInput.normalECdiffuse,以在视点坐标系下法线的可视化。
除此之外,对于materialInput,材质还可以使用uniform变量,不管是Cesium内置的uniforms还是材质特定的uniforms
例如,我们可以实现我们自己的Color材质,基于color uniform设置diffuse以及alpha属性。

{type : 'OurColor',uniforms : {color : new Color(1.0, 0.0, 0.0, 1.0)},components : {diffuse : 'color.rgb',alpha : 'color.a'}
}

Fabric中,uniform属性的子属性也是**GLSL**中的uniforms的名称,以及使用new Material以及Material.fromType中的返回的**JavaScript**对象。子属性的值也是uniform的值(对于标量及向量)。
我们可以通过image uniform实现我们自己的diffuseMap属性

{type : 'OurDiffuseMap',uniforms : {image : 'czm_defaultImage'},components : {diffuse : 'texture2D(image, materialInput.st).rgb'}
}

在上面代码中,'czm_defaultImage'是一个1x1占位符图像,也可以使用图像URL或数据URL来指定纹理图像。例如,用户可以这样来创建一个OurDiffuseMap

polygon.material = Material.fromType('OurDiffuseMap');
polygon.material.uniforms.image = 'diffuse.png';

还有一个立方图占位符 czm_defaultCubeMap。支持标准的GLSLuniform 类型,floatvec3mat4等等。Uniform数组还不支持。

5.4组合材质

到目前为止,我们可以使用内置材质,或者创建我们自己的材质。我们也可以从现有的材质中创建材质(递归),形成材质的层次结构。

材质Fabric具有materials属性,这个materials属性的子属性的值都是一个材质Fabric,也就是一种材质。这些materials可以在componentssource属性中引用。例如,一个代表塑料的材质可以通过设置diffuseMapspecularMap来实现。

{type : 'OurMappedPlastic',materials : {diffuseMaterial : {type : 'DiffuseMap'},specularMaterial : {type : 'SpecularMap'}},components : {diffuse : 'diffuseMaterial.diffuse',specular : 'specularMaterial.specular'}
};

上边这段代码中,components属性中有漫反射diffuse以及镜面反射specular属性,他们从材质的materials属性中提取数值。命名为diffuseMaterial及 specularMaterial的子属性(通过类型DiffuseMapSpecularMap创建,不要混淆了名称——实例——类型(也可以叫类))。在componentssource属性中,子属性可以通过字段名来访问,就像他们是czm_material结构体,因此在上面代码中通过.diffuse.specular字段可以访问。

鉴于这一点,我们的材质material可以像其他材质material一样被使用。

6、渲染管线中的材质(使用GLSL自定义材质)

几何对象包括 PolygonPolylineCollectionEllipsoidCustomSensorVolume,等,都与材质系统整合以支持材质。大多数用户只需简单设置他们所需的材质属性即可,但对于想用书写自定义渲染代码的用户,可能也需要与材质系统结合。

从渲染的角度,材质是GLSL 函数,czm_getMaterial,以及uniforms的组合。片元着色器需要构造一个czm_MaterialInput,调用czm_getMaterial函数,之后将计算的czm_material结果传递给lighting函数,以计算片元着色器颜色。

在JavaScript中,对象应该有一个公共的material属性。当这个属性变化时,update函数应该将材质中的GLSL源预置到几何对象的片元着色器中,并且组合几何对象和材料的uniforms

var fsSource =this.material.shaderSource +ourFragmentShaderSource;this._drawUniforms = combine([this._uniforms, this.material._uniforms]);

这篇关于cesium Material的理解与使用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1031429

相关文章

中文分词jieba库的使用与实景应用(一)

知识星球:https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义: 精确模式(默认模式): 全模式: 搜索引擎模式: paddle 模式(基于深度学习的分词模式): 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取

使用SecondaryNameNode恢复NameNode的数据

1)需求: NameNode进程挂了并且存储的数据也丢失了,如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2)故障模拟 (1)kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 (2)删除NameNode存储的数据(/opt/module/hadoop-3.1.4/data/tmp/dfs/na

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

Makefile简明使用教程

文章目录 规则makefile文件的基本语法:加在命令前的特殊符号:.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具,常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据,将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的