Cesium原理篇:Material

pfng6261 7年前
   <h2>Shader</h2>    <p>首先,在本文开始前,我们先普及一下材质的概念,这里推荐 材质 ,普及材质的内容都是截取自该网站,我觉得他写的已经够好了。</p>    <p>在真实世界里,每个物体会对光产生不同的反应。钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射。每个物体对镜面高光也有不同的反应。有些物体不会散射(Scatter)很多光却会反射(Reflect)很多光,结果看起来就有一个较小的高光点(Highlight),有些物体散射了很多,它们就会产生一个半径更大的高光。如果我们想要在OpenGL中模拟多种类型的物体,我们必须为每个物体分别定义材质(Material)属性。</p>    <p>我们指定一个物体和一个光的颜色来定义物体的图像输出,并使之结合环境(Ambient)和镜面强度(Specular Intensity)元素。当描述物体的时候,我们可以使用3种光照元素:环境光照(Ambient Lighting)、漫反射光照(Diffuse Lighting)、镜面光照(Specular Lighting)定义一个材质颜色。通过为每个元素指定一个颜色,我们已经对物体的颜色输出有了精密的控制。现在把一个镜面高光元素添加到这三个颜色里,这是我们需要的所有材质属性:</p>    <pre>  <code class="language-python">struct Material  {      vec3 ambient;      vec3 diffuse;      vec3 specular;      float shininess;  };</code></pre>    <p>以上是对材质的一个最简单概括,我们下面进入Cesium的环节。先来看看Cesium在Shader中对Material的定义:</p>    <pre>  <code class="language-python">struct czm_material  {      vec3 diffuse;      float specular;      float shininess;      vec3 normal;      vec3 emission;      float alpha;  };</code></pre>    <p>和上面给出的结构体大致相同,区别是少了环境光ambient,但多了法向量normal,自发光emission和alpha,我们带着这个疑问看一下Cesium处理材质的片段着色器:</p>    <pre>  <code class="language-python">varying vec3 v_positionEC;  varying vec3 v_normalEC;  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;      czm_material material = czm_getDefaultMaterial(materialInput);      gl_FragColor = czm_phong(normalize(positionToEyeEC), material);  }</code></pre>    <p>此时的坐标系是以相机为中心点,首先获取当前点的位置和法向量,通过czm_getMaterial获取默认的一个材质对象,gl_FragColor通过czm_phong方法得到对应的颜色。对于phong,在OpenGL SuperBible里面有详细的说明,大概就是通过material的属性,根据光的位置和光的颜色,最终计算出在该点当前环境和自身材质的影响下对应的颜色。我们来看看czm_phong的实现:</p>    <pre>  <code class="language-python">vec4 czm_phong(vec3 toEye, czm_material material)  {            float diffuse = czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 0.0, 1.0), material);      if (czm_sceneMode == czm_sceneMode3D) {          diffuse += czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 1.0, 0.0), material);      }        float specular = czm_private_getSpecularOfMaterial(czm_sunDirectionEC, toEye, material) + czm_private_getSpecularOfMaterial(czm_moonDirectionEC, toEye, material);        vec3 materialDiffuse = material.diffuse * 0.5;            vec3 ambient = materialDiffuse;      vec3 color = ambient + material.emission;      color += materialDiffuse * diffuse;      color += material.specular * specular;        return vec4(color, material.alpha);  }</code></pre>    <p>如上是phong颜色计算的算法,我并没有给出getLambertDiffuse和getSpecular的具体代码,都是光的基本物理规律。这里要说的是getLambertDiffuse的参数,如果是球面物体时,会调用czm_private_phong,此时参数为czm_sunDirectionEC,也就是太阳的位置,而这里认为光源的位置是靠近相机的某一个点,另外,环境光ambient默认是反射光的一半,这个也说的过去,最后我们看到最终颜色的alpha位是material.alpha。</p>    <p>上面是Shader中涉及到材质的一个最简过程:材质最终影响的是片段着色器中的颜色gl_FragColor,而所有czm_开头的都是Cesium内建的方法和对象,Cesium已经帮我们提供好了光学模型和计算方法,并不需要我们操心,而我们要做的,就是指定对应物体的材质属性,通过修改material中的属性值,来影响最终的效果。所以,接下来的问题就是如何指定物体的材质属性。</p>    <p>材质的风格有很多种,形状也不尽相同,线面各异,为此,Cesium提供了Material对象,来方便我们设置材质。</p>    <h2>Fabric</h2>    <p>我们先来看看Cesium都提供了哪些内建材质类型,以及如何创建对应的Material,我也是参考的Cesium在github wike上对Fabric的 <a href="/misc/goto?guid=4959729680330939464" rel="nofollow,noindex">介绍</a> ,更详细的内容可以自己去看。在Cesium中,Fabric是描述材质的一种json格式。材质可以很简单,就是对象表面的一个贴图,也可以是一个图案,比如条形或棋盘形。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0b9d40598200015b1aed64a6558efde9.jpg"></p>    <p>比如ImageType类型,Cesium提供了如下两种方式来设置:</p>    <pre>  <code class="language-python">// 方法一  primitive.appearance.material = new Cesium.Material({      fabric : {          type : 'Image',          uniforms : {              image : '../images/Cesium_Logo_Color.jpg'          }      }  });  // 方法二  primitive.appearance..material = Material.fromType('Image');  primitive.appearance..uniforms.image = 'image.png';</code></pre>    <p>Cesium默认提供了十八个类型:</p>    <ul>     <li>ColorType</li>     <li>ImageType</li>     <li>DiffuseMapType</li>     <li>AlphaMapType</li>     <li>SpecularMapType</li>     <li>EmissionMapType</li>     <li>BumpMapType</li>     <li>NormalMapType</li>     <li>GridType</li>     <li>StripeType</li>     <li>CheckerboardType</li>     <li>DotType</li>     <li>WaterType</li>     <li>RimLightingType</li>     <li>FadeType</li>     <li>PolylineArrowType</li>     <li>PolylineGlowType</li>     <li>PolylineOutlineType</li>    </ul>    <p>当然,Cesium支持多个Type的叠加效果,如下是DiffuseMap和NormalMap的一个叠加,components中指定material中diffuse、specular、normal的映射关系和值:</p>    <pre>  <code class="language-python">primitive.appearance.material = new Cesium.Material({      fabric : {          materials : {              applyDiffuseMaterial : {                  type : 'DiffuseMap',                  uniforms : {                      image : '../images/bumpmap.png'                  }              },              normalMap : {                  type : 'NormalMap',                  uniforms : {                      image : '../images/normalmap.png',                      strength : 0.6                  }              }          },          components : {              diffuse : 'diffuseMaterial.diffuse',              specular : 0.01,              normal : 'normalMap.normal'          }      }  });</code></pre>    <p>当然,这些都满足不了你的欲望?你也可以自定义一个自己的MaterialType,我们先了解Cesium.Material的内部实现后,再来看看自定义Material。</p>    <h2>Material</h2>    <p>用户通常只需要指定type,uniforms,components三个属性,构建一个Fabric的JSON。这是因为Material在初始化时,会加载上述默认的十八个类型,比如对应的ColorType代码:</p>    <pre>  <code class="language-python">Material.ColorType = 'Color';  Material._materialCache.addMaterial(Material.ColorType, {      fabric : {          type : Material.ColorType,          uniforms : {              color : new Color(1.0, 0.0, 0.0, 0.5)          },          components : {              diffuse : 'color.rgb',              alpha : 'color.a'          }      },      translucent : function(material) {          return material.uniforms.color.alpha < 1.0;      }  });  // 创建material  polygon.material = Cesium.Material.fromType('Color');  polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);</code></pre>    <p>其他的类型也大概相同,在初始化的时候已经全部构建。因此,用户在执行创建时,已经有了一个ColorMaterial,只是对里面的一些属性修改为自己的期望值的过程。我们具体Material.fromType的具体内容:</p>    <pre>  <code class="language-python">Material.fromType = function(type, uniforms) {      var material = new Material({          fabric : {              type : type          }      });        return material;  };    function Material(options) {      initializeMaterial(options, this);            if (!defined(Material._uniformList[this.type])) {          Material._uniformList[this.type] = Object.keys(this._uniforms);      }  }    function initializeMaterial(options, result) {      var cachedMaterial = Material._materialCache.getMaterial(result.type);            createMethodDefinition(result);      createUniforms(result);            // translucent  }</code></pre>    <p>initializeMaterial则是其中的重点,里面有三个关键点:1createMethodDefinition,2createUniforms,3translucent,我们来看看都做了什么</p>    <pre>  <code class="language-python">function createMethodDefinition(material) {      // 获取components属性      // ColorType:{ diffuse : 'color.rgb', alpha : 'color.a'}      var components = material._template.components;      var source = material._template.source;      if (defined(source)) {          material.shaderSource += source + '\n';      } else {          material.shaderSource += 'czm_material czm_getMaterial(czm_materialInput materialInput)\n{\n';          material.shaderSource += 'czm_material material = czm_getDefaultMaterial(materialInput);\n';          if (defined(components)) {              for ( var component in components) {                  if (components.hasOwnProperty(component)) {                      // 根据components中的属性,修改Material中对应属性的获取方式                      material.shaderSource += 'material.' + component + ' = ' + components[component] + ';\n';                  }              }          }          // 封装得到片段着色器中获取material的函数          material.shaderSource += 'return material;\n}\n';      }  }</code></pre>    <p>如上是Key1的作用,拼装出片段着色器中获取material的函数,如果Type是Color下,获取的函数代码如下:</p>    <pre>  <code class="language-python">czm_material czm_getMaterial(czm_materialInput materialInput)  {      czm_material material = czm_getDefaultMaterial(materialInput);      material.diffuse = color.rgb;      material.alpha = color.a;      return material;  }</code></pre>    <p>可以对照ColorType的FabricComponents属性,对号入座。下面就是对Fabric的uniforms属性的解析过程了:createUniforms。这里主要有两个作用,第一,根据uniforms,在片源着色器中声明对应的uniform变量,比如ColorType中uniform对应的color变量,则需要声明该变量,当然cesium做了一个特殊的处理,给他们一个标号,保证唯一:更新后的代码如下:</p>    <pre>  <code class="language-python">uniform vec4 color_0;  czm_material czm_getMaterial(czm_materialInput materialInput)  {      czm_material material = czm_getDefaultMaterial(materialInput);      material.diffuse = color_0.rgb;      material.alpha = color_0.a;      return material;  }</code></pre>    <p>第二个作用是为后面的uniformMap做准备,声明了变量了,当然需要准备好该变量的赋值,建立好这个key-value的过程,保存到material._uniforms数组中:</p>    <pre>  <code class="language-python">function createUniform(material, uniformId) {      // 根据变量的类型,建立对应的return value方法      if (uniformType === 'sampler2D') {          material._uniforms[newUniformId] = function() {              return material._textures[uniformId];          };          material._updateFunctions.push(createTexture2DUpdateFunction(uniformId));      } else if (uniformType === 'samplerCube') {          material._uniforms[newUniformId] = function() {              return material._textures[uniformId];          };          material._updateFunctions.push(createCubeMapUpdateFunction(uniformId));      } else if (uniformType.indexOf('mat') !== -1) {          var scratchMatrix = new matrixMap[uniformType]();          material._uniforms[newUniformId] = function() {              return matrixMap[uniformType].fromColumnMajorArray(material.uniforms[uniformId], scratchMatrix);          };      } else {          material._uniforms[newUniformId] = function() {              return material.uniforms[uniformId];          };      }  }</code></pre>    <p>createUniforms方法后则是对translucent的处理,这个会影响到Pimitive创建RenderState,以及渲染队列的设置。将Fabric中的translucent方法保存在material._translucentFunctions中。</p>    <h2>Primitive</h2>    <p>此时,我们已经创建好一个color类型的Material,将其赋给对应的Primitive,代码如下:</p>    <pre>  <code class="language-python">primitive.appearance.material = Cesium.Material.fromType('Color');</code></pre>    <p>这里出现了一个新的的对象:Appearance。这里,Material只是负责片段着色器中,材质部分的代码,而Appearance则负责该Primitvie整个Shader的代码,包括顶点着色器和片段着色器两个部分,同时,需要根据Appearance的状态来设置对应的RenderState,可以说Appearance是在Material之上的又一层封装。一共有MaterialAppearance、EllipsoidSurfaceAppearance等六类,大同小异,每个对象的属性值不同,但逻辑上统一有Appearance来负责。我们看如下一个Primitive的创建:</p>    <pre>  <code class="language-python">var rectangle = scene.primitives.add(new Cesium.Primitive({      geometryInstances : new Cesium.GeometryInstance({          geometry : new Cesium.RectangleGeometry({              rectangle : Cesium.Rectangle.fromDegrees(-120.0, 20.0, -60.0, 40.0),              vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT          })      }),      appearance : new Cesium.EllipsoidSurfaceAppearance({          aboveGround : false      })  }));</code></pre>    <p>如上创建的是一个EllipsoidSurfaceAppearance,创建时如果没有指定Material,则内部默认采用ColorTyoe的材质。当执行Primitive.update时,Appearance的就发挥了自己的价值:</p>    <pre>  <code class="language-python">Primitive.prototype.update = function(frameState) {      createRenderStates(this, context, appearance, twoPasses);      createShaderProgram(this, frameState, appearance);      createCommands(this, appearance, material, translucent, twoPasses, this._colorCommands, this._pickCommands, frameState);  }</code></pre>    <p>首先Appearance基类提供了默认的defaultRenderState,也提供了getRenderState的方法,如下:</p>    <pre>  <code class="language-python">Appearance.getDefaultRenderState = function(translucent, closed, existing) {      var rs = {          depthTest : {              enabled : true          }      };        if (translucent) {          rs.depthMask = false;          rs.blending = BlendingState.ALPHA_BLEND;      }        if (closed) {          rs.cull = {              enabled : true,              face : CullFace.BACK          };      }        if (defined(existing)) {          rs = combine(existing, rs, true);      }        return rs;  };    Appearance.prototype.getRenderState = function() {      var translucent = this.isTranslucent();      var rs = clone(this.renderState, false);      if (translucent) {          rs.depthMask = false;          rs.blending = BlendingState.ALPHA_BLEND;      } else {          rs.depthMask = true;      }      return rs;  };</code></pre>    <p>然后,各个子类按照自己的需要,看是否使用基类的方法,还是自己有特殊用处,比如EllipsoidSurfaceAppearance类:</p>    <pre>  <code class="language-python">function EllipsoidSurfaceAppearance(options) {      this._vertexShaderSource = defaultValue(options.vertexShaderSource, EllipsoidSurfaceAppearanceVS);      this._fragmentShaderSource = defaultValue(options.fragmentShaderSource, EllipsoidSurfaceAppearanceFS);      this._renderState = Appearance.getDefaultRenderState(translucent, !aboveGround, options.renderState);  }  EllipsoidSurfaceAppearance.prototype.getRenderState = Appearance.prototype.getRenderState;    function createRenderStates(primitive, context, appearance, twoPasses) {      var renderState = appearance.getRenderState();  }</code></pre>    <p>这样,EllipsoidSurfaceAppearance采用自己的顶点着色器和片段着色器的代码,但RenderState和getRenderState方法都直接用的基类的,因此,当primitive调用createRenderStates方法时,尽管当前的appearance可能类型不一,但确保都有统一一套调用接口,最终创建满足当前需要的RS,当然,这里主要是translucent的区别。</p>    <p>接着,就是创建ShaderProgram:</p>    <pre>  <code class="language-python">function createShaderProgram(primitive, frameState, appearance) {      var vs = primitive._batchTable.getVertexShaderCallback()(appearance.vertexShaderSource);      var fs = appearance.getFragmentShaderSource();  }    Appearance.prototype.getFragmentShaderSource = function() {      var parts = [];      if (this.flat) {          parts.push('#define FLAT');      }      if (this.faceForward) {          parts.push('#define FACE_FORWARD');      }      if (defined(this.material)) {          parts.push(this.material.shaderSource);      }      parts.push(this.fragmentShaderSource);        return parts.join('\n');  };</code></pre>    <p>这里代码比较清楚,就是通过Appearance获取vs和fs,这里多了一个batchTable,这是因为该Primitive可能是批次的封装,因此需要把batch部分的vs和appearance的vs合并,batchTable后面有时间的话,在单独介绍。这里可以看到getFragmentShaderSource,增加了一下宏,同时,在Appearance中,不仅有自己的fragmentShaderSource,同时也把我们之前在Material中封装的material.shaderSource也追加进去。真的是海纳百川的历程。</p>    <p>这样,就来到最后一步,构建Command:</p>    <pre>  <code class="language-python">function createCommands(primitive, appearance, material, translucent, twoPasses, colorCommands, pickCommands, frameState) {      var uniforms = combine(appearanceUniformMap, materialUniformMap);      uniforms = primitive._batchTable.getUniformMapCallback()(uniforms);      var pass = translucent ? Pass.TRANSLUCENT : Pass.OPAQUE;      // ……      colorCommand.uniformMap = uniforms;      colorCommand.pass = pass;      //……      }</code></pre>    <p>可见,Material的uniforms合并后绑定到了command的uniformMap中,另外translucent也用来判断渲染队列。至此,Material->Appearance->Renderer的整个过程就结束了。可见,Material主要涉及到初始化和Primitive.update部分。</p>    <p>当然,之前我们介绍过,通过创建Entity的方式,也可以通过DataSourceDisplay这个过程最终创建Primitive并添加到PrimitiveCollection这种方式。这和直接构建Primitive基本相似,只是多绕了一圈。当然,这一圈也不是白绕的,因为会做批次的处理,合并多个风格相似的Geometry。当然,这就牵扯到Batch,Appearance以及MaterialProperty之间的关系我们后续再介绍这种创建方式下的不同之处。</p>    <p> </p>    <p>来自:http://www.cnblogs.com/fuckgiser/p/6171245.html</p>    <p> </p>