貼到沙盒里就可以運行：

var viewer = new Cesium.Viewer(“cesiumContainer”);
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.camera.setView({
destination : new Cesium.Cartesian3(-2644963.9889313546, 5763731.142118295, 2199400.7089496767), //世界坐標系下的一個坐標點
orientation : {//旋轉(zhuǎn)角度
heading :6.075,
pitch :-0.727,
roll : 6.283
}
});

const extrudedPolygon = new Cesium.PolygonGeometry({
polygonHierarchy : new Cesium.PolygonHierarchy(
Cesium.Cartesian3.fromDegreesArray([
112.41726298378288, 23.290411251106182,
113.67072522399741, 23.560312361463682,
114.09370956893551, 22.590768298743153,
112.83803246418894, 22.285610818885644
])
),
extrudedHeight: 3000
});

const instance = new Cesium.GeometryInstance({
geometry: extrudedPolygon,
id: ‘box with height’
});

const m = new Cesium.Material({
fabric: {
type: ‘Color’,
uniforms: {
color: new Cesium.Color(216 / 255.0, 170 / 255.0, 208 / 255.0).withAlpha(0.618),
},
}
});

const aper = new Cesium.MaterialAppearance({
material : m,
});

var p = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
appearance: aper,
releaseGeometryInstances: false,
compressVertices: false,
}));

// p.readyPromise.then(v => console.log(v));

const vs = aper.vertexShaderSource;
const fs = aper.fragmentShaderSource;
const fs2 = aper.getFragmentShaderSource();

console.log(// 頂點著色器： ${vs});
console.log(// 片元著色器： ${fs});
console.log(// 片元著色器2： ${fs2});
2. 修改 fabric 對象
const m = new Cesium.Material({
fabric: {
source:float a = 12.0;,
}
});
隨便定義一個浮點數(shù)，發(fā)現(xiàn)報錯：

加上 uniform 限定字，報錯稍微改了一點：

所以，這個 source 是有規(guī)則的。

2.1. 必須擁有函數(shù) czm_getMaterial(czm_materialInput materialInput)
我改成這樣：

source:
`czm_material czm_getMaterial(czm_materialInput materialInput)
{

}`,
報錯變化了：

大意是指，czm_getMaterial 這個函數(shù)沒有返回值。這很正常，強類型的 GLSL 規(guī)定了這個函數(shù)的返回值類型是結(jié)構(gòu)體 czm_material，那么再次修改它。

2.2. 必須有返回值：不妨返回個默認值
source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); return material; },
這時，形狀有顏色了：

material 這個變量是一個結(jié)構(gòu)體，通過修改其材質(zhì)因子即可實現(xiàn)材質(zhì)修改。

修改其漫反射因子：

注意，glsl 中創(chuàng)建結(jié)構(gòu)體 vec3 的默認值是 (0, 0, 0)，現(xiàn)在我想要個粉色，rgb色值是：(216 / 255.0, 170 / 255.0, 208 / 255.0)，即 (0.8470588235294118, 0.66666666, 0.8156862745098039)

source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.diffuse = vec3(0.8470588235294118, 0.66666666, 0.8156862745098039); return material; },
沒毛病，顏色出來了：

2.3. 頂點著色器與片元著色器
你可以在很多個地方獲取材質(zhì)、外觀的著色器源代碼：

Material.prototype.shaderSource：可讀可寫：當前 material 對象的 source 屬性，支持實時修改
Appearance.prototype.vertexShaderSource：只讀：當前外觀對象的頂點著色器，僅支持構(gòu)造時傳入
Appearance.prototype.fragmentShaderSource：只讀：當前外觀對象的片元著色器，僅支持構(gòu)造時傳入
Appearance.prototype.getFragmentShaderSource()：返回最終完全版片元著色器源代碼。
上面在 fabric 對象中的 source 屬性指定的 glsl 源代碼，與 console.log(m.shaderSource) 出來的是完全一樣的，所以此處忽略。

當通過 2.2 節(jié)中對漫反射屬性的設(shè)置后，外觀對象的 vertexShaderSource 和 fragmentShaderSource 輸出結(jié)果如下：

// 頂點著色器：
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 normal;
attribute vec2 st;
attribute float batchId;

varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;

void main()
{
vec4 p = czm_computePosition();

v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
v_normalEC = czm_normal * normal;                         // normal in eye coordinates
v_st = st;

gl_Position = czm_modelViewProjectionRelativeToEye * p;

1
2
3
4
5

}
// 片元著色器：
varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;

