babylon.environmentHelper.ts 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. namespace BABYLON {
  2. /**
  3. * Represents the different options available during the creation of
  4. * a Environment helper.
  5. *
  6. * This can control the default ground, skybox and image processing setup of your scene.
  7. */
  8. export interface IEnvironmentHelperOptions {
  9. /**
  10. * Specifies wether or not to create a ground.
  11. * True by default.
  12. */
  13. createGround: boolean;
  14. /**
  15. * Specifies the ground size.
  16. * 15 by default.
  17. */
  18. groundSize: number;
  19. /**
  20. * The texture used on the ground for the main color.
  21. * Comes from the BabylonJS CDN by default.
  22. *
  23. * Remarks: Can be either a texture or a url.
  24. */
  25. groundTexture: string | BaseTexture;
  26. /**
  27. * The color mixed in the ground texture by default.
  28. * BabylonJS clearColor by default.
  29. */
  30. groundColor: Color3;
  31. /**
  32. * Specifies the ground opacity.
  33. * 1 by default.
  34. */
  35. groundOpacity: number;
  36. /**
  37. * Enables the ground to receive shadows.
  38. * True by default.
  39. */
  40. enableGroundShadow: boolean;
  41. /**
  42. * Helps preventing the shadow to be fully black on the ground.
  43. * 0.5 by default.
  44. */
  45. groundShadowLevel: number;
  46. /**
  47. * Creates a mirror texture attach to the ground.
  48. * false by default.
  49. */
  50. enableGroundMirror: boolean;
  51. /**
  52. * Specifies the ground mirror size ratio.
  53. * 0.3 by default as the default kernel is 64.
  54. */
  55. groundMirrorSizeRatio: number;
  56. /**
  57. * Specifies the ground mirror blur kernel size.
  58. * 64 by default.
  59. */
  60. groundMirrorBlurKernel: number;
  61. /**
  62. * Specifies the ground mirror visibility amount.
  63. * 1 by default
  64. */
  65. groundMirrorAmount: number;
  66. /**
  67. * Specifies the ground mirror reflectance weight.
  68. * This uses the standard weight of the background material to setup the fresnel effect
  69. * of the mirror.
  70. * 1 by default.
  71. */
  72. groundMirrorFresnelWeight: number;
  73. /**
  74. * Specifies the ground mirror Falloff distance.
  75. * This can helps reducing the size of the reflection.
  76. * 0 by Default.
  77. */
  78. groundMirrorFallOffDistance: number;
  79. /**
  80. * Specifies the ground mirror texture type.
  81. * Unsigned Int by Default.
  82. */
  83. groundMirrorTextureType: number;
  84. /**
  85. * Specifies wether or not to create a skybox.
  86. * True by default.
  87. */
  88. createSkybox: boolean;
  89. /**
  90. * Specifies the skybox size.
  91. * 20 by default.
  92. */
  93. skyboxSize: number;
  94. /**
  95. * The texture used on the skybox for the main color.
  96. * Comes from the BabylonJS CDN by default.
  97. *
  98. * Remarks: Can be either a texture or a url.
  99. */
  100. skyboxTexture: string | BaseTexture;
  101. /**
  102. * The color mixed in the skybox texture by default.
  103. * BabylonJS clearColor by default.
  104. */
  105. skyboxColor: Color3;
  106. /**
  107. * The background rotation around the Y axis of the scene.
  108. * This helps aligning the key lights of your scene with the background.
  109. * 0 by default.
  110. */
  111. backgroundYRotation: number;
  112. /**
  113. * Compute automatically the size of the elements to best fit with the scene.
  114. */
  115. sizeAuto: boolean;
  116. /**
  117. * Default position of the rootMesh if autoSize is not true.
  118. */
  119. rootPosition: Vector3;
  120. /**
  121. * Sets up the image processing in the scene.
  122. * true by default.
  123. */
  124. setupImageProcessing: boolean;
  125. /**
  126. * The texture used as your environment texture in the scene.
  127. * Comes from the BabylonJS CDN by default and in use if setupImageProcessing is true.
  128. *
  129. * Remarks: Can be either a texture or a url.
  130. */
  131. environmentTexture: string | BaseTexture;
  132. /**
  133. * The value of the exposure to apply to the scene.
  134. * 0.6 by default if setupImageProcessing is true.
  135. */
  136. cameraExposure: number;
  137. /**
  138. * The value of the contrast to apply to the scene.
  139. * 1.6 by default if setupImageProcessing is true.
  140. */
  141. cameraContrast: number;
  142. /**
  143. * Specifies wether or not tonemapping should be enabled in the scene.
  144. * true by default if setupImageProcessing is true.
  145. */
  146. toneMappingEnabled: boolean;
  147. }
  148. interface ISceneSize {
  149. groundSize: number,
  150. skyboxSize: number,
  151. rootPosition: Vector3
  152. }
  153. /**
  154. * The Environment helper class can be used to add a fully featuread none expensive background to your scene.
  155. * It includes by default a skybox and a ground relying on the BackgroundMaterial.
  156. * It also helps with the default setup of your imageProcessing configuration.
  157. */
  158. export class EnvironmentHelper {
  159. /**
  160. * Default ground texture URL.
  161. */
  162. private static _groundTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundGround.png";
  163. /**
  164. * Default skybox texture URL.
  165. */
  166. private static _skyboxTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundSkybox.dds";
  167. /**
  168. * Default environment texture URL.
  169. */
  170. private static _environmentTextureCDNUrl = "https://assets.babylonjs.com/environments/environmentSpecular.dds";
  171. /**
  172. * Creates the default options for the helper.
  173. */
  174. private static _getDefaultOptions(): IEnvironmentHelperOptions {
  175. return {
  176. createGround: true,
  177. groundSize: 15,
  178. groundTexture: this._groundTextureCDNUrl,
  179. groundColor: new BABYLON.Color3(0.2, 0.2, 0.3).toLinearSpace().scale(3),
  180. groundOpacity: 0.9,
  181. enableGroundShadow: true,
  182. groundShadowLevel: 0.5,
  183. enableGroundMirror: false,
  184. groundMirrorSizeRatio: 0.3,
  185. groundMirrorBlurKernel: 64,
  186. groundMirrorAmount: 1,
  187. groundMirrorFresnelWeight: 1,
  188. groundMirrorFallOffDistance: 0,
  189. groundMirrorTextureType: Engine.TEXTURETYPE_UNSIGNED_INT,
  190. createSkybox: true,
  191. skyboxSize: 20,
  192. skyboxTexture: this._skyboxTextureCDNUrl,
  193. skyboxColor: new BABYLON.Color3(0.2, 0.2, 0.3).toLinearSpace().scale(3),
  194. backgroundYRotation: 0,
  195. sizeAuto: true,
  196. rootPosition: Vector3.Zero(),
  197. setupImageProcessing: true,
  198. environmentTexture: this._environmentTextureCDNUrl,
  199. cameraExposure: 0.8,
  200. cameraContrast: 1.2,
  201. toneMappingEnabled: true,
  202. };
  203. }
  204. private _rootMesh: Mesh;
  205. /**
  206. * Gets the root mesh created by the helper.
  207. */
  208. public get rootMesh(): Mesh {
  209. return this._rootMesh;
  210. }
  211. private _skybox: Nullable<Mesh>;
  212. /**
  213. * Gets the skybox created by the helper.
  214. */
  215. public get skybox(): Nullable<Mesh> {
  216. return this._skybox;
  217. }
  218. private _skyboxTexture: Nullable<BaseTexture>;
  219. /**
  220. * Gets the skybox texture created by the helper.
  221. */
  222. public get skyboxTexture(): Nullable<BaseTexture> {
  223. return this._skyboxTexture;
  224. }
  225. private _skyboxMaterial: Nullable<BackgroundMaterial>;
  226. /**
  227. * Gets the skybox material created by the helper.
  228. */
  229. public get skyboxMaterial(): Nullable<BackgroundMaterial> {
  230. return this._skyboxMaterial;
  231. }
  232. private _ground: Nullable<Mesh>;
  233. /**
  234. * Gets the ground mesh created by the helper.
  235. */
  236. public get ground(): Nullable<Mesh> {
  237. return this._ground;
  238. }
  239. private _groundTexture: Nullable<BaseTexture>;
  240. /**
  241. * Gets the ground texture created by the helper.
  242. */
  243. public get groundTexture(): Nullable<BaseTexture> {
  244. return this._groundTexture;
  245. }
  246. private _groundMirror: Nullable<MirrorTexture>;
  247. /**
  248. * Gets the ground mirror created by the helper.
  249. */
  250. public get groundMirror(): Nullable<MirrorTexture> {
  251. return this._groundMirror;
  252. }
  253. /**
  254. * Gets the ground mirror render list to helps pushing the meshes
  255. * you wish in the ground reflection.
  256. */
  257. public get groundMirrorRenderList(): Nullable<AbstractMesh[]> {
  258. if (this._groundMirror) {
  259. return this._groundMirror.renderList;
  260. }
  261. return null;
  262. }
  263. private _groundMaterial: Nullable<BackgroundMaterial>;
  264. /**
  265. * Gets the ground material created by the helper.
  266. */
  267. public get groundMaterial(): Nullable<BackgroundMaterial> {
  268. return this._groundMaterial;
  269. }
  270. /**
  271. * Stores the creation options.
  272. */
  273. private readonly _options: IEnvironmentHelperOptions;
  274. private readonly _scene: Scene;
  275. /**
  276. * constructor
  277. * @param options
  278. * @param scene The scene to add the material to
  279. */
  280. constructor(options: Partial<IEnvironmentHelperOptions>, scene: BABYLON.Scene) {
  281. this._options = {
  282. ...EnvironmentHelper._getDefaultOptions(),
  283. ...options
  284. }
  285. this._scene = scene;
  286. this._setupBackground();
  287. this._setupImageProcessing();
  288. }
  289. /**
  290. * Updates the background according to the new options
  291. * @param options
  292. */
  293. public updateOptions(options: Partial<IEnvironmentHelperOptions>) {
  294. const newOptions = {
  295. ...this._options,
  296. ...options
  297. }
  298. if (this._ground && !newOptions.createGround) {
  299. this._ground.dispose();
  300. this._ground = null;
  301. }
  302. if (this._groundMaterial && !newOptions.createGround) {
  303. this._groundMaterial.dispose();
  304. this._groundMaterial = null;
  305. }
  306. if (this._options.groundTexture && !newOptions.groundTexture && this._groundTexture) {
  307. this._groundTexture.dispose();
  308. this._groundTexture = null;
  309. }
  310. if (this._skybox && !newOptions.createSkybox) {
  311. this._skybox.dispose();
  312. this._skybox = null;
  313. }
  314. if (this._skyboxMaterial && !newOptions.createSkybox) {
  315. this._skyboxMaterial.dispose();
  316. this._skyboxMaterial = null;
  317. }
  318. if (this._options.skyboxTexture && !newOptions.skyboxTexture && this._skyboxTexture) {
  319. this._skyboxTexture.dispose();
  320. this._skyboxTexture = null;
  321. }
  322. if (this._groundMirror && !newOptions.enableGroundMirror) {
  323. this._groundMirror.dispose();
  324. this._groundMirror = null;
  325. }
  326. this._setupBackground();
  327. if (this._options.environmentTexture && !newOptions.environmentTexture && this._scene.environmentTexture) {
  328. this._scene.environmentTexture.dispose();
  329. }
  330. this._setupImageProcessing();
  331. }
  332. /**
  333. * Sets the primary color of all the available elements.
  334. * @param color
  335. */
  336. public setMainColor(color: Color3): void {
  337. if (this.groundMaterial) {
  338. this.groundMaterial.primaryColor = color;
  339. }
  340. if (this.skyboxMaterial) {
  341. this.skyboxMaterial.primaryColor = color;
  342. }
  343. if (this.groundMirror) {
  344. this.groundMirror.clearColor = new Color4(color.r, color.g, color.b, 1.0);
  345. }
  346. }
  347. /**
  348. * Setup the image processing according to the specified options.
  349. */
  350. private _setupImageProcessing(): void {
  351. if (this._options.setupImageProcessing) {
  352. this._scene.imageProcessingConfiguration.contrast = this._options.cameraContrast;
  353. this._scene.imageProcessingConfiguration.exposure = this._options.cameraExposure;
  354. this._scene.imageProcessingConfiguration.toneMappingEnabled = this._options.toneMappingEnabled;
  355. this._setupEnvironmentTexture();
  356. }
  357. }
  358. /**
  359. * Setup the environment texture according to the specified options.
  360. */
  361. private _setupEnvironmentTexture(): void {
  362. if (this._scene.environmentTexture) {
  363. return;
  364. }
  365. if (this._options.environmentTexture instanceof BaseTexture) {
  366. this._scene.environmentTexture = this._options.environmentTexture;
  367. return;
  368. }
  369. const environmentTexture = CubeTexture.CreateFromPrefilteredData(this._options.environmentTexture, this._scene);
  370. this._scene.environmentTexture = environmentTexture;
  371. }
  372. /**
  373. * Setup the background according to the specified options.
  374. */
  375. private _setupBackground(): void {
  376. if (!this._rootMesh) {
  377. this._rootMesh = new Mesh("BackgroundHelper", this._scene);
  378. }
  379. this._rootMesh.rotation.y = this._options.backgroundYRotation;
  380. const sceneSize = this._getSceneSize();
  381. if (this._options.createGround) {
  382. this._setupGround(sceneSize);
  383. this._setupGroundMaterial();
  384. this._setupGroundDiffuseTexture();
  385. if (this._options.enableGroundMirror) {
  386. this._setupGroundMirrorTexture(sceneSize);
  387. this._setupMirrorInGroundMaterial();
  388. }
  389. }
  390. if (this._options.createSkybox) {
  391. this._setupSkybox(sceneSize);
  392. this._setupSkyboxMaterial();
  393. this._setupSkyboxReflectionTexture();
  394. }
  395. this._rootMesh.position.x = sceneSize.rootPosition.x;
  396. this._rootMesh.position.z = sceneSize.rootPosition.z;
  397. this._rootMesh.position.y = sceneSize.rootPosition.y;
  398. }
  399. /**
  400. * Get the scene sizes according to the setup.
  401. */
  402. private _getSceneSize(): ISceneSize {
  403. let groundSize = this._options.groundSize;
  404. let skyboxSize = this._options.skyboxSize;
  405. let rootPosition = this._options.rootPosition;
  406. const sceneExtends = this._scene.getWorldExtends();
  407. const sceneDiagonal = sceneExtends.max.subtract(sceneExtends.min);
  408. let bias = 0.0001;
  409. if (this._options.sizeAuto) {
  410. if (this._scene.activeCamera instanceof ArcRotateCamera &&
  411. this._scene.activeCamera.upperRadiusLimit) {
  412. groundSize = this._scene.activeCamera.upperRadiusLimit * 2;
  413. }
  414. if (this._scene.activeCamera) {
  415. bias = (this._scene.activeCamera.maxZ - this._scene.activeCamera.minZ) / 10000;
  416. }
  417. const sceneDiagonalLenght = sceneDiagonal.length();
  418. if (sceneDiagonalLenght > groundSize) {
  419. groundSize = sceneDiagonalLenght * 2;
  420. }
  421. // 10 % bigger.
  422. groundSize *= 1.1;
  423. skyboxSize *= 1.5;
  424. rootPosition = sceneExtends.min.add(sceneDiagonal.scale(0.5));
  425. rootPosition.y = sceneExtends.min.y - bias;
  426. }
  427. return { groundSize, skyboxSize, rootPosition };
  428. }
  429. /**
  430. * Setup the ground according to the specified options.
  431. */
  432. private _setupGround(sceneSize: ISceneSize): void {
  433. if (!this._ground) {
  434. this._ground = Mesh.CreatePlane("BackgroundPlane", sceneSize.groundSize, this._scene);
  435. this._ground.rotation.x = Math.PI / 2; // Face up by default.
  436. this._ground.parent = this._rootMesh;
  437. }
  438. this._ground.receiveShadows = this._options.enableGroundShadow;
  439. }
  440. /**
  441. * Setup the ground material according to the specified options.
  442. */
  443. private _setupGroundMaterial(): void {
  444. if (!this._groundMaterial) {
  445. this._groundMaterial = new BABYLON.BackgroundMaterial("BackgroundPlaneMaterial", this._scene);
  446. }
  447. this._groundMaterial.alpha = this._options.groundOpacity;
  448. this._groundMaterial.alphaMode = BABYLON.Engine.ALPHA_PREMULTIPLIED_PORTERDUFF;
  449. this._groundMaterial.shadowLevel = this._options.groundShadowLevel;
  450. this._groundMaterial.primaryLevel = 1;
  451. this._groundMaterial.primaryColor = this._options.groundColor;
  452. this._groundMaterial.secondaryLevel = 0;
  453. this._groundMaterial.tertiaryLevel = 0;
  454. this._groundMaterial.useRGBColor = false;
  455. this._groundMaterial.enableNoise = true;
  456. if (this._ground) {
  457. this._ground.material = this._groundMaterial;
  458. }
  459. }
  460. /**
  461. * Setup the ground diffuse texture according to the specified options.
  462. */
  463. private _setupGroundDiffuseTexture(): void {
  464. if (!this._groundMaterial) {
  465. return;
  466. }
  467. if (this._groundTexture) {
  468. return;
  469. }
  470. if (this._options.groundTexture instanceof BaseTexture) {
  471. this._groundMaterial.diffuseTexture = this._options.groundTexture;
  472. return;
  473. }
  474. const diffuseTexture = new BABYLON.Texture(this._options.groundTexture, this._scene);
  475. diffuseTexture.gammaSpace = false;
  476. diffuseTexture.hasAlpha = true;
  477. this._groundMaterial.diffuseTexture = diffuseTexture;
  478. }
  479. /**
  480. * Setup the ground mirror texture according to the specified options.
  481. */
  482. private _setupGroundMirrorTexture(sceneSize: ISceneSize): void {
  483. let wrapping = BABYLON.Texture.CLAMP_ADDRESSMODE;
  484. if (!this._groundMirror) {
  485. this._groundMirror = new BABYLON.MirrorTexture("BackgroundPlaneMirrorTexture",
  486. { ratio: this._options.groundMirrorSizeRatio },
  487. this._scene,
  488. false,
  489. this._options.groundMirrorTextureType,
  490. BABYLON.Texture.BILINEAR_SAMPLINGMODE,
  491. true);
  492. this._groundMirror.mirrorPlane = new BABYLON.Plane(0, -1, 0, sceneSize.rootPosition.y);
  493. this._groundMirror.anisotropicFilteringLevel = 1;
  494. this._groundMirror.wrapU = wrapping;
  495. this._groundMirror.wrapV = wrapping;
  496. this._groundMirror.gammaSpace = false;
  497. if (this._groundMirror.renderList) {
  498. for (let i = 0; i < this._scene.meshes.length; i++) {
  499. const mesh = this._scene.meshes[i];
  500. if (mesh !== this._ground &&
  501. mesh !== this._skybox &&
  502. mesh !== this._rootMesh) {
  503. this._groundMirror.renderList.push(mesh);
  504. }
  505. }
  506. }
  507. }
  508. this._groundMirror.clearColor = new BABYLON.Color4(
  509. this._options.groundColor.r,
  510. this._options.groundColor.g,
  511. this._options.groundColor.b,
  512. 1);
  513. this._groundMirror.adaptiveBlurKernel = this._options.groundMirrorBlurKernel;
  514. }
  515. /**
  516. * Setup the ground to receive the mirror texture.
  517. */
  518. private _setupMirrorInGroundMaterial(): void {
  519. if (this._groundMaterial) {
  520. this._groundMaterial.reflectionTexture = this._groundMirror;
  521. this._groundMaterial.reflectionFresnel = true;
  522. this._groundMaterial.reflectionAmount = this._options.groundMirrorAmount;
  523. this._groundMaterial.reflectionStandardFresnelWeight = this._options.groundMirrorFresnelWeight;
  524. this._groundMaterial.reflectionFalloffDistance = this._options.groundMirrorFallOffDistance;
  525. }
  526. }
  527. /**
  528. * Setup the skybox according to the specified options.
  529. */
  530. private _setupSkybox(sceneSize: ISceneSize): void {
  531. if (!this._skybox) {
  532. this._skybox = Mesh.CreateBox("BackgroundSkybox", sceneSize.skyboxSize, this._scene, undefined, BABYLON.Mesh.BACKSIDE);
  533. }
  534. this._skybox.parent = this._rootMesh;
  535. }
  536. /**
  537. * Setup the skybox material according to the specified options.
  538. */
  539. private _setupSkyboxMaterial(): void {
  540. if (!this._skybox) {
  541. return;
  542. }
  543. if (!this._skyboxMaterial) {
  544. this._skyboxMaterial = new BackgroundMaterial("BackgroundSkyboxMaterial", this._scene);
  545. }
  546. this._skyboxMaterial.useRGBColor = false;
  547. this._skyboxMaterial.primaryLevel = 1;
  548. this._skyboxMaterial.primaryColor = this._options.skyboxColor;
  549. this._skyboxMaterial.secondaryLevel = 0;
  550. this._skyboxMaterial.tertiaryLevel = 0;
  551. this._skyboxMaterial.enableNoise = true;
  552. this._skybox.material = this._skyboxMaterial;
  553. }
  554. /**
  555. * Setup the skybox reflection texture according to the specified options.
  556. */
  557. private _setupSkyboxReflectionTexture(): void {
  558. if (!this._skyboxMaterial) {
  559. return;
  560. }
  561. if (this._skyboxTexture) {
  562. return;
  563. }
  564. if (this._options.skyboxTexture instanceof BaseTexture) {
  565. this._skyboxMaterial.reflectionTexture = this._skyboxTexture;
  566. return;
  567. }
  568. this._skyboxTexture = new BABYLON.CubeTexture(this._options.skyboxTexture, this._scene);
  569. this._skyboxTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
  570. this._skyboxTexture.gammaSpace = false;
  571. this._skyboxMaterial.reflectionTexture = this._skyboxTexture;
  572. }
  573. /**
  574. * Dispose all the elements created by the Helper.
  575. */
  576. public dispose(): void {
  577. if (this._groundMaterial) {
  578. this._groundMaterial.dispose(true, true);
  579. }
  580. if (this._skyboxMaterial) {
  581. this._skyboxMaterial.dispose(true, true);
  582. }
  583. this._rootMesh.dispose(true);
  584. }
  585. }
  586. }