pbrMaterialPropertyGridComponent.tsx 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. import * as React from "react";
  2. import { Observable } from "babylonjs/Misc/observable";
  3. import { PBRMaterial } from "babylonjs/Materials/PBR/pbrMaterial";
  4. import { PropertyChangedEvent } from "../../../../propertyChangedEvent";
  5. import { LineContainerComponent } from "../../../lineContainerComponent";
  6. import { Color3LineComponent } from "../../../lines/color3LineComponent";
  7. import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
  8. import { Vector2LineComponent } from "../../../lines/vector2LineComponent";
  9. import { SliderLineComponent } from "../../../lines/sliderLineComponent";
  10. import { OptionsLineComponent } from "../../../lines/optionsLineComponent";
  11. import { CommonMaterialPropertyGridComponent } from "./commonMaterialPropertyGridComponent";
  12. import { TextureLinkLineComponent } from "../../../lines/textureLinkLineComponent";
  13. import { LockObject } from "../lockObject";
  14. import { GlobalState } from '../../../../globalState';
  15. interface IPBRMaterialPropertyGridComponentProps {
  16. globalState: GlobalState;
  17. material: PBRMaterial;
  18. lockObject: LockObject;
  19. onSelectionChangedObservable?: Observable<any>;
  20. onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
  21. }
  22. export class PBRMaterialPropertyGridComponent extends React.Component<IPBRMaterialPropertyGridComponentProps> {
  23. private _onDebugSelectionChangeObservable = new Observable<TextureLinkLineComponent>();
  24. constructor(props: IPBRMaterialPropertyGridComponentProps) {
  25. super(props);
  26. }
  27. switchAmbientMode(state: boolean) {
  28. this.props.material.debugMode = state ? 21 : 0;
  29. }
  30. switchMetallicMode(state: boolean) {
  31. this.props.material.debugMode = state ? 62 : 0;
  32. }
  33. switchRoughnessMode(state: boolean) {
  34. this.props.material.debugMode = state ? 63 : 0;
  35. }
  36. renderTextures(onDebugSelectionChangeObservable: Observable<TextureLinkLineComponent>) {
  37. const material = this.props.material;
  38. return (
  39. <LineContainerComponent globalState={this.props.globalState} title="CHANNELS">
  40. <TextureLinkLineComponent label="Albedo" texture={material.albedoTexture} propertyName="albedoTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  41. <TextureLinkLineComponent customDebugAction={(state) => this.switchMetallicMode(state)} label="Metallic" texture={material.metallicTexture} propertyName="metallicTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  42. <TextureLinkLineComponent customDebugAction={(state) => this.switchRoughnessMode(state)} label="Roughness" texture={material.metallicTexture} propertyName="metallicTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  43. <TextureLinkLineComponent label="Reflection" texture={material.reflectionTexture} propertyName="reflectionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  44. <TextureLinkLineComponent label="Refraction" texture={material.refractionTexture} propertyName="refractionTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  45. <TextureLinkLineComponent label="Reflectivity" texture={material.reflectivityTexture} propertyName="reflectivityTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  46. <TextureLinkLineComponent label="Micro-surface" texture={material.microSurfaceTexture} propertyName="microSurfaceTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  47. <TextureLinkLineComponent label="Bump" texture={material.bumpTexture} propertyName="bumpTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  48. <TextureLinkLineComponent label="Emissive" texture={material.emissiveTexture} propertyName="emissiveTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  49. <TextureLinkLineComponent label="Opacity" texture={material.opacityTexture} propertyName="opacityTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  50. <TextureLinkLineComponent customDebugAction={(state) => this.switchAmbientMode(state)} label="Ambient" texture={material.ambientTexture} propertyName="ambientTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  51. <TextureLinkLineComponent label="Lightmap" texture={material.lightmapTexture} propertyName="lightmapTexture" material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={onDebugSelectionChangeObservable} />
  52. <CheckBoxLineComponent label="Use lightmap as shadowmap" target={material} propertyName="useLightmapAsShadowmap " onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  53. </LineContainerComponent>
  54. );
  55. }
  56. render() {
  57. const material = this.props.material;
  58. const debugMode = [
  59. { label: "None", value: 0 },
  60. // Geometry
  61. { label: "Normalized position", value: 1 },
  62. { label: "Normals", value: 2 },
  63. { label: "Tangents", value: 3 },
  64. { label: "Bitangents", value: 4 },
  65. { label: "Bump Normals", value: 5 },
  66. { label: "UV1", value: 6 },
  67. { label: "UV2", value: 7 },
  68. { label: "ClearCoat Normals", value: 8 },
  69. { label: "ClearCoat Tangents", value: 9 },
  70. { label: "ClearCoat Bitangents", value: 10 },
  71. { label: "Anisotropic Normals", value: 11 },
  72. { label: "Anisotropic Tangents", value: 12 },
  73. { label: "Anisotropic Bitangents", value: 13 },
  74. // Maps
  75. { label: "Albdeo Map", value: 20 },
  76. { label: "Ambient Map", value: 21 },
  77. { label: "Opacity Map", value: 22 },
  78. { label: "Emissive Map", value: 23 },
  79. { label: "Light Map", value: 24 },
  80. { label: "Metallic Map", value: 25 },
  81. { label: "Reflectivity Map", value: 26 },
  82. { label: "ClearCoat Map", value: 27 },
  83. { label: "ClearCoat Tint Map", value: 28 },
  84. { label: "Sheen Map", value: 29 },
  85. { label: "Anisotropic Map", value: 30 },
  86. { label: "Thickness Map", value: 31 },
  87. // Env
  88. { label: "Env Refraction", value: 40 },
  89. { label: "Env Reflection", value: 41 },
  90. { label: "Env Clear Coat", value: 42 },
  91. // Lighting
  92. { label: "Direct Diffuse", value: 50 },
  93. { label: "Direct Specular", value: 51 },
  94. { label: "Direct Clear Coat", value: 52 },
  95. { label: "Direct Sheen", value: 53 },
  96. { label: "Env Irradiance", value: 54 },
  97. // Lighting Params
  98. { label: "Surface Albedo", value: 60 },
  99. { label: "Reflectance 0", value: 61 },
  100. { label: "Metallic", value: 62 },
  101. { label: "Metallic F0", value: 71 },
  102. { label: "Roughness", value: 63 },
  103. { label: "AlphaG", value: 64 },
  104. { label: "NdotV", value: 65 },
  105. { label: "ClearCoat Color", value: 66 },
  106. { label: "ClearCoat Roughness", value: 67 },
  107. { label: "ClearCoat NdotV", value: 68 },
  108. { label: "Transmittance", value: 69 },
  109. { label: "Refraction Transmittance", value: 70 },
  110. // Misc
  111. { label: "SEO", value: 80 },
  112. { label: "EHO", value: 81 },
  113. { label: "Energy Factor", value: 82 },
  114. { label: "Specular Reflectance", value: 83 },
  115. { label: "Clear Coat Reflectance", value: 84 },
  116. { label: "Sheen Reflectance", value: 85 },
  117. { label: "Luminance Over Alpha", value: 86 },
  118. { label: "Alpha", value: 87 },
  119. ];
  120. (material.sheen as any)._useRoughness = (material.sheen as any)._useRoughness ?? material.sheen.roughness !== null;
  121. material.sheen.roughness = material.sheen.roughness ?? (material.sheen as any)._saveRoughness ?? 0;
  122. if (!(material.sheen as any)._useRoughness) {
  123. (material.sheen as any)._saveRoughness = material.sheen.roughness;
  124. material.sheen.roughness = null;
  125. }
  126. return (
  127. <div className="pane">
  128. <CommonMaterialPropertyGridComponent globalState={this.props.globalState} lockObject={this.props.lockObject} material={material} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  129. {this.renderTextures(this._onDebugSelectionChangeObservable)}
  130. <LineContainerComponent globalState={this.props.globalState} title="LIGHTING & COLORS">
  131. <Color3LineComponent label="Albedo" target={material} propertyName="albedoColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true}/>
  132. <Color3LineComponent label="Reflectivity" target={material} propertyName="reflectivityColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  133. <SliderLineComponent label="Micro-surface" target={material} propertyName="microSurface" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  134. <Color3LineComponent label="Emissive" target={material} propertyName="emissiveColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  135. <Color3LineComponent label="Ambient" target={material} propertyName="ambientColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  136. <CheckBoxLineComponent label="Use physical light falloff" target={material} propertyName="usePhysicalLightFalloff" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  137. </LineContainerComponent>
  138. <LineContainerComponent globalState={this.props.globalState} title="METALLIC WORKFLOW">
  139. <SliderLineComponent label="Metallic" target={material} propertyName="metallic" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  140. <SliderLineComponent label="Metallic F0" target={material} propertyName="metallicF0Factor" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  141. <CheckBoxLineComponent label="Metallic F0 From Map" target={material} propertyName="useMetallicF0FactorFromMetallicTexture"
  142. onValueChanged={() => this.forceUpdate()}
  143. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  144. <SliderLineComponent label="Roughness" target={material} propertyName="roughness" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  145. </LineContainerComponent>
  146. <LineContainerComponent globalState={this.props.globalState} title="CLEAR COAT">
  147. <CheckBoxLineComponent label="Enabled" target={material.clearCoat} propertyName="isEnabled"
  148. onValueChanged={() => this.forceUpdate()}
  149. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  150. {
  151. material.clearCoat.isEnabled &&
  152. <div className="fragment">
  153. <SliderLineComponent label="Intensity" target={material.clearCoat} propertyName="intensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  154. <SliderLineComponent label="Roughness" target={material.clearCoat} propertyName="roughness" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  155. <SliderLineComponent label="IOR" target={material.clearCoat} propertyName="indexOfRefraction" minimum={1.0} maximum={3} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  156. <TextureLinkLineComponent label="Clear coat" texture={material.clearCoat.texture} onTextureCreated={(texture) => material.clearCoat.texture = texture} onTextureRemoved={() => material.clearCoat.texture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  157. <TextureLinkLineComponent label="Bump" texture={material.clearCoat.bumpTexture} onTextureCreated={(texture) => material.clearCoat.bumpTexture = texture} onTextureRemoved={() => material.clearCoat.bumpTexture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  158. {
  159. material.clearCoat.bumpTexture &&
  160. <SliderLineComponent label="Bump strength" target={material.clearCoat.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  161. }
  162. <CheckBoxLineComponent label="Tint" target={material.clearCoat} propertyName="isTintEnabled" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  163. {
  164. material.clearCoat.isEnabled && material.clearCoat.isTintEnabled &&
  165. <Color3LineComponent label="Tint Color" target={material.clearCoat} propertyName="tintColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  166. }
  167. {
  168. material.clearCoat.isEnabled && material.clearCoat.isTintEnabled &&
  169. <SliderLineComponent label="At Distance" target={material.clearCoat} propertyName="tintColorAtDistance" minimum={0} maximum={20} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  170. }
  171. {
  172. material.clearCoat.isEnabled && material.clearCoat.isTintEnabled &&
  173. <SliderLineComponent label="Tint Thickness" target={material.clearCoat} propertyName="tintThickness" minimum={0} maximum={20} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  174. }
  175. {
  176. material.clearCoat.isEnabled && material.clearCoat.isTintEnabled &&
  177. <TextureLinkLineComponent label="Tint" texture={material.clearCoat.tintTexture} onTextureCreated={(texture) => material.clearCoat.tintTexture = texture} onTextureRemoved={() => material.clearCoat.tintTexture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  178. }
  179. </div>
  180. }
  181. </LineContainerComponent>
  182. <LineContainerComponent globalState={this.props.globalState} title="ANISOTROPIC">
  183. <CheckBoxLineComponent label="Enabled" target={material.anisotropy} propertyName="isEnabled"
  184. onValueChanged={() => this.forceUpdate()}
  185. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  186. {
  187. material.anisotropy.isEnabled &&
  188. <div className="fragment">
  189. <SliderLineComponent label="Intensity" target={material.anisotropy} propertyName="intensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  190. <Vector2LineComponent label="Direction" target={material.anisotropy} propertyName="direction" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  191. <TextureLinkLineComponent label="Anisotropic" texture={material.anisotropy.texture} onTextureCreated={(texture) => material.anisotropy.texture = texture} onTextureRemoved={() => material.anisotropy.texture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  192. </div>
  193. }
  194. </LineContainerComponent>
  195. <LineContainerComponent globalState={this.props.globalState} title="SHEEN">
  196. <CheckBoxLineComponent label="Enabled" target={material.sheen} propertyName="isEnabled"
  197. onValueChanged={() => this.forceUpdate()}
  198. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  199. {
  200. material.sheen.isEnabled &&
  201. <div className="fragment">
  202. <CheckBoxLineComponent label="Link to Albedo" target={material.sheen} propertyName="linkSheenWithAlbedo" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  203. <SliderLineComponent label="Intensity" target={material.sheen} propertyName="intensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  204. <Color3LineComponent label="Color" target={material.sheen} propertyName="color" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  205. <TextureLinkLineComponent label="Sheen" texture={material.sheen.texture} onTextureCreated={(texture) => material.sheen.texture = texture} onTextureRemoved={() => material.sheen.texture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  206. <CheckBoxLineComponent label="Use roughness" target={material.sheen} propertyName="_useRoughness" />
  207. { (material.sheen as any)._useRoughness &&
  208. <SliderLineComponent label="Roughness" target={material.sheen} propertyName="roughness" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  209. }
  210. <CheckBoxLineComponent label="Albedo scaling" target={material.sheen} propertyName="albedoScaling" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  211. </div>
  212. }
  213. </LineContainerComponent>
  214. <LineContainerComponent globalState={this.props.globalState} title="SUBSURFACE">
  215. <TextureLinkLineComponent label="Thickness" texture={material.subSurface.thicknessTexture} onTextureCreated={(texture) => material.subSurface.thicknessTexture = texture} onTextureRemoved={() => material.subSurface.thicknessTexture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  216. <SliderLineComponent label="Min Thickness" target={material.subSurface} propertyName="minimumThickness" minimum={0} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  217. <SliderLineComponent label="Max Thickness" target={material.subSurface} propertyName="maximumThickness" minimum={0} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  218. <CheckBoxLineComponent label="Mask From Thickness" target={material.subSurface} propertyName="useMaskFromThicknessTexture"
  219. onValueChanged={() => this.forceUpdate()}
  220. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  221. <Color3LineComponent label="Tint Color" target={material.subSurface} propertyName="tintColor" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  222. <CheckBoxLineComponent label="Refraction Enabled" target={material.subSurface} propertyName="isRefractionEnabled"
  223. onValueChanged={() => this.forceUpdate()}
  224. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  225. {
  226. material.subSurface.isRefractionEnabled &&
  227. <div className="fragment">
  228. <SliderLineComponent label="Intensity" target={material.subSurface} propertyName="refractionIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  229. <TextureLinkLineComponent label="Refraction" texture={material.subSurface.refractionTexture} onTextureCreated={(texture) => material.subSurface.refractionTexture = texture} onTextureRemoved={() => material.subSurface.refractionTexture = null} material={material} onSelectionChangedObservable={this.props.onSelectionChangedObservable} onDebugSelectionChangeObservable={this._onDebugSelectionChangeObservable} />
  230. <SliderLineComponent label="Index of Refraction" target={material.subSurface} propertyName="indexOfRefraction" minimum={1} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  231. <SliderLineComponent label="Tint at Distance" target={material.subSurface} propertyName="tintColorAtDistance" minimum={0} maximum={10} step={0.1} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  232. <CheckBoxLineComponent label="Link refraction with transparency" target={material.subSurface} propertyName="linkRefractionWithTransparency" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  233. </div>
  234. }
  235. <CheckBoxLineComponent label="Translucency Enabled" target={material.subSurface} propertyName="isTranslucencyEnabled"
  236. onValueChanged={() => this.forceUpdate()}
  237. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  238. {
  239. material.subSurface.isTranslucencyEnabled &&
  240. <div className="fragment">
  241. <SliderLineComponent label="Intensity" target={material.subSurface} propertyName="translucencyIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  242. <Color3LineComponent label="Diffusion Distance" target={material.subSurface} propertyName="diffusionDistance" onPropertyChangedObservable={this.props.onPropertyChangedObservable} isLinear={true} />
  243. </div>
  244. }
  245. </LineContainerComponent>
  246. <LineContainerComponent globalState={this.props.globalState} title="LEVELS" closed={true}>
  247. <SliderLineComponent label="Environment" target={material} propertyName="environmentIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  248. <SliderLineComponent label="Specular" target={material} propertyName="specularIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  249. <SliderLineComponent label="Emissive" target={material} propertyName="emissiveIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  250. <SliderLineComponent label="Direct" target={material} propertyName="directIntensity" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  251. {
  252. material.bumpTexture &&
  253. <SliderLineComponent label="Bump strength" target={material.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  254. }
  255. {
  256. material.ambientTexture &&
  257. <SliderLineComponent label="Ambient strength" target={material} propertyName="ambientTextureStrength" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  258. }
  259. {
  260. material.reflectionTexture &&
  261. <SliderLineComponent label="Reflection strength" target={material.reflectionTexture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  262. }
  263. {
  264. material.clearCoat.texture &&
  265. <SliderLineComponent label="Clear coat" target={material.clearCoat.texture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  266. }
  267. {
  268. material.clearCoat.bumpTexture &&
  269. <SliderLineComponent label="Clear coat bump" target={material.clearCoat.bumpTexture} propertyName="level" minimum={0} maximum={2} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  270. }
  271. {
  272. material.clearCoat.tintTexture && false && /* level is not used for the clear coat tint texture */
  273. <SliderLineComponent label="Clear coat tint" target={material.clearCoat.tintTexture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  274. }
  275. {
  276. material.anisotropy.texture &&
  277. <SliderLineComponent label="Anisotropic" target={material.anisotropy.texture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  278. }
  279. {
  280. material.sheen.texture &&
  281. <SliderLineComponent label="Sheen" target={material.sheen.texture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  282. }
  283. {
  284. material.subSurface.thicknessTexture &&
  285. <SliderLineComponent label="Thickness" target={material.subSurface.thicknessTexture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  286. }
  287. {
  288. material.subSurface.refractionTexture &&
  289. <SliderLineComponent label="Refraction" target={material.subSurface.refractionTexture} propertyName="level" minimum={0} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  290. }
  291. </LineContainerComponent>
  292. <LineContainerComponent globalState={this.props.globalState} title="RENDERING" closed={true}>
  293. <CheckBoxLineComponent label="Alpha from albedo" target={material} propertyName="useAlphaFromAlbedoTexture" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  294. <CheckBoxLineComponent label="Ambient in grayscale" target={material} propertyName="useAmbientInGrayScale" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  295. <CheckBoxLineComponent label="Radiance over alpha" target={material} propertyName="useRadianceOverAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  296. <CheckBoxLineComponent label="Micro-surface from ref. map alpha" target={material} propertyName="useMicroSurfaceFromReflectivityMapAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  297. <CheckBoxLineComponent label="Specular over alpha" target={material} propertyName="useSpecularOverAlpha" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  298. <CheckBoxLineComponent label="Specular anti-aliasing" target={material} propertyName="enableSpecularAntiAliasing" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  299. </LineContainerComponent>
  300. <LineContainerComponent globalState={this.props.globalState} title="NORMAL MAP" closed={true}>
  301. <CheckBoxLineComponent label="Invert X axis" target={material} propertyName="invertNormalMapX" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  302. <CheckBoxLineComponent label="Invert Y axis" target={material} propertyName="invertNormalMapY" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  303. </LineContainerComponent>
  304. <LineContainerComponent globalState={this.props.globalState} title="ADVANCED" closed={true}>
  305. <CheckBoxLineComponent label="Energy Conservation" target={material.brdf} propertyName="useEnergyConservation"
  306. onValueChanged={() => this.forceUpdate()}
  307. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  308. <CheckBoxLineComponent label="Spherical Harmonics" target={material.brdf} propertyName="useSphericalHarmonics"
  309. onValueChanged={() => this.forceUpdate()}
  310. onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  311. <CheckBoxLineComponent label="Radiance occlusion" target={material} propertyName="useRadianceOcclusion" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  312. <CheckBoxLineComponent label="Horizon occlusion " target={material} propertyName="useHorizonOcclusion" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  313. <CheckBoxLineComponent label="Unlit" target={material} propertyName="unlit" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  314. </LineContainerComponent>
  315. <LineContainerComponent globalState={this.props.globalState} title="DEBUG" closed={true}>
  316. <OptionsLineComponent label="Debug mode" options={debugMode} target={material} propertyName="debugMode" />
  317. <SliderLineComponent label="Split position" target={material} propertyName="debugLimit" minimum={-1} maximum={1} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  318. <SliderLineComponent label="Output factor" target={material} propertyName="debugFactor" minimum={0} maximum={5} step={0.01} onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
  319. </LineContainerComponent>
  320. </div>
  321. );
  322. }
  323. }