技术标签: cesium 案例分享 fabric 前端 着色器 javascript
Fabric是一种 JSON 模式,用于描述Cesium 中的材料。材质表示对象的外观,例如多边形、折线、椭圆体和传感器。
材料可以很简单,例如将图像覆盖在对象上,或应用条纹或棋盘等图案。使用 Fabric 和 GLSL,可以从头开始编写新材料,或者通过在层次结构中组合现有材料来创建新材料;例如,可以使用程序砖、凹凸贴图和高光贴图材料的组合来创建湿碎砖。.
Objects that support materials have a material
property. Currently, these objects are polygons, polylines, ellipsoids, and sensors. Materials are applied by assigning to the object’s material
property.
支持材料的对象具有material
属性。目前,这些对象是多边形、折线、椭圆体和传感器。通过分配给对象的material
属性来应用材料。
解释:
polygon.material = Material.fromType('Color');
Above, Color
is a built-in material which represents a single color, including alpha. Material.fromType
is shorthand; the entire Fabric JSON can also be provided.
上面,Color
是默认内置材质,代表单一颜色,包括alpha透明度。Material.fromType
是简写形式;也可以直接提供完整的Fabric JSON。
解释:
Color是Fabric默认提供的单色材质,它包含颜色值和透明度信息。
除了使用Material.fromType简写方式创建材质,也可以直接提供材质的完整Fabric JSON定义。
开发者可以根据需求选择其中一种方式创建所需材质。简单来说,就是在Fabric中创建材质有两种方式:
polygon.material = new Cesium.Material({
fabric : {
type : 'Color'
}
});
Each material has zero or more uniforms, which are input parameters that can be specified when creating the material and modified after. For example, Color
has a color
uniform with red
, green
, blue
, and alpha
components.
每个材质有0个或多个uniforms,它们是在创建材质时可以指定和之后可以修改的输入参数。例如,Color材质有一个color uniforms,包含red,green,blue和alpha组件。
解释:
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;
Cesium 有几种内置材质。两个广泛使用的是:
类型(type) | 截图 | 描述 |
---|---|---|
Color |
单一颜色,包括用于半透明的 alpha | |
Image |
An image with or without an alpha channel such as .png or .jpg; a combination of diffuse, rgb , and alpha, a , components. 一个包含或不包含alpha通道的图像,例如.png或.jpg;由漫反射的rgb组件和alpha透明度a组件组合而成 |
所有内置材质都可以像我们Color
上面使用的那样创建. 例如:
polygon.material = Material.fromType('Image');
polygon.material.uniforms.image = 'image.png';
或者
polygon.material = new Cesium.Material({
fabric : {
type : 'Image',
uniforms : {
image : 'image.png'
}
}
});
程序纹理材质在 GPU 上按程序计算模式,因此它们不依赖于外部图像文件。它们代表漫反射和 alpha 分量
类型(type) | Screenshot | Description |
---|---|---|
Checkerboard |
浅色和深色交替的棋盘。 | |
Stripe |
明暗交替的水平或垂直条纹 | |
Dot |
按行和列组织的点图案 | |
Grid |
线条网格,可用于显示 3D 体积. |
基础材质代表细粒度的基本材质特征,比如入射光在一个方向上反射的量,即高光反射强度,或者发出的光的量,即发光量。这些材质可以直接使用,但更常见的情况是使用Fabric将其组合起来创建更复杂的材质.
解释:
- 基础材质:SpecularMaterial、EmissionMaterial等
- 细粒度的基本材质特征:高光反射强度、发光量等
- SpecularMaterial:控制高光反射,即反射入射光线的量
- EmissionMaterial: 发光材质,控制自身发出的光线量
- 这些基础材质可以直接使用,也可以组合创建复杂材质
Fabric提供了SpecularMaterial、EmissionMaterial等基础材质。
这些材质表示细粒度的基本特征,如高光反射强度和发光量。
SpecularMaterial用于控制高光反射,EmissionMaterial用于产生发光效果。这些基础材质既可以直接使用,也可以通过Fabric的材质组合方式混合使用,从而创建更加复杂的材质。
基础材质作为材质系统的基石,组合而成的复杂材质才能实现丰富的视觉效果。
简单来说,就是:
类型(type) | Screenshot | Description |
---|---|---|
DiffuseMap |
vec3 具有定义在所有方向上均匀散射的入射光的组件的图像. |
|
SpecularMap |
具有标量分量的图像定义了沿单个方向反射的入射光的强度。这用于使表面的部分有光泽,例如,水与陆地 | |
AlphaMap |
具有定义材质不透明度的标量分量的图像。这用于使部分表面半透明或透明,例如栅栏. | |
NormalMap |
vec3 具有在切坐标中定义表面法线的组件的图像。法线贴图用于在不添加几何体的情况下添加表面细节. |
|
BumpMap |
具有定义高度的标量分量的图像。与法线贴图一样,凹凸贴图用于通过基于相邻图像像素的差异扰动法线来添加表面细节而不添加几何体. | |
EmissionMap |
vec3 具有定义材料在所有方向上均匀发射的光的组件的图像,例如,长走廊中的灯. |
折线材质是只能添加到线条中的材质.
类型(type) | Screenshot | Description |
---|---|---|
PolylineArrow |
在直线的终点放置一个箭头. | |
PolylineGlow |
制作发光的线条. | |
PolylineOutline |
线条轮廓. |
有一些材料不属于任何其他类别.
Name | Screenshot | Description |
---|---|---|
Water |
用波浪和涟漪动画水. | |
RimLighting |
突出边缘或轮廓. |
更多材质参见Cesium Materials Plugin
Many materials have a image
uniform, which is an image URL or data URI.
许多材质都有一个image
的uniforms,它是一个图像URL或data URI。
解释
:- image uniform:贴图uniforms,用于接收图像URL或data URI
- 图像URL:图片资源的网络URL地址
- data URI:包含图片二进制数据的URI方案
许多Fabric材质具有image uniforms,用于接收图像URL或data URI。
这使得材质可以应用图像贴图,产生丰富的视觉细节。
开发者可以将图像URL或data URI赋值给image uniforms,为材质应用上图片贴图。
简单来说,就是:
许多材质支持图像贴图,具有image uniforms可以接收图像源;
图像源可以是图片URL或data URI两种形式;
给image uniforms赋值图像源,可以为材质应用图像贴图。
polygon.material.uniforms.image = 'image.png';
polygon.material.uniforms.image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAC/SURBVDhPrZPRDYQgEEQpjVKuFEvhw0IoxU6QgQwMK+vdx5FsooT3GHdjCM4qZnnnHvvkYoxFi/uvIhwiRCClXFC6v5UQ1uQAsbrkHCLsbaPjFgIzQQc1yUOwu33ePGE3BQUaee2BpjhbP5YUmkAlbNzsAURfBDqJnMIyyv4JjsCCgCnIR32uZUfcJuGBOwEk6bOKhoAADh31EIq3MgFg1mgkE1BA2AoUZoo2iZ3gyqGgmMDC/xWwkfb3/eUd7A1v3kxjNW9taQAAAABJRU5ErkJggg=='
Some materials, such as Diffuse
and NormalMap
require images with three components per pixel; other materials, such as Specular
and Alpha
, require one component. We can specify what channels (and in what order) these components are pulled from when creating a material using the channels
or channel
string uniform. For example, by default in the Specular
material, the specular component is taken from the r
channel. However, we can change that:
一些材质,比如Diffuse和NormalMap,需要每个像素都有三个颜色分量的图像;其他材质,比如Specular和Alpha,需要一个颜色分量。在创建材质时,我们可以通过channels或者channel字符串形的uniforms来指定从哪个通道(以及什么顺序)提取这些分量。例如,在Specular材质中,默认情况下高光分量是从r通道提取的。然而,我们可以更改这个设置:
解释:
polygon.material = new Cesium.Material({
fabric : {
type : 'SpecularMap',
uniforms : {
image : 'specular.png',
channel : 'a'
}
}
});
This allows packing data for multiple materials into the same image, e.g., storing diffuse components as rgb
and specular components as a
in the same image. Under the hood, the image will also be loaded once.
这使我们能够将多个材质的数据打包到同一图像中,例如,在同一图像中将漫反射分量作为rgb存储,高光分量作为a存储。在底层,图像也只会加载一次。
Materials that use images often have a repeat
uniform that controls the number of times the image repeats horizontally and vertically. This can be useful for tiling images across a surface.
使用图像的材质通常具有repeat uniforms,用于控制图像在水平和垂直方向重复的次数。这在于表面贴图重复图像时很有用。
解释:
polygon.material = new Cesium.Material({
fabric : {
type : 'DiffuseMap',
uniforms : {
image : 'diffuse.png',
repeat : {
x : 10,
y : 2
}
}
}
});
New materials are created using Fabric, a bit of GLSL, and potentially other materials.
If a material is not going to be reused, it can be created without a type
.
新的材质是使用Fabric、一些GLSL和可能的其他材质创建的。
如果一个材质不会被重复使用,可以在创建时不指定type。
解释:-
Fabric:Fabric.js 中的材质系统,用于创建材质
- GLSL: openGL着色语言,用于自定义片元着色器的代码
- 不重复使用的材质可以不指定type,直接作为匿名对象创建
在Fabric中,新的材质是通过Fabric材质系统和GLSL着色语言创建的,也可以引用其他现有材质。
如果某个材质只在一个对象上使用,不会被重复引用,那么在创建时可以不指定type,作为一个普通的匿名材质对象。
简单来说,就是:
这两句话的作用是介绍Fabric中创建新材质的两种方式:
var fabric = {
// no type
// ...rest of fabric JSON
};
polygon.material = new Cesium.Material({
fabric : fabric
});
When a non-existing type
is used, the material is cached during the first call to new Cesium.Material
, and later calls to new Cesium.Material
or Material.fromType
can reference the material as if it were a built-in material, i.e., they don’t need to provide the full Fabric, just the type
and any uniforms
they want to set.
当使用一个不存在的type时,在第一次调用new Cesium.Material时材质会被缓存,后续对new Cesium.Material或Material.fromType的调用可以像内置材质一样引用该材质,也就是说,它们不需要提供完整的Fabric,只需要提供type和任何想要设置的uniforms。
解释:
-不存在的type:自定义的材质类型
- 第一次创建材质时会被缓存
- 后续可以通过type引用该材质,不需要再次提供Fabric
- 只需要提供type和需要修改的uniforms参数
当使用一个自定义的、不存在的材质type时,第一次创建该材质时需要提供Fabric。
该材质会被缓存,之后可以通过type引用该材质,不需要再次提供Fabric。
后续对该材质的引用只需要提供type和需要更新的uniforms参数。
这使得自定义材质可以像内置材质一样方便使用,只需要提供type即可。
简单来说,就是:
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');
也许最简单有趣的材质是在各个方向反射白色的材料:
var fabric = {
components : {
diffuse : 'vec3(1.0)'
}
}
A slightly more complicated example adds a specular component so that the material’s reflected light is most intense when viewed straight down, and becomes less intense as viewed edge-on.
稍微复杂一点的例子添加了高光成分,这样材质的反射光在正面观察时最强烈,在边缘观察时光强降低。
解释
:- 高光成分:specular component,控制材质的高光反射
- 正面观察最强烈:当视角垂直于物体表面时,高光最强
- 边缘观察光强降低:当视角接近平行于物体表面时,高光变弱
一个稍微复杂一些的材质例子增加了高光成分(specular component)。
这样,当我们正面观察物体时,材质的高光反射最强烈。
而当我们从物体的边缘视角观察时,高光的强度会逐渐降低。
简单来说,就是:
{
components : {
diffuse : 'vec3(0.5)',
specular : '0.1'
}
}
The components
property contains sub-properties that define the appearance of the material. The value of each sub-property is a GLSL code snippet, hence the vec3(0.5)
above, which creates a 3D vector with each component set to 0.5
. These have access to all GLSL functions like mix
, cos
, texture2D
, etc. There are five sub-properties.
components属性包含定义材质外观的子属性。每个子属性的值是一个GLSL代码段,因此上面的vec3(0.5)创建了一个3D向量,其每个分量设置为0.5。这些子属性可以访问所有GLSL函数,如mix、cos、texture2D等。一共有五个子属性。
解释:
components属性:包含定义材质外观的子属性
- 子属性的值是GLSL代码段:用于计算最终颜色/深度等
- vec3(0.5)是一个GLSL代码段,创建向量
- 可以使用各种GLSL函数
- 一共五个子属性:diffuse、ambient、specular、emissive、normal
var material = {
components: {
diffuse: 'vec3(0.8)', // 漫反射,返回颜色
specular: 'mix(vec3(1.0), baseColor, 0.5)', // 高光,使用mix函数混合颜色
normal: 'texture2D(normalMap, vUv)' // 法线,使用texture2D采样贴图
}
};
components属性包含五个子属性,用于定义材质的外观。
每个子属性的值是一个GLSL代码段,用于计算最终的颜色、深度等。
这些代码段可以使用多种GLSL函数,例如mix、cos、texture2D等。
例如,vec3(0.5)是一个GLSL代码段,用于创建一个3D向量,每个分量的值为0.5。
简单来说,就是:
Name | Default | Description |
---|---|---|
diffuse |
'vec3(0.0)' |
The diffuse component of this material. The diffuse component is a vec3 defining incoming light that scatters evenly in all directions. 该材质的漫反射组件。漫反射组件是一种vec3 定义性的入射光,它在各个方向上均匀散射 |
specular |
0.0 |
The specular component of this material. The specular component is a float defining the intensity of incoming light reflecting in a single direction.这种材料的镜面反射分量。镜面反射分量是一个浮点数,定义了在一个方向上反射的入射光的强度 |
shininess |
1.0 |
The sharpness of the specular reflection. Higher values create a smaller, more focused specular highlight. 镜面反射的锐度。较高的值会创建更小、更集中的镜面高光 |
normal |
The normal component of this material. The normal component is a vec3 defining the surface’s normal in eye coordinates. It is used for effects such as normal mapping. The default is the surface’s unmodified normal.这种材料的正常成分。法线分量是vec3 在眼睛坐标中定义表面的法线。它用于法线贴图等效果。默认值为表面未修改的法线 |
|
emission |
'vec3(0.0)' |
The emission component of this material. The emission component is a vec3 defining light emitted by the material equally in all directions. The default is vec3(0.0) , which emits no light.这种材料的发射成分。发射分量是vec3 材料在所有方向上均匀发射的定义光。默认值为vec3(0.0) ,即不发光 |
alpha |
1.0 |
The alpha component of this material. The alpha component is a float defining the opacity of this material. 0.0 is completely transparent; 1.0 is completely opaque.此材质的 alpha 分量。alpha 组件是一个浮点数,定义了该材质的不透明度。 0.0 是完全透明的;1.0 是完全不透明的 |
Together, these sub-properties, or components define the characteristics of the material. They are the output of the material, and the input to the lighting system.
这些子属性或组件共同定义了材料的特性。它们是材质的输出,也是照明系统的输入。
An alternative to the components
property that provides more flexibility is to provide complete GLSL source for a function, czm_getMaterial
, that returns the material’s components. The signature is:
一个比components属性提供更多灵活性的替代方法是提供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);
最简单的可能实现是返回每个组件的默认值
czm_material czm_getMaterial(czm_materialInput materialInput)
{
return czm_getDefaultMaterial(materialInput);
}
这个 Fabric看起来像:
{
source : 'czm_material czm_getMaterial(czm_materialInput materialInput) { return czm_getDefaultMaterial(materialInput); }'
}
我们上面的示例材料中的 setsdiffuse
和specular
components 可以实现为:
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material m = czm_getDefaultMaterial(materialInput);
m.diffuse = vec3(0.5);
m.specular = 0.5;
return m;
}
Using source
instead of components
is more verbose, but provides more flexibility, including the ability to share common computations for different components and to make utility functions. A rule of thumb is to use the components
property unless the flexibility of explicitly implementing czm_getMaterial
is needed. Under the hood, the components
sub-properties are used to implement czm_getMaterial
. In both cases, we have access to GLSL built-in functions and Cesium provided built-in GLSL functions, uniforms, and constants.
使用source
instead ofcomponents
更冗长,但提供了更大的灵活性,包括共享不同组件的通用计算和创建实用函数的能力。经验法则是使用该属性,除非需要components
显式实现的灵活性。czm_getMaterial
在引擎盖下,components
子属性用于实现czm_getMaterial
。 在这两种情况下,我们都可以访问 GLSL 内置函数和 Cesium 提供的内置 GLSL functions, uniforms, and constants.(函数、制服和常量)
The materialInput
variable is available in both source
and components
. It has the following fields that can be used to compute material components.
materialInput变量在source和components中都可用。它有以下字段,可用于计算材质组件:
Name | Type | Description |
---|---|---|
s |
float |
A 1D texture coordinate. 一维纹理坐标 |
st |
vec2 |
2D texture coordinates. 二维纹理坐标 |
str |
vec3 |
3D texture coordinates. The 1D, 2D, and 3D texture coordinates are not necessarily proper subsets of each other, e.g., str.st == st and st.s == s are not guaranteed. For example, for an ellipsoid, s might go from bottom to top; st might be longitude and latitude; and str might be along the axes of the bounding box.3D纹理坐标。1D、2D和3D纹理坐标不一定是彼此的真子集,例如,str.st == st和st.s == s 并不一定成立。例如,对于椭球体,s可能从底部到顶部;st可能是经度和纬度;str可能沿着边界框的轴 |
tangentToEyeMatrix |
mat3 |
A transformation matrix from the fragment’s tangent space to eye coordinates, for normal mapping, bump mapping, etc从片段的切线空间到眼睛坐标的变换矩阵,用于法线贴图、凹凸贴图等. |
positionToEyeEC |
vec3 |
A vector from the fragment to the eye in eye coordinates, for reflection, refraction, etc. The magnitude is the distance in meters from the fragment to the eye.在眼睛坐标中从片段到眼睛的向量,用于反射、折射等。幅度是从片段到眼睛的距离(以米为单位) |
normalEC |
vec3 |
The fragment’s normal (normalized) in eye coordinates, for bump mapping, reflection, refraction, etc片段在眼睛坐标中的法线(归一化),用于凹凸贴图、反射、折射等. |
A可视化纹理坐标的简单材质st
是:
{
components : {
diffuse : 'vec3(materialInput.st, 0.0)'
}
}
Similarly, we can visualize the normal in eye coordinates by setting diffuse
to materialInput.normalEC
.
In addition to materialInput
, materials have access to uniforms, both Cesium provided built-in uniforms and uniforms specific to the material. For example, we can implement our own Color
material by setting the diffuse
and alpha
components based on a color uniform.
同样,我们可以通过将diffuse设置为materialInput.normalEC来以眼睛坐标可视化法线。
除了materialInput,材质还可以访问uniform,包括Cesium提供的内建uniform和特定于材质的uniform。例如,我们可以通过基于颜色uniform设置diffuse和alpha组件来实现自己的Color材质。
解释:
materialInput.normalEC:以眼睛坐标表示的法线向量
- 可以用于在片元着色器中计算漫反射光照
- uniform:全局变量,在shader之间共享
- Cesium提供内建uniform,用于不同信息
- 也可以定义特定于材质的uniform,如颜色uniform
- 可以在GLSL中使用uniform,如设置diffuse颜色
同样,我们可以通过将diffuse设置为materialInput.normalEC来以眼睛坐标表示法线,用于在片元着色器中计算光照。
除了materialInput变量,材质还可以访问uniform,包括Cesium提供的内建uniform和特定于材质的uniform。
例如,我们可以定义一个颜色uniform,并在GLSL中使用它来设置diffuse和alpha,以实现一个简单的Color材质。
简单来说,就是:
{
type : 'OurColor',
uniforms : {
color : new Color(1.0, 0.0, 0.0, 1.0)
},
components : {
diffuse : 'color.rgb',
alpha : 'color.a'
}
}
In Fabric, the uniform
property’s sub-properties are the names of the uniforms in GLSL and the JavaScript object returned from new Material
and Material.fromType
. The sub-properties’s values (for scalars) or sub-properties (for vectors) are the value of the uniform.
在Fabric中,uniform属性的子属性是GLSL中的uniform名称和从new Material和Material.fromType返回的JavaScript对象。子属性的值(对于标量)或子属性(对于矢量)是uniform的值
解释:
uniform属性:在材质uniform属性中定义uniform
- 子属性:uniform名称,如color、mvMatrix等
- 子属性的值:uniform的值,可以是标量或矢量
- new Material和Material.fromType:创建材质的方式
- 从这两种方式创建的材质,可以访问uniform属性设置的uniform
在Fabric中,uniform属性用来在材质中定义uniform。
uniform属性的子属性是uniform的名称,如color、mvMatrix等。
这些子属性的值是uniform的值,对于标量uniform是标量值,对于矢量uniform是对象。
从new Material和Material.fromType创建的材质对象可以访问在uniform属性中定义的uniform,并设置或获取uniform的值。
简单来说,就是:
We can implement our own DiffuseMap
material by using an image uniform:
我们可以通过使用图像uniform来实现自己的DiffuseMap材质
解释:-
uniform sampler2D diffuseMap:图像uniform,类型为sampler2D
- 使用texture2D函数和纹理坐标采样该图像
- …/dirt.jpg:图像路径,作为diffuseMap uniform的值
- v_diffuseMapTexCoord: 从ellipsoid获取纹理坐标
- 在片元着色器中使用采样得到的颜色设置最终颜色
我们可以定义一个sampler2D类型的图像uniform diffuseMap,并设置其值为图像路径。
在片元着色器中,使用texture2D函数和v_diffuseMapTexCoord计算的纹理坐标对该图像进行采样,得到颜色。
然后使用该颜色设置最终片元颜色,从而实现一个简单的DiffuseMap材质。
简单来说,就是:
{
type : 'OurDiffuseMap',
uniforms : {
image : 'czm_defaultImage'
},
components : {
diffuse : 'texture2D(image, materialInput.st).rgb'
}
}
Above, 'czm_defaultImage'
is a placeholder 1x1 image. As discussed earlier, this can also be an image URL or data URI. For example, a user would create an OurDiffuseMap
like:
上述,'czm_defaultImage’是一个占位符1x1图像。如前所述,这也可以是图像URL或数据URI。例如,用户可以创建一个OurDiffuseMap,如下:
polygon.material = Material.fromType('OurDiffuseMap');
polygon.material.uniforms.image = 'diffuse.png';
There is also a cube-map placeholder, czm_defaultCubeMap
. The standard GLSL uniform types, float
, vec3
, mat4
, etc. are supported. Uniform arrays are not supported yet, but are on the roadmap.
还有一个立方体贴图占位符,czm_defaultCubeMap。支持标准的GLSL uniform类型,如float、vec3、mat4等。Uniform数组尚未支持,但已在路线图中
So far, we can use the built-in materials, or create our own by using Fabric to specify the material’s components or full GLSL source. We can also build materials from existing materials (recursively) forming a hierarchy of materials.
Fabric has a materials
property where the value of each sub-property is Fabric, i.e., a material. These materials can be referenced in the components
and source
properties so they can be built upon. For example, a material representing plastic can be implemented with a DiffuseMap
and SpecularMap
.
到目前为止,我们可以使用内置材质,也可以使用Fabric指定材质的组件或完整的GLSL源代码来创建自己的材质。我们还可以从现有材质(递归地)构建材质,形成材质层次结构。
Fabric有一个materials属性,其每个子属性的值都是Fabric,即材质。这些材质可以在components和source属性中引用,以便建立在其上。例如,代表塑料的材质可以通过DiffuseMap和SpecularMap实现。
{
type : 'OurMappedPlastic',
materials : {
diffuseMaterial : {
type : 'DiffuseMap'
},
specularMaterial : {
type : 'SpecularMap'
}
},
components : {
diffuse : 'diffuseMaterial.diffuse',
specular : 'specularMaterial.specular'
}
};
This material has diffuse
and specular
components that pull values from materials in the materials
property. The sub-materials are named diffuseMaterial
and specularMaterial
(created from types DiffuseMap
and SpecularMap
; do not confuse the name - the instance - and the type - the class so to speak). In the components
and source
properties, sub-materials are accessed by name as if they were an czm_material
structure, hence the .diffuse
and .specular
field accesses above.
该材质具有从materials属性中的材质中获取值的diffuse和specular组件。子材质命名为diffuseMaterial和specularMaterial(从DiffuseMap和SpecularMap类型创建;不要混淆名称 - 实例 - 和类型 - 可以说是类)。在components和source属性中,子材质按名称访问,就像它们是一个czm_material结构,因此上面的.diffuse和.specular字段访问。
Given this Fabric, our material can be used like other materials.
给定此Fabric,我们的材质可以像其他材质一样使用。
var m = Material.fromType('OurMappedPlastic');
polygon.material = m;
m.materials.diffuseMaterial.uniforms.image = 'diffuseMap.png';
m.materials.specularMaterial.uniforms.image = 'specularMap.png';
TODO: links to reference doc.
TODO: links to Sandcastle.
TODO: need simple but inspiring examples of writing custom materials with Fabric.
A JSON Schema for Fabric is in the Cesium repo. This details all Fabric properties and sub-properties, including type
, materials
, uniforms
, components
, and source
. There are several JSON examples showing the schema, but not necessarily interesting visuals.
In addition to more rigorous Fabric documentation, the schema can be used to validate Fabric using a tool like JSV.
Cesium repo中有一个Fabric的JSON Schema。它详细列出了所有Fabric属性和子属性,包括type、materials、uniforms、components和source。有几个JSON示例显示了该模式,但不一定有趣的视觉效果。除了更严格的Fabric文档外,该模式还可以使用像JSV这样的工具来验证Fabric
Objects like Polygon, PolylineCollection, Ellipsoid, CustomSensorVolume, etc. integrate with the material system to support materials. Most users will simply assign to their material
property and be done. However, users writing custom rendering code may also want to integrate with materials. Doing so is straightforward.
对象如Polygon、PolylineCollection、Ellipsoid、CustomSensorVolume等等都与材质系统集成在一起以支持材质。大多数用户仅需要将其material属性赋值即可。但是,编写自定义渲染代码的用户也可能想要与材质集成。这样做很简单
From the rendering perspective, a material is a GLSL function, czm_getMaterial
, and uniforms. The fragment shader needs to construct an czm_MaterialInput
, call czm_getMaterial
, and then pass the resulting czm_material
to the lighting function to compute the fragment’s color.
从渲染的角度来看,材质是一个GLSL函数czm_getMaterial和uniform。片段着色器需要构造一个czm_MaterialInput,调用czm_getMaterial,然后将结果czm_material传递给照明函数来计算片段的颜色。
In JavaScript, the object should have a public material
property. When this property changes, the update
function should prepend the material’s GLSL source to the object’s fragment shader’s source, and combine the uniforms of the object and the material.
在JavaScript中,对象应该有一个公共material属性。当此属性更改时,update函数应该将材质的GLSL源代码预先追加到对象的片段着色器的源代码,并组合对象和材质的uniform。
var fsSource =
this.material.shaderSource +
ourFragmentShaderSource;
this._drawUniforms = combine([this._uniforms, this.material._uniforms]);
文章浏览阅读3.3k次,点赞7次,收藏39次。CPU 执行现行程序的过程中,出现某些急需处理的异常情况或特殊请求,CPU暂时中止现行程序,而转去对异常情况或特殊请求进行处理,处理完毕后再返回现行程序断点处,继续执行原程序。void 函数名(void) interrupt n using m {中断函数内容 //尽量精简 }编译器会把该函数转化为中断函数,表示中断源编号为n,中断源对应一个中断入口地址,而中断入口地址的内容为跳转指令,转入本函数。using m用于指定本函数内部使用的工作寄存器组,m取值为0~3。该修饰符可省略,由编译器自动分配。_51单片机中断篇
文章浏览阅读396次。项目经验(案例一)项目时间:2009-10 - 2009-12项目名称:中驰别克信息化管理整改完善项目描述:项目介绍一,建立中驰别克硬件档案(PC,服务器,网络设备,办公设备等)二,建立中驰别克软件档案(每台PC安装的软件,财务,HR,OA,专用系统等)三,能过建立的档案对中驰别克信息化办公环境优化(合理使用ADSL宽带资源,对域进行调整,对文件服务器进行优化,对共享打印机进行调整)四,优化完成后..._网络工程师项目经历
文章浏览阅读1k次,点赞31次,收藏30次。LVS:Linux Virtual Server,负载调度器,内核集成, 阿里的四层SLB(Server Load Balance)是基于LVS+keepalived实现。NATTUNDR优点端口转换WAN性能最好缺点性能瓶颈服务器支持隧道模式不支持跨网段真实服务器要求anyTunneling支持网络private(私网)LAN/WAN(私网/公网)LAN(私网)真实服务器数量High (100)High (100)真实服务器网关lvs内网地址。
文章浏览阅读899次。https://www.toutiao.com/a6713171323893318151/作者 | 黄小邪/言有三编辑 | 黄小邪/言有三图像预处理算法的好坏直接关系到后续图像处理的效果,如图像分割、目标识别、边缘提取等,为了获取高质量的数字图像,很多时候都需要对图像进行降噪处理,尽可能的保持原始信息完整性(即主要特征)的同时,又能够去除信号中无用的信息。并且,降噪还引出了一..._噪声很大的图片可以降噪吗
文章浏览阅读152次。目录谨慎地覆盖cloneCloneable接口并没有包含任何方法,那么它到底有什么作用呢?Object类中的clone()方法如何重写好一个clone()方法1.对于数组类型我可以采用clone()方法的递归2.如果对象是非数组,建议提供拷贝构造器(copy constructor)或者拷贝工厂(copy factory)3.如果为线程安全的类重写clone()方法4.如果为需要被继承的类重写clone()方法总结谨慎地覆盖cloneCloneable接口地目的是作为对象的一个mixin接口(详见第20_为继承设计类有两种选择,但无论选择其中的
文章浏览阅读958次,点赞21次,收藏24次。今天学长向大家分享一个毕业设计项目基于协同过滤的电影推荐系统项目运行效果:项目获取:https://gitee.com/assistant-a/project-sharing21世纪是信息化时代,随着信息技术和网络技术的发展,信息化已经渗透到人们日常生活的各个方面,人们可以随时随地浏览到海量信息,但是这些大量信息千差万别,需要费事费力的筛选、甄别自己喜欢或者感兴趣的数据。对网络电影服务来说,需要用到优秀的协同过滤推荐功能去辅助整个系统。系统基于Python技术,使用UML建模,采用Django框架组合进行设
文章浏览阅读614次。10G SFP+光模块被广泛应用于10G以太网中,在下一代移动网络、固定接入网、城域网、以及数据中心等领域非常常见。下面易天光通信(ETU-LINK)就为大家一一盘点下10G SFP+光模块都有哪些吧。一、10G SFP+双纤光模块10G SFP+双纤光模块是一种常规的光模块,有两个LC光纤接口,传输距离最远可达100公里,常用的10G SFP+双纤光模块有10G SFP+ SR、10G SFP+ LR,其中10G SFP+ SR的传输距离为300米,10G SFP+ LR的传输距离为10公里。_10g sfp+
文章浏览阅读239次。该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置:项目技术:Express框架 + Node.js+ Vue 等等组成,B/S模式 +Vscode管理+前后端分离等等。环境需要1.运行环境:最好是Nodejs最新版,我们在这个版本上开发的。其他版本理论上也可以。2.开发环境:Vscode或HbuilderX都可以。推荐HbuilderX;3.mysql环境:建议是用5.7版本均可4.硬件环境:windows 7/8/10 1G内存以上;_基于vue美食网站源码
文章浏览阅读62次。oldwain随便写@hexun链接:http://oldwain.blog.hexun.com/ ...
文章浏览阅读843次,点赞16次,收藏22次。用这个工具扫描其它网站时,要注意法律问题,同时也比较慢,所以我们以之前写的登录页面为例子扫描。_sqlmap拖库
文章浏览阅读1.5w次,点赞5次,收藏38次。Origin也能玩转图片的拼接组合排版谭编(华南师范大学学报编辑部,广州 510631)通常,我们利用Origin软件能非常快捷地绘制出一张单独的绘图。但是,我们在论文的撰写过程中,经常需要将多种科学实验图片(电镜图、示意图、曲线图等)组合在一张图片中。大多数人都是采用PPT、Adobe Illustrator、CorelDraw等软件对多种不同类型的图进行拼接的。那么,利用Origin软件能否实..._origin怎么把三个图做到一张图上
文章浏览阅读4.2k次,点赞4次,收藏51次。51单片机智能电风扇控制系统仿真设计( proteus仿真+程序+原理图+报告+讲解视频)仿真图proteus7.8及以上 程序编译器:keil 4/keil 5 编程语言:C语言 设计编号:S0042。_电风扇模拟控制系统设计