Cesium Fabric中source属性指定的shader是否相当于glsl中的frgamentShader？ 如果是的话，我需要用什么属性来指定vertexShader，我在cesium wiki中找不到它。
下面代码中的material.fabric.source和vertexShaderSource、fragmentShaderSource是什么关系？执行顺序是什么？
let aper = new Cesium.MaterialAppearance({
material: new Cesium.Material({
fabric: {
uniforms: {
iTime: 0,
},
source: `
vec3 rgb2hsv(vec3 c){
vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
float d = q.x - min(q.w, q.y);
float e = 1.0e-10;
return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
}
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
float rand(vec2 n) {
return fract(sin(cos(dot(n, vec2(12.9898,12.1414)))) * 83758.5453);
}
float noise(vec2 n) {
const vec2 d = vec2(0.0, 1.0);
vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
}
float fbm(vec2 n) {
float total = 0.0, amplitude = 1.0;
for (int i = 0; i <5; i++) {
total += noise(n) * amplitude;
n += n*1.7;
amplitude *= 0.47;
}
return total;
}
vec4 czm_getMaterial(vec2 vUv) {
vec2 uv = vUv;
const vec3 c1 = vec3(0.5, 0.0, 0.1);
const vec3 c2 = vec3(0.9, 0.1, 0.0);
const vec3 c3 = vec3(0.2, 0.1, 0.7);
const vec3 c4 = vec3(1.0, 0.9, 0.1);
const vec3 c5 = vec3(0.1);
const vec3 c6 = vec3(0.9);
vec2 speed = vec2(1.2, 0.1);
float shift = 1.327+sin(iTime*2.0)/2.4;
float alpha = 1.0;
//change the constant term for all kinds of cool distance versions,
//make plus/minus to switch between
//ground fire and fire rain!
float dist = 3.5-sin(iTime*0.4)/1.89;
vec2 p = uv * dist;
p.x -= iTime/1.1;
float q = fbm(p - iTime * 0.01+1.0*sin(iTime)/10.0);
float qb = fbm(p - iTime * 0.002+0.1*cos(iTime)/5.0);
float q2 = fbm(p - iTime * 0.44 - 5.0*cos(iTime)/7.0) - 6.0;
float q3 = fbm(p - iTime * 0.9 - 10.0*cos(iTime)/30.0)-4.0;
float q4 = fbm(p - iTime * 2.0 - 20.0*sin(iTime)/20.0)+2.0;
q = (q + qb - .4 * q2 -2.0*q3 + .6*q4)/3.8;
vec2 r = vec2(fbm(p + q /2.0 + iTime * speed.x - p.x - p.y), fbm(p + q - iTime * speed.y));
vec3 c = mix(c1, c2, fbm(p + r)) + mix(c3, c4, r.x) - mix(c5, c6, r.y);
vec3 color = vec3(c * cos(shift * uv.y));
color += .05;
color.r *= .8;
vec3 hsv = rgb2hsv(color);
hsv.y *= hsv.z * 1.1;
hsv.z *= hsv.y * 1.13;
hsv.y = (2.2-hsv.z*.9)*1.20;
color = hsv2rgb(hsv);
// fragColor = vec4(color.x, color.y, color.z, alpha);
return vec4(color.x, color.y, color.z, 1);
//return vec4(uv, 0, 1);
}
`,
}
}),
translucent: true,
vertexShaderSource: `
attribute vec3 position3DHigh;
attribute vec3 position3DLow;
attribute float batchId;
attribute vec2 st;
attribute vec3 normal;
varying vec2 v_st;
varying vec3 v_positionEC;
varying vec3 v_normalEC;
void main() {
v_st = st;
vec4 p = czm_computePosition();
v_positionEC = (czm_modelViewRelativeToEye * p).xyz; // position in eye coordinates
v_normalEC = czm_normal * normal; // normal in eye coordinates
gl_Position = czm_modelViewProjectionRelativeToEye * p;
}
`,
fragmentShaderSource: `
varying vec2 v_st;
varying vec3 v_positionEC;
varying vec3 v_normalEC;
void main() {
vec3 positionToEyeEC = -v_positionEC;
vec3 normalEC = normalize(v_normalEC);
czm_materialInput materialInput;
materialInput.normalEC = normalEC;
materialInput.positionToEyeEC = positionToEyeEC;
materialInput.st = v_st;
vec4 color = czm_getMaterial(v_st);
gl_FragColor = color;
}
`,
});
Cesium“Fabric”系统已经很长一段时间没有看到太多更新了，但它仍然可用。这里有一个现场演示：
https://sandcastle.cesium.com/?src=Materials.html
需要理解的重要概念是，Cesium“Fabric”不是完整的着色器，它只是一个片段。具体来说，它试图将 GLSL 着色器的“材质”部分与其余照明和渲染相关的问题隔离开来。
请注意，上述演示的部分示例如下所示：
primitive.appearance.material = new Cesium.Material({
fabric: {
uniforms: {
image: "../images/earthspec1k.jpg",
heightField: "../images/earthbump1k.jpg",
},
materials: {
bumpMap: {
type: "BumpMap",
uniforms: {
image: "../images/earthbump1k.jpg",
},
},
},
source: `
czm_material czm_getMaterial(czm_materialInput materialInput) {
czm_material material = czm_getDefaultMaterial(materialInput);
vec4 color;
float heightValue = texture(heightField, materialInput.st).r;
color.rgb = mix(vec3(0.2, 0.6, 0.2), vec3(1.0, 0.5, 0.2), heightValue);
color.a = (1.0 - texture(image, materialInput.st).r) * 0.7;
color = czm_gammaCorrect(color);
material.diffuse = color.rgb;
material.alpha = color.a;
material.normal = bumpMap.normal;
material.specular = step(0.1, heightValue); // Specular mountain tops
material.shininess = 8.0; // Sharpen highlight
return material;
}
`,
},
在上面的代码中，一些自定义 GLSL 声明了一个名为
czm_getMaterialczm_material因此，“结构”无法接管顶点着色器或移动顶点位置，它只是为了控制材质的外观。