void main()
{
vec3 positionToEyeEC = -v_positionEC;

vec3 normalEC = normalize(v_normalEC);

1

#ifdef FACE_FORWARD
normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif

czm_materialInput materialInput;
materialInput.normalEC = normalEC;
materialInput.positionToEyeEC = positionToEyeEC;
materialInput.st = v_st;
czm_material material = czm_getMaterial(materialInput);

1
2
3
4
5

#ifdef FLAT
gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
#else
gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
#endif
}
捕獲重點：片元著色器
觀察片元著色器代碼中的主函數(shù)，其中有一句調(diào)用 czm_material material = czm_getMaterial(materialInput);

這一句便是對我們在 fabric 對象中寫入的 glsl 代碼的調(diào)用。

最終，進入 #ifdef FLAT 分支（才疏學(xué)淺，不知道這個 FLAT 宏是什么），對像素著色，使用 material 結(jié)構(gòu)的漫反射因子 + 自發(fā)光因子 + 透明度因子進行疊加，生成最終的顏色值。所以，這個時候不妨回到 Material 的 source 中，繼續(xù)動手腳。

是存在直接修改 Appearance 對象 fragmentShader、vertexShader 的大佬的，后面有機會展開說說。

2.4. 牛刀小試：發(fā)個光吧
source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.diffuse = vec3(0.8470588235294118, 0.66666666, 0.8156862745098039); material.specular = 1.0; material.shininess = 0.8; return material; },

（我偷偷把高度設(shè)為了 30000，不然不太明顯）

換個地圖和參數(shù)：

稍微有那么一點感覺了。

const m = new Cesium.Material({
translucent: false,
fabric: {
source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.diffuse = vec3(0.24313725490196078, 0.7372549019607844, 0.9333333333333333); material.specular = 0.5; material.shininess = 0.8; material.emission = vec3(0.0, 0.66666666, 0.0); return material; },
}
});
3. *高級運用：直接修改 Appearance 的片元著色器
用的是 1. 中的代碼，修改 aper 對象的構(gòu)造參數(shù)，直接將 2.3 中的片元著色器代碼貼入看看：

const aper = new Cesium.MaterialAppearance({
fragmentShaderSource:
` varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;

void main()
{
    vec3 positionToEyeEC = -v_positionEC;

    vec3 normalEC = normalize(v_normalEC);
#ifdef FACE_FORWARD
    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif

    czm_materialInput materialInput;
    materialInput.normalEC = normalEC;
    materialInput.positionToEyeEC = positionToEyeEC;
    materialInput.st = v_st;
    czm_material material = czm_getMaterial(materialInput);

#ifdef FLAT
    gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
#else
    gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
#endif
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

`
});
沒有問題：

所以，基于此模板，只要膽大心細（劃掉）只要對 Cesium 內(nèi)置的著色器足夠了解，完全可以自己改頂點和片元著色器。

試一試：把 2.2 和 2.4 中的嘗試加入
const aper = new Cesium.MaterialAppearance({
fragmentShaderSource:
` varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;

void main()
{
    vec3 positionToEyeEC = -v_positionEC;

    vec3 normalEC = normalize(v_normalEC);
#ifdef FACE_FORWARD
    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
#endif

    czm_materialInput materialInput;
    materialInput.normalEC = normalEC;
    materialInput.positionToEyeEC = positionToEyeEC;
    materialInput.st = v_st;
    czm_material material = czm_getMaterial(materialInput);
			material.diffuse = vec3(0.24313725490196078, 0.7372549019607844, 0.9333333333333333);
		  material.emission = vec3(0.0, 0.66666666, 0.0);
    material.specular = 0.5;
    material.shininess = 0.8;

#ifdef FLAT
    gl_FragColor = vec4(material.diffuse + material.emission, material.alpha);
#else
    gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
#endif
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

}); 4. **實驗性記錄：修改 Appearance 的頂點著色器 const apr = new Cesium.MaterialAppearance({ vertexShaderSource:
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute vec3 normal;
attribute vec2 st;
attribute float batchId;

varying vec3 v_positionEC;
varying vec3 v_normalEC;
varying vec2 v_st;

void main()
{
float zh = position3DHigh.z * 0.97;
float zl = position3DLow.z * 0.97;

  vec3 th = vec3(position3DHigh.xy, zh);
  vec3 tl = vec3(position3DLow.xy, zl);

  vec4 p = czm_translateRelativeToEye(th, tl);

  v_positionEC = (czm_modelViewRelativeToEye * p).xyz;      // position in eye coordinates
  v_normalEC = czm_normal * normal;                         // normal in eye coordinates
  v_st = st;

  gl_Position = czm_modelViewProjectionRelativeToEye * p;

1
2
3
4
5
6
7
8
9
10

}
`,
})
依舊是上方 1. 的例子，只不過在頂點著色器稍微動動手腳，可達到變形的效果：

