MaterialAppearance.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. import defaultValue from "../Core/defaultValue.js";
  2. import defined from "../Core/defined.js";
  3. import VertexFormat from "../Core/VertexFormat.js";
  4. import AllMaterialAppearanceFS from "../Shaders/Appearances/AllMaterialAppearanceFS.js";
  5. import AllMaterialAppearanceVS from "../Shaders/Appearances/AllMaterialAppearanceVS.js";
  6. import BasicMaterialAppearanceFS from "../Shaders/Appearances/BasicMaterialAppearanceFS.js";
  7. import BasicMaterialAppearanceVS from "../Shaders/Appearances/BasicMaterialAppearanceVS.js";
  8. import TexturedMaterialAppearanceFS from "../Shaders/Appearances/TexturedMaterialAppearanceFS.js";
  9. import TexturedMaterialAppearanceVS from "../Shaders/Appearances/TexturedMaterialAppearanceVS.js";
  10. import Appearance from "./Appearance.js";
  11. import Material from "./Material.js";
  12. /**
  13. * An appearance for arbitrary geometry (as opposed to {@link EllipsoidSurfaceAppearance}, for example)
  14. * that supports shading with materials.
  15. *
  16. * @alias MaterialAppearance
  17. * @constructor
  18. *
  19. * @param {object} [options] Object with the following properties:
  20. * @param {boolean} [options.flat=false] When <code>true</code>, flat shading is used in the fragment shader, which means lighting is not taking into account.
  21. * @param {boolean} [options.faceForward=!options.closed] When <code>true</code>, the fragment shader flips the surface normal as needed to ensure that the normal faces the viewer to avoid dark spots. This is useful when both sides of a geometry should be shaded like {@link WallGeometry}.
  22. * @param {boolean} [options.translucent=true] When <code>true</code>, the geometry is expected to appear translucent so {@link MaterialAppearance#renderState} has alpha blending enabled.
  23. * @param {boolean} [options.closed=false] When <code>true</code>, the geometry is expected to be closed so {@link MaterialAppearance#renderState} has backface culling enabled.
  24. * @param {MaterialAppearance.MaterialSupportType} [options.materialSupport=MaterialAppearance.MaterialSupport.TEXTURED] The type of materials that will be supported.
  25. * @param {Material} [options.material=Material.ColorType] The material used to determine the fragment color.
  26. * @param {string} [options.vertexShaderSource] Optional GLSL vertex shader source to override the default vertex shader.
  27. * @param {string} [options.fragmentShaderSource] Optional GLSL fragment shader source to override the default fragment shader.
  28. * @param {object} [options.renderState] Optional render state to override the default render state.
  29. *
  30. * @see {@link https://github.com/CesiumGS/cesium/wiki/Fabric|Fabric}
  31. * @demo {@link https://sandcastle.cesium.com/index.html?src=Materials.html|Cesium Sandcastle Material Appearance Demo}
  32. *
  33. * @example
  34. * const primitive = new Cesium.Primitive({
  35. * geometryInstances : new Cesium.GeometryInstance({
  36. * geometry : new Cesium.WallGeometry({
  37. materialSupport : Cesium.MaterialAppearance.MaterialSupport.BASIC.vertexFormat,
  38. * // ...
  39. * })
  40. * }),
  41. * appearance : new Cesium.MaterialAppearance({
  42. * material : Cesium.Material.fromType('Color'),
  43. * faceForward : true
  44. * })
  45. *
  46. * });
  47. */
  48. function MaterialAppearance(options) {
  49. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  50. const translucent = defaultValue(options.translucent, true);
  51. const closed = defaultValue(options.closed, false);
  52. const materialSupport = defaultValue(
  53. options.materialSupport,
  54. MaterialAppearance.MaterialSupport.TEXTURED
  55. );
  56. /**
  57. * The material used to determine the fragment color. Unlike other {@link MaterialAppearance}
  58. * properties, this is not read-only, so an appearance's material can change on the fly.
  59. *
  60. * @type Material
  61. *
  62. * @default {@link Material.ColorType}
  63. *
  64. * @see {@link https://github.com/CesiumGS/cesium/wiki/Fabric|Fabric}
  65. */
  66. this.material = defined(options.material)
  67. ? options.material
  68. : Material.fromType(Material.ColorType);
  69. /**
  70. * When <code>true</code>, the geometry is expected to appear translucent.
  71. *
  72. * @type {boolean}
  73. *
  74. * @default true
  75. */
  76. this.translucent = translucent;
  77. this._vertexShaderSource = defaultValue(
  78. options.vertexShaderSource,
  79. materialSupport.vertexShaderSource
  80. );
  81. this._fragmentShaderSource = defaultValue(
  82. options.fragmentShaderSource,
  83. materialSupport.fragmentShaderSource
  84. );
  85. this._renderState = Appearance.getDefaultRenderState(
  86. translucent,
  87. closed,
  88. options.renderState
  89. );
  90. this._closed = closed;
  91. // Non-derived members
  92. this._materialSupport = materialSupport;
  93. this._vertexFormat = materialSupport.vertexFormat;
  94. this._flat = defaultValue(options.flat, false);
  95. this._faceForward = defaultValue(options.faceForward, !closed);
  96. }
  97. Object.defineProperties(MaterialAppearance.prototype, {
  98. /**
  99. * The GLSL source code for the vertex shader.
  100. *
  101. * @memberof MaterialAppearance.prototype
  102. *
  103. * @type {string}
  104. * @readonly
  105. */
  106. vertexShaderSource: {
  107. get: function () {
  108. return this._vertexShaderSource;
  109. },
  110. },
  111. /**
  112. * The GLSL source code for the fragment shader. The full fragment shader
  113. * source is built procedurally taking into account {@link MaterialAppearance#material},
  114. * {@link MaterialAppearance#flat}, and {@link MaterialAppearance#faceForward}.
  115. * Use {@link MaterialAppearance#getFragmentShaderSource} to get the full source.
  116. *
  117. * @memberof MaterialAppearance.prototype
  118. *
  119. * @type {string}
  120. * @readonly
  121. */
  122. fragmentShaderSource: {
  123. get: function () {
  124. return this._fragmentShaderSource;
  125. },
  126. },
  127. /**
  128. * The WebGL fixed-function state to use when rendering the geometry.
  129. * <p>
  130. * The render state can be explicitly defined when constructing a {@link MaterialAppearance}
  131. * instance, or it is set implicitly via {@link MaterialAppearance#translucent}
  132. * and {@link MaterialAppearance#closed}.
  133. * </p>
  134. *
  135. * @memberof MaterialAppearance.prototype
  136. *
  137. * @type {object}
  138. * @readonly
  139. */
  140. renderState: {
  141. get: function () {
  142. return this._renderState;
  143. },
  144. },
  145. /**
  146. * When <code>true</code>, the geometry is expected to be closed so
  147. * {@link MaterialAppearance#renderState} has backface culling enabled.
  148. * If the viewer enters the geometry, it will not be visible.
  149. *
  150. * @memberof MaterialAppearance.prototype
  151. *
  152. * @type {boolean}
  153. * @readonly
  154. *
  155. * @default false
  156. */
  157. closed: {
  158. get: function () {
  159. return this._closed;
  160. },
  161. },
  162. /**
  163. * The type of materials supported by this instance. This impacts the required
  164. * {@link VertexFormat} and the complexity of the vertex and fragment shaders.
  165. *
  166. * @memberof MaterialAppearance.prototype
  167. *
  168. * @type {MaterialAppearance.MaterialSupportType}
  169. * @readonly
  170. *
  171. * @default {@link MaterialAppearance.MaterialSupport.TEXTURED}
  172. */
  173. materialSupport: {
  174. get: function () {
  175. return this._materialSupport;
  176. },
  177. },
  178. /**
  179. * The {@link VertexFormat} that this appearance instance is compatible with.
  180. * A geometry can have more vertex attributes and still be compatible - at a
  181. * potential performance cost - but it can't have less.
  182. *
  183. * @memberof MaterialAppearance.prototype
  184. *
  185. * @type VertexFormat
  186. * @readonly
  187. *
  188. * @default {@link MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat}
  189. */
  190. vertexFormat: {
  191. get: function () {
  192. return this._vertexFormat;
  193. },
  194. },
  195. /**
  196. * When <code>true</code>, flat shading is used in the fragment shader,
  197. * which means lighting is not taking into account.
  198. *
  199. * @memberof MaterialAppearance.prototype
  200. *
  201. * @type {boolean}
  202. * @readonly
  203. *
  204. * @default false
  205. */
  206. flat: {
  207. get: function () {
  208. return this._flat;
  209. },
  210. },
  211. /**
  212. * When <code>true</code>, the fragment shader flips the surface normal
  213. * as needed to ensure that the normal faces the viewer to avoid
  214. * dark spots. This is useful when both sides of a geometry should be
  215. * shaded like {@link WallGeometry}.
  216. *
  217. * @memberof MaterialAppearance.prototype
  218. *
  219. * @type {boolean}
  220. * @readonly
  221. *
  222. * @default true
  223. */
  224. faceForward: {
  225. get: function () {
  226. return this._faceForward;
  227. },
  228. },
  229. });
  230. /**
  231. * Procedurally creates the full GLSL fragment shader source. For {@link MaterialAppearance},
  232. * this is derived from {@link MaterialAppearance#fragmentShaderSource}, {@link MaterialAppearance#material},
  233. * {@link MaterialAppearance#flat}, and {@link MaterialAppearance#faceForward}.
  234. *
  235. * @function
  236. *
  237. * @returns {string} The full GLSL fragment shader source.
  238. */
  239. MaterialAppearance.prototype.getFragmentShaderSource =
  240. Appearance.prototype.getFragmentShaderSource;
  241. /**
  242. * Determines if the geometry is translucent based on {@link MaterialAppearance#translucent} and {@link Material#isTranslucent}.
  243. *
  244. * @function
  245. *
  246. * @returns {boolean} <code>true</code> if the appearance is translucent.
  247. */
  248. MaterialAppearance.prototype.isTranslucent = Appearance.prototype.isTranslucent;
  249. /**
  250. * Creates a render state. This is not the final render state instance; instead,
  251. * it can contain a subset of render state properties identical to the render state
  252. * created in the context.
  253. *
  254. * @function
  255. *
  256. * @returns {object} The render state.
  257. */
  258. MaterialAppearance.prototype.getRenderState =
  259. Appearance.prototype.getRenderState;
  260. /**
  261. * @typedef MaterialAppearance.MaterialSupportType
  262. * @type {object}
  263. * @property {VertexFormat} vertexFormat
  264. * @property {string} vertexShaderSource
  265. * @property {string} fragmentShaderSource
  266. */
  267. /**
  268. * Determines the type of {@link Material} that is supported by a
  269. * {@link MaterialAppearance} instance. This is a trade-off between
  270. * flexibility (a wide array of materials) and memory/performance
  271. * (required vertex format and GLSL shader complexity.
  272. * @namespace
  273. */
  274. MaterialAppearance.MaterialSupport = {
  275. /**
  276. * Only basic materials, which require just <code>position</code> and
  277. * <code>normal</code> vertex attributes, are supported.
  278. *
  279. * @type {MaterialAppearance.MaterialSupportType}
  280. * @constant
  281. */
  282. BASIC: Object.freeze({
  283. vertexFormat: VertexFormat.POSITION_AND_NORMAL,
  284. vertexShaderSource: BasicMaterialAppearanceVS,
  285. fragmentShaderSource: BasicMaterialAppearanceFS,
  286. }),
  287. /**
  288. * Materials with textures, which require <code>position</code>,
  289. * <code>normal</code>, and <code>st</code> vertex attributes,
  290. * are supported. The vast majority of materials fall into this category.
  291. *
  292. * @type {MaterialAppearance.MaterialSupportType}
  293. * @constant
  294. */
  295. TEXTURED: Object.freeze({
  296. vertexFormat: VertexFormat.POSITION_NORMAL_AND_ST,
  297. vertexShaderSource: TexturedMaterialAppearanceVS,
  298. fragmentShaderSource: TexturedMaterialAppearanceFS,
  299. }),
  300. /**
  301. * All materials, including those that work in tangent space, are supported.
  302. * This requires <code>position</code>, <code>normal</code>, <code>st</code>,
  303. * <code>tangent</code>, and <code>bitangent</code> vertex attributes.
  304. *
  305. * @type {MaterialAppearance.MaterialSupportType}
  306. * @constant
  307. */
  308. ALL: Object.freeze({
  309. vertexFormat: VertexFormat.ALL,
  310. vertexShaderSource: AllMaterialAppearanceVS,
  311. fragmentShaderSource: AllMaterialAppearanceFS,
  312. }),
  313. };
  314. export default MaterialAppearance;