【Cesium 顏狗初步】fabric 材質定義與自定義着色器實踐

時間  2021-01-02
標籤 app 函數 prototype 3d code component orm 對象 blog 圖片 欄目 微服務 简体版
原文   原文鏈接

fabric 材質定義：着色器實踐app

1. 示例代碼

貼到沙盒裏就能夠運行：函數

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 : {//旋轉角度
        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;`,
  }
});

隨便定義一個浮點數，發現報錯：prototype

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

因此，這個 source 是有規則的。code

2.1. 必須擁有函數 czm_getMaterial(czm_materialInput materialInput)

我改爲這樣：component

source: 
`czm_material czm_getMaterial(czm_materialInput materialInput)
{

}`,

報錯變化了：orm

大意是指，czm_getMaterial 這個函數沒有返回值。這很正常，強類型的 GLSL 規定了這個函數的返回值類型是結構體 czm_material，那麼再次修改它。對象

2.2. 必須有返回值：不妨返回個默認值

source: 
`czm_material czm_getMaterial(czm_materialInput materialInput)
{
	czm_material material = czm_getDefaultMaterial(materialInput);
 	return material;
}`,

這時，形狀有顏色了：blog

material 這個變量是一個結構體，經過修改其材質因子便可實現材質修改。圖片

修改其漫反射因子：

注意，glsl 中建立結構體 vec3 的默認值是 (0, 0, 0)，如今我想要個粉色，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. 頂點着色器與片元着色器

你能夠在不少個地方獲取材質、外觀的着色器源代碼：

  • Material.prototype.shaderSource：可讀可寫：當前 material 對象的 source 屬性，支持實時修改
  • Appearance.prototype.vertexShaderSource：只讀：當前外觀對象的頂點着色器，僅支持構造時傳入
  • Appearance.prototype.fragmentShaderSource：只讀：當前外觀對象的片元着色器，僅支持構造時傳入
  • Appearance.prototype.getFragmentShaderSource()：返回最終徹底版片元着色器源代碼。

上面在 fabric 對象中的 source 屬性指定的 glsl 源代碼，與 console.log(m.shaderSource) 出來的是徹底同樣的，因此此處忽略。

當經過 2.2 節中對漫反射屬性的設置後，外觀對象的 vertexShaderSource 和 fragmentShaderSource 輸出結果以下：

// 頂點着色器：
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;
}
// 片元着色器：
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
}

捕獲重點：片元着色器

觀察片元着色器代碼中的主函數，其中有一句調用 czm_material material = czm_getMaterial(materialInput);

這一句即是對咱們在 fabric 對象中寫入的 glsl 代碼的調用。

最終，進入 #ifdef FLAT 分支（才疏學淺，不知道這個 FLAT 宏是什麼），對像素着色，使用 material 結構的漫反射因子 + 自發光因子 + 透明度因子進行疊加，生成最終的顏色值。因此，這個時候不妨回到 Material 的 source 中，繼續動手腳。

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

2.4. 牛刀小試：發個光吧

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;
}`,

（我偷偷把高度設爲了 30000，否則不太明顯）

換個地圖和參數：

稍微有那麼一點感受了。

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 對象的構造參數，直接將 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
    }
   `
});

沒有問題：

因此，基於此模板，只要膽大心細（劃掉）只要對 Cesium 內置的着色器足夠了解，徹底能夠本身改頂點和片元着色器。

試一試：把 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
    }
   `
});

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. 的例子，只不過在頂點着色器稍微動動手腳，可達到變形的效果：

很惋惜這個 position3DHigh 和 position3DLow 並非這個 Primitive 的局部相對座標，因此直接修改 z = 0 是壓不平的，可是從圖中可略見端倪，猜想這個 z 值是世界座標，後續使用半透明地形看看。

5. 給材質的着色器代碼傳入動態值：uniforms 的運用

uniform 在 WebGL 中就是恆定值的意思。通常 WebGL 用 attribute 關鍵字指定頂點屬性或外來值，用 uniform 關鍵字指定常量，用 varying 關鍵字指定頂點着色器、片元着色器共享的變量。

在 Cesium fabric 規則中，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 內置結構、數據類型有對應關係的數據，例如上例的 my_var，是數字類型，在着色器內部自動解析爲 uniform float my_var_0;

參考官方給出的二十多種預置 Material，若是你有興趣，能夠直接把它們的 source 打印出來觀察。

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

uniforms : {
  image : 'specular.png',
  channel : 'a'
}

一個是圖片路徑，一個是圖片用於鏡面反射強度的通道（此處是 alpha 通道）。

若是你傳遞的是對象，例如最多見的紋理材質中：

uniforms: {
  image: 'diffuse.png',
  my_struct: {
    x: 10,
    y: 2
  }
}

這個 my_struct，最終會傳入一個結構體 uniform vec2 my_struct_0;

固然有的時候不要做死，好比這個狀況是轉譯不了的：

uniforms: {
  my_var: 0.5,
  my_struct: {
    x: 12,
    y: 5,
    name: {
      value: 'aaa'
    },
    obj: false,
    time: 5
  }
}

會報錯，由於 my_struct 已經超出了 glsl 能理解的類型。

事實上，你在 uniforms 對象中寫的任何數據，在 fabric.components 中同樣能用，而且 Cesium 的內置結構體常量、函數都是能夠直接使用的。

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

這裏僅僅改的是材質，屬於片元着色器階段發生的事情，在第四節中已經看到了 Material 中寫的着色器代碼是如何被 Appearance 對象的片元着色器代碼調用的。若是你想修改 Primitive 的形狀，那就要去修改 Appearance 的頂點着色器。

Primitive 是 Scene 對象下的，在渲染循環中它是最終被宰殺的羔羊（劃掉），只要是 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;
    }
    `
  }
});

6. 後續想作的

  • 研究自帶材質的着色器以及最終生成的頂點着色器、片元着色器
  • 繼續結合源代碼，研究各路 Primitive
  • 研究自帶 glsl 結構體、函數、常量，靈活運用
  • 理解頂點着色器的座標含義
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程