很可惜這個 position3DHigh 和 position3DLow 并不是這個 Primitive 的局部相對坐標，所以直接修改 z = 0 是壓不平的，但是從圖中可略見端倪，猜測這個 z 值是世界坐標，后續(xù)使用半透明地形看看。

給材質(zhì)的著色器代碼傳入動態(tài)值：uniforms 的運用
uniform 在 WebGL 中就是恒定值的意思。一般 WebGL 用 attribute 關(guān)鍵字指定頂點屬性或外來值，用 uniform 關(guān)鍵字指定常量，用 varying 關(guān)鍵字指定頂點著色器、片元著色器共享的變量。

在 Cesium fabric 規(guī)則中，fabric.uniforms 的所有變量，在 fabric.source 中可以直接使用。

例如，我需要傳入一個透明度：

const m = new Cesium.Material({
fabric: {
uniforms: {
my_var: 0.5,
},
source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.diffuse = vec3(0.5, 0.9, 0.3); material.alpha = my_var; return material; }
}
});
是可以的：

打印 這個 m變量，可以輕松看到 glsl 代碼：

并且支持直接對 js 的變量進行修改以重新著色：

m.uniforms.my_var = 0.9;

注：了解 uniforms
uniforms 是 fabric 對象的一個屬性，按理說，你可以給這個對象傳遞任何與 glsl 內(nèi)置結(jié)構(gòu)、數(shù)據(jù)類型有對應(yīng)關(guān)系的數(shù)據(jù)，例如上例的 my_var，是數(shù)字類型，在著色器內(nèi)部自動解析為 uniform float my_var_0;

參考官方給出的二十多種預(yù)置 Material，如果你有興趣，可以直接把它們的 source 打印出來觀察。

例如，在鏡面反射材質(zhì)中，它的 uniforms 就有這兩個：

uniforms : {
image : ‘specular.png’,
channel : ‘a(chǎn)’
}
一個是圖片路徑，一個是圖片用于鏡面反射強度的通道（此處是 alpha 通道）。

如果你傳遞的是對象，例如最常見的紋理材質(zhì)中：

uniforms: {
image: ‘diffuse.png’,
my_struct: {
x: 10,
y: 2
}
}
這個 my_struct，最終會傳入一個結(jié)構(gòu)體 uniform vec2 my_struct_0;

當然有的時候不要作死，比如這個情況是轉(zhuǎn)譯不了的：

uniforms: {
my_var: 0.5,
my_struct: {
x: 12,
y: 5,
name: {
value: ‘a(chǎn)aa’
},
obj: false,
time: 5
}
}
會報錯，因為 my_struct 已經(jīng)超出了 glsl 能理解的類型。

事實上，你在 uniforms 對象中寫的任何數(shù)據(jù)，在 fabric.components 中一樣能用，并且 Cesium 的內(nèi)置結(jié)構(gòu)體常量、函數(shù)都是可以直接使用的。

從著色器的角度看，一種材質(zhì)無非就是 czm_getMaterial() 函數(shù)的返回值罷了。

這里僅僅改的是材質(zhì)，屬于片元著色器階段發(fā)生的事情，在第四節(jié)中已經(jīng)看到了 Material 中寫的著色器代碼是如何被 Appearance 對象的片元著色器代碼調(diào)用的。如果你想修改 Primitive 的形狀，那就要去修改 Appearance 的頂點著色器。

Primitive 是 Scene 對象下的，在渲染循環(huán)中它是最終被宰殺的羔羊（劃掉），只要是 Primitive，只要你有能力去修改它的著色器代碼，就可以自定義很多東西出來。

玩一玩：可視化紋理坐標
將紋理坐標作為漫反射顏色寫入，就能看到紋理坐標的樣子了：

const m = new Cesium.Material({
fabric: {
uniforms: {
my_var: 0.5,
},
source:
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); material.diffuse = vec3(materialInput.st, 0.0); material.alpha = my_var; return material; }
}
});

總結(jié)

以上是生活随笔為你收集整理的58的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。