environmentHelper.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444
  1. import { Observable } from "../Misc/observable.js";
  2. import { ArcRotateCamera } from "../Cameras/arcRotateCamera.js";
  3. import { Vector3 } from "../Maths/math.vector.js";
  4. import { Color3, Color4 } from "../Maths/math.color.js";
  5. import { Mesh } from "../Meshes/mesh.js";
  6. import { BaseTexture } from "../Materials/Textures/baseTexture.js";
  7. import { Texture } from "../Materials/Textures/texture.js";
  8. import { MirrorTexture } from "../Materials/Textures/mirrorTexture.js";
  9. import { CubeTexture } from "../Materials/Textures/cubeTexture.js";
  10. import { BackgroundMaterial } from "../Materials/Background/backgroundMaterial.js";
  11. import { CreatePlane } from "../Meshes/Builders/planeBuilder.js";
  12. import { CreateBox } from "../Meshes/Builders/boxBuilder.js";
  13. import { Plane } from "../Maths/math.plane.js";
  14. /**
  15. * The EnvironmentHelper class can be used to add a fully featured non-expensive background to your scene.
  16. * It includes by default a skybox and a ground relying on the BackgroundMaterial.
  17. * It also helps with the default setup of your ImageProcessingConfiguration.
  18. */
  19. export class EnvironmentHelper {
  20. /**
  21. * Creates the default options for the helper.
  22. * @param scene The scene the environment helper belongs to.
  23. * @returns default options for the helper.
  24. */
  25. static _GetDefaultOptions(scene) {
  26. return {
  27. createGround: true,
  28. groundSize: 15,
  29. groundTexture: this._GroundTextureCDNUrl,
  30. groundColor: new Color3(0.2, 0.2, 0.3).toLinearSpace(scene.getEngine().useExactSrgbConversions).scale(3),
  31. groundOpacity: 0.9,
  32. enableGroundShadow: true,
  33. groundShadowLevel: 0.5,
  34. enableGroundMirror: false,
  35. groundMirrorSizeRatio: 0.3,
  36. groundMirrorBlurKernel: 64,
  37. groundMirrorAmount: 1,
  38. groundMirrorFresnelWeight: 1,
  39. groundMirrorFallOffDistance: 0,
  40. groundMirrorTextureType: 0,
  41. groundYBias: 0.00001,
  42. createSkybox: true,
  43. skyboxSize: 20,
  44. skyboxTexture: this._SkyboxTextureCDNUrl,
  45. skyboxColor: new Color3(0.2, 0.2, 0.3).toLinearSpace(scene.getEngine().useExactSrgbConversions).scale(3),
  46. backgroundYRotation: 0,
  47. sizeAuto: true,
  48. rootPosition: Vector3.Zero(),
  49. setupImageProcessing: true,
  50. environmentTexture: this._EnvironmentTextureCDNUrl,
  51. cameraExposure: 0.8,
  52. cameraContrast: 1.2,
  53. toneMappingEnabled: true,
  54. };
  55. }
  56. /**
  57. * Gets the root mesh created by the helper.
  58. */
  59. get rootMesh() {
  60. return this._rootMesh;
  61. }
  62. /**
  63. * Gets the skybox created by the helper.
  64. */
  65. get skybox() {
  66. return this._skybox;
  67. }
  68. /**
  69. * Gets the skybox texture created by the helper.
  70. */
  71. get skyboxTexture() {
  72. return this._skyboxTexture;
  73. }
  74. /**
  75. * Gets the skybox material created by the helper.
  76. */
  77. get skyboxMaterial() {
  78. return this._skyboxMaterial;
  79. }
  80. /**
  81. * Gets the ground mesh created by the helper.
  82. */
  83. get ground() {
  84. return this._ground;
  85. }
  86. /**
  87. * Gets the ground texture created by the helper.
  88. */
  89. get groundTexture() {
  90. return this._groundTexture;
  91. }
  92. /**
  93. * Gets the ground mirror created by the helper.
  94. */
  95. get groundMirror() {
  96. return this._groundMirror;
  97. }
  98. /**
  99. * Gets the ground mirror render list to helps pushing the meshes
  100. * you wish in the ground reflection.
  101. */
  102. get groundMirrorRenderList() {
  103. if (this._groundMirror) {
  104. return this._groundMirror.renderList;
  105. }
  106. return null;
  107. }
  108. /**
  109. * Gets the ground material created by the helper.
  110. */
  111. get groundMaterial() {
  112. return this._groundMaterial;
  113. }
  114. /**
  115. * constructor
  116. * @param options Defines the options we want to customize the helper
  117. * @param scene The scene to add the material to
  118. */
  119. constructor(options, scene) {
  120. this._errorHandler = (message, exception) => {
  121. this.onErrorObservable.notifyObservers({ message: message, exception: exception });
  122. };
  123. this._options = {
  124. ...EnvironmentHelper._GetDefaultOptions(scene),
  125. ...options,
  126. };
  127. this._scene = scene;
  128. this.onErrorObservable = new Observable();
  129. this._setupBackground();
  130. this._setupImageProcessing();
  131. }
  132. /**
  133. * Updates the environment according to the new options
  134. * @param options options to configure the helper (IEnvironmentHelperOptions)
  135. */
  136. updateOptions(options) {
  137. const newOptions = {
  138. ...this._options,
  139. ...options,
  140. };
  141. if (this._ground && !newOptions.createGround) {
  142. this._ground.dispose();
  143. this._ground = null;
  144. }
  145. if (this._groundMaterial && !newOptions.createGround) {
  146. this._groundMaterial.dispose();
  147. this._groundMaterial = null;
  148. }
  149. if (this._groundTexture) {
  150. if (this._options.groundTexture != newOptions.groundTexture) {
  151. this._groundTexture.dispose();
  152. this._groundTexture = null;
  153. }
  154. }
  155. if (this._skybox && !newOptions.createSkybox) {
  156. this._skybox.dispose();
  157. this._skybox = null;
  158. }
  159. if (this._skyboxMaterial && !newOptions.createSkybox) {
  160. this._skyboxMaterial.dispose();
  161. this._skyboxMaterial = null;
  162. }
  163. if (this._skyboxTexture) {
  164. if (this._options.skyboxTexture != newOptions.skyboxTexture) {
  165. this._skyboxTexture.dispose();
  166. this._skyboxTexture = null;
  167. }
  168. }
  169. if (this._groundMirror && !newOptions.enableGroundMirror) {
  170. this._groundMirror.dispose();
  171. this._groundMirror = null;
  172. }
  173. if (this._scene.environmentTexture) {
  174. if (this._options.environmentTexture != newOptions.environmentTexture) {
  175. this._scene.environmentTexture.dispose();
  176. }
  177. }
  178. this._options = newOptions;
  179. this._setupBackground();
  180. this._setupImageProcessing();
  181. }
  182. /**
  183. * Sets the primary color of all the available elements.
  184. * @param color the main color to affect to the ground and the background
  185. */
  186. setMainColor(color) {
  187. if (this.groundMaterial) {
  188. this.groundMaterial.primaryColor = color;
  189. }
  190. if (this.skyboxMaterial) {
  191. this.skyboxMaterial.primaryColor = color;
  192. }
  193. if (this.groundMirror) {
  194. this.groundMirror.clearColor = new Color4(color.r, color.g, color.b, 1.0);
  195. }
  196. }
  197. /**
  198. * Setup the image processing according to the specified options.
  199. */
  200. _setupImageProcessing() {
  201. if (this._options.setupImageProcessing) {
  202. this._scene.imageProcessingConfiguration.contrast = this._options.cameraContrast;
  203. this._scene.imageProcessingConfiguration.exposure = this._options.cameraExposure;
  204. this._scene.imageProcessingConfiguration.toneMappingEnabled = this._options.toneMappingEnabled;
  205. this._setupEnvironmentTexture();
  206. }
  207. }
  208. /**
  209. * Setup the environment texture according to the specified options.
  210. */
  211. _setupEnvironmentTexture() {
  212. if (this._scene.environmentTexture) {
  213. return;
  214. }
  215. if (this._options.environmentTexture instanceof BaseTexture) {
  216. this._scene.environmentTexture = this._options.environmentTexture;
  217. return;
  218. }
  219. const environmentTexture = CubeTexture.CreateFromPrefilteredData(this._options.environmentTexture, this._scene);
  220. this._scene.environmentTexture = environmentTexture;
  221. }
  222. /**
  223. * Setup the background according to the specified options.
  224. */
  225. _setupBackground() {
  226. if (!this._rootMesh) {
  227. this._rootMesh = new Mesh("BackgroundHelper", this._scene);
  228. }
  229. this._rootMesh.rotation.y = this._options.backgroundYRotation;
  230. const sceneSize = this._getSceneSize();
  231. if (this._options.createGround) {
  232. this._setupGround(sceneSize);
  233. this._setupGroundMaterial();
  234. this._setupGroundDiffuseTexture();
  235. if (this._options.enableGroundMirror) {
  236. this._setupGroundMirrorTexture(sceneSize);
  237. }
  238. this._setupMirrorInGroundMaterial();
  239. }
  240. if (this._options.createSkybox) {
  241. this._setupSkybox(sceneSize);
  242. this._setupSkyboxMaterial();
  243. this._setupSkyboxReflectionTexture();
  244. }
  245. this._rootMesh.position.x = sceneSize.rootPosition.x;
  246. this._rootMesh.position.z = sceneSize.rootPosition.z;
  247. this._rootMesh.position.y = sceneSize.rootPosition.y;
  248. }
  249. /**
  250. * Get the scene sizes according to the setup.
  251. * @returns the different ground and skybox sizes.
  252. */
  253. _getSceneSize() {
  254. let groundSize = this._options.groundSize;
  255. let skyboxSize = this._options.skyboxSize;
  256. let rootPosition = this._options.rootPosition;
  257. if (!this._scene.meshes || this._scene.meshes.length === 1) {
  258. // 1 only means the root of the helper.
  259. return { groundSize, skyboxSize, rootPosition };
  260. }
  261. const sceneExtends = this._scene.getWorldExtends((mesh) => {
  262. return mesh !== this._ground && mesh !== this._rootMesh && mesh !== this._skybox;
  263. });
  264. const sceneDiagonal = sceneExtends.max.subtract(sceneExtends.min);
  265. if (this._options.sizeAuto) {
  266. if (this._scene.activeCamera instanceof ArcRotateCamera && this._scene.activeCamera.upperRadiusLimit) {
  267. groundSize = this._scene.activeCamera.upperRadiusLimit * 2;
  268. skyboxSize = groundSize;
  269. }
  270. const sceneDiagonalLenght = sceneDiagonal.length();
  271. if (sceneDiagonalLenght > groundSize) {
  272. groundSize = sceneDiagonalLenght * 2;
  273. skyboxSize = groundSize;
  274. }
  275. // 10 % bigger.
  276. groundSize *= 1.1;
  277. skyboxSize *= 1.5;
  278. rootPosition = sceneExtends.min.add(sceneDiagonal.scale(0.5));
  279. rootPosition.y = sceneExtends.min.y - this._options.groundYBias;
  280. }
  281. return { groundSize, skyboxSize, rootPosition };
  282. }
  283. /**
  284. * Setup the ground according to the specified options.
  285. * @param sceneSize
  286. */
  287. _setupGround(sceneSize) {
  288. if (!this._ground || this._ground.isDisposed()) {
  289. this._ground = CreatePlane("BackgroundPlane", { size: sceneSize.groundSize }, this._scene);
  290. this._ground.rotation.x = Math.PI / 2; // Face up by default.
  291. this._ground.parent = this._rootMesh;
  292. this._ground.onDisposeObservable.add(() => {
  293. this._ground = null;
  294. });
  295. }
  296. this._ground.receiveShadows = this._options.enableGroundShadow;
  297. }
  298. /**
  299. * Setup the ground material according to the specified options.
  300. */
  301. _setupGroundMaterial() {
  302. if (!this._groundMaterial) {
  303. this._groundMaterial = new BackgroundMaterial("BackgroundPlaneMaterial", this._scene);
  304. }
  305. this._groundMaterial.alpha = this._options.groundOpacity;
  306. this._groundMaterial.alphaMode = 8;
  307. this._groundMaterial.shadowLevel = this._options.groundShadowLevel;
  308. this._groundMaterial.primaryColor = this._options.groundColor;
  309. this._groundMaterial.useRGBColor = false;
  310. this._groundMaterial.enableNoise = true;
  311. if (this._ground) {
  312. this._ground.material = this._groundMaterial;
  313. }
  314. }
  315. /**
  316. * Setup the ground diffuse texture according to the specified options.
  317. */
  318. _setupGroundDiffuseTexture() {
  319. if (!this._groundMaterial) {
  320. return;
  321. }
  322. if (this._groundTexture) {
  323. return;
  324. }
  325. if (this._options.groundTexture instanceof BaseTexture) {
  326. this._groundMaterial.diffuseTexture = this._options.groundTexture;
  327. return;
  328. }
  329. this._groundTexture = new Texture(this._options.groundTexture, this._scene, undefined, undefined, undefined, undefined, this._errorHandler);
  330. this._groundTexture.gammaSpace = false;
  331. this._groundTexture.hasAlpha = true;
  332. this._groundMaterial.diffuseTexture = this._groundTexture;
  333. }
  334. /**
  335. * Setup the ground mirror texture according to the specified options.
  336. * @param sceneSize
  337. */
  338. _setupGroundMirrorTexture(sceneSize) {
  339. const wrapping = Texture.CLAMP_ADDRESSMODE;
  340. if (!this._groundMirror) {
  341. this._groundMirror = new MirrorTexture("BackgroundPlaneMirrorTexture", { ratio: this._options.groundMirrorSizeRatio }, this._scene, false, this._options.groundMirrorTextureType, Texture.BILINEAR_SAMPLINGMODE, true);
  342. this._groundMirror.mirrorPlane = new Plane(0, -1, 0, sceneSize.rootPosition.y);
  343. this._groundMirror.anisotropicFilteringLevel = 1;
  344. this._groundMirror.wrapU = wrapping;
  345. this._groundMirror.wrapV = wrapping;
  346. if (this._groundMirror.renderList) {
  347. for (let i = 0; i < this._scene.meshes.length; i++) {
  348. const mesh = this._scene.meshes[i];
  349. if (mesh !== this._ground && mesh !== this._skybox && mesh !== this._rootMesh) {
  350. this._groundMirror.renderList.push(mesh);
  351. }
  352. }
  353. }
  354. }
  355. const gammaGround = this._options.groundColor.toGammaSpace(this._scene.getEngine().useExactSrgbConversions);
  356. this._groundMirror.clearColor = new Color4(gammaGround.r, gammaGround.g, gammaGround.b, 1);
  357. this._groundMirror.adaptiveBlurKernel = this._options.groundMirrorBlurKernel;
  358. }
  359. /**
  360. * Setup the ground to receive the mirror texture.
  361. */
  362. _setupMirrorInGroundMaterial() {
  363. if (this._groundMaterial) {
  364. this._groundMaterial.reflectionTexture = this._groundMirror;
  365. this._groundMaterial.reflectionFresnel = true;
  366. this._groundMaterial.reflectionAmount = this._options.groundMirrorAmount;
  367. this._groundMaterial.reflectionStandardFresnelWeight = this._options.groundMirrorFresnelWeight;
  368. this._groundMaterial.reflectionFalloffDistance = this._options.groundMirrorFallOffDistance;
  369. }
  370. }
  371. /**
  372. * Setup the skybox according to the specified options.
  373. * @param sceneSize
  374. */
  375. _setupSkybox(sceneSize) {
  376. if (!this._skybox || this._skybox.isDisposed()) {
  377. this._skybox = CreateBox("BackgroundSkybox", { size: sceneSize.skyboxSize, sideOrientation: Mesh.BACKSIDE }, this._scene);
  378. this._skybox.onDisposeObservable.add(() => {
  379. this._skybox = null;
  380. });
  381. }
  382. this._skybox.parent = this._rootMesh;
  383. }
  384. /**
  385. * Setup the skybox material according to the specified options.
  386. */
  387. _setupSkyboxMaterial() {
  388. if (!this._skybox) {
  389. return;
  390. }
  391. if (!this._skyboxMaterial) {
  392. this._skyboxMaterial = new BackgroundMaterial("BackgroundSkyboxMaterial", this._scene);
  393. }
  394. this._skyboxMaterial.useRGBColor = false;
  395. this._skyboxMaterial.primaryColor = this._options.skyboxColor;
  396. this._skyboxMaterial.enableNoise = true;
  397. this._skybox.material = this._skyboxMaterial;
  398. }
  399. /**
  400. * Setup the skybox reflection texture according to the specified options.
  401. */
  402. _setupSkyboxReflectionTexture() {
  403. if (!this._skyboxMaterial) {
  404. return;
  405. }
  406. if (this._skyboxTexture) {
  407. return;
  408. }
  409. if (this._options.skyboxTexture instanceof BaseTexture) {
  410. this._skyboxMaterial.reflectionTexture = this._options.skyboxTexture;
  411. return;
  412. }
  413. this._skyboxTexture = new CubeTexture(this._options.skyboxTexture, this._scene, undefined, undefined, undefined, undefined, this._errorHandler);
  414. this._skyboxTexture.coordinatesMode = Texture.SKYBOX_MODE;
  415. this._skyboxTexture.gammaSpace = false;
  416. this._skyboxMaterial.reflectionTexture = this._skyboxTexture;
  417. }
  418. /**
  419. * Dispose all the elements created by the Helper.
  420. */
  421. dispose() {
  422. if (this._groundMaterial) {
  423. this._groundMaterial.dispose(true, true);
  424. }
  425. if (this._skyboxMaterial) {
  426. this._skyboxMaterial.dispose(true, true);
  427. }
  428. this._rootMesh.dispose(false);
  429. }
  430. }
  431. /**
  432. * Default ground texture URL.
  433. */
  434. EnvironmentHelper._GroundTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundGround.png";
  435. /**
  436. * Default skybox texture URL.
  437. */
  438. EnvironmentHelper._SkyboxTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundSkybox.dds";
  439. /**
  440. * Default environment texture URL.
  441. */
  442. EnvironmentHelper._EnvironmentTextureCDNUrl = "https://assets.babylonjs.com/environments/environmentSpecular.env";
  443. //# sourceMappingURL=environmentHelper.js.map