advancedDynamicTexture.ts 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546
  1. /// <reference path="../../dist/preview release/babylon.d.ts"/>
  2. module BABYLON.GUI {
  3. export interface IFocusableControl {
  4. onFocus(): void;
  5. onBlur(): void;
  6. processKeyboard(evt: KeyboardEvent): void;
  7. }
  8. export class AdvancedDynamicTexture extends DynamicTexture {
  9. private _isDirty = false;
  10. private _renderObserver: Nullable<Observer<Camera>>;
  11. private _resizeObserver: Nullable<Observer<Engine>>;
  12. private _preKeyboardObserver: Nullable<Observer<KeyboardInfoPre>>;
  13. private _pointerMoveObserver: Nullable<Observer<PointerInfoPre>>;
  14. private _pointerObserver: Nullable<Observer<PointerInfo>>;
  15. private _canvasPointerOutObserver: Nullable<Observer<Engine>>;
  16. private _background: string;
  17. public _rootContainer = new Container("root");
  18. public _lastPickedControl: Control;
  19. public _lastControlOver: Nullable<Control>;
  20. public _lastControlDown: Nullable<Control>;
  21. public _capturingControl: Nullable<Control>;
  22. public _shouldBlockPointer: boolean;
  23. public _layerToDispose: Nullable<Layer>;
  24. public _linkedControls = new Array<Control>();
  25. private _isFullscreen = false;
  26. private _fullscreenViewport = new Viewport(0, 0, 1, 1);
  27. private _idealWidth = 0;
  28. private _idealHeight = 0;
  29. private _renderAtIdealSize = false;
  30. private _focusedControl: Nullable<IFocusableControl>;
  31. private _blockNextFocusCheck = false;
  32. private _renderScale = 1;
  33. public get renderScale(): number {
  34. return this._renderScale;
  35. }
  36. public set renderScale(value: number) {
  37. if (value === this._renderScale) {
  38. return;
  39. }
  40. this._renderScale = value;
  41. this._onResize();
  42. }
  43. public get background(): string {
  44. return this._background;
  45. }
  46. public set background(value: string) {
  47. if (this._background === value) {
  48. return;
  49. }
  50. this._background = value;
  51. this.markAsDirty();
  52. }
  53. public get idealWidth(): number {
  54. return this._idealWidth;
  55. }
  56. public set idealWidth(value: number) {
  57. if (this._idealWidth === value) {
  58. return;
  59. }
  60. this._idealWidth = value;
  61. this.markAsDirty();
  62. this._rootContainer._markAllAsDirty();
  63. }
  64. public get idealHeight(): number {
  65. return this._idealHeight;
  66. }
  67. public set idealHeight(value: number) {
  68. if (this._idealHeight === value) {
  69. return;
  70. }
  71. this._idealHeight = value;
  72. this.markAsDirty();
  73. this._rootContainer._markAllAsDirty();
  74. }
  75. public get renderAtIdealSize(): boolean {
  76. return this._renderAtIdealSize;
  77. }
  78. public set renderAtIdealSize(value: boolean) {
  79. if (this._renderAtIdealSize === value) {
  80. return;
  81. }
  82. this._renderAtIdealSize = value;
  83. this._onResize();
  84. }
  85. public get layer(): Nullable<Layer> {
  86. return this._layerToDispose;
  87. }
  88. public get rootContainer(): Container {
  89. return this._rootContainer;
  90. }
  91. public get focusedControl(): Nullable<IFocusableControl> {
  92. return this._focusedControl;
  93. }
  94. public set focusedControl(control: Nullable<IFocusableControl>) {
  95. if (this._focusedControl == control) {
  96. return;
  97. }
  98. if (this._focusedControl) {
  99. this._focusedControl.onBlur();
  100. }
  101. if (control) {
  102. control.onFocus();
  103. }
  104. this._focusedControl = control;
  105. }
  106. public get isForeground(): boolean {
  107. if (!this.layer) {
  108. return true;
  109. }
  110. return (!this.layer.isBackground);
  111. }
  112. public set isForeground(value: boolean) {
  113. if (!this.layer) {
  114. return;
  115. }
  116. if (this.layer.isBackground === !value) {
  117. return;
  118. }
  119. this.layer.isBackground = !value;
  120. }
  121. constructor(name: string, width = 0, height = 0, scene: Nullable<Scene>, generateMipMaps = false, samplingMode = Texture.NEAREST_SAMPLINGMODE) {
  122. super(name, { width: width, height: height }, scene, generateMipMaps, samplingMode, Engine.TEXTUREFORMAT_RGBA);
  123. scene = this.getScene();
  124. if (!scene || !this._texture) {
  125. return;
  126. }
  127. this._renderObserver = scene.onBeforeCameraRenderObservable.add((camera: Camera) => this._checkUpdate(camera));
  128. this._preKeyboardObserver = scene.onPreKeyboardObservable.add(info => {
  129. if (!this._focusedControl) {
  130. return;
  131. }
  132. if (info.type === KeyboardEventTypes.KEYDOWN) {
  133. this._focusedControl.processKeyboard(info.event);
  134. }
  135. info.skipOnPointerObservable = true;
  136. });
  137. this._rootContainer._link(null, this);
  138. this.hasAlpha = true;
  139. if (!width || !height) {
  140. this._resizeObserver = scene.getEngine().onResizeObservable.add(() => this._onResize());
  141. this._onResize();
  142. }
  143. this._texture.isReady = true;
  144. }
  145. public executeOnAllControls(func: (control: Control) => void, container?: Container) {
  146. if (!container) {
  147. container = this._rootContainer;
  148. }
  149. for (var child of container.children) {
  150. if ((<any>child).children) {
  151. this.executeOnAllControls(func, (<Container>child));
  152. continue;
  153. }
  154. func(child);
  155. }
  156. }
  157. public markAsDirty() {
  158. this._isDirty = true;
  159. }
  160. public addControl(control: Control): AdvancedDynamicTexture {
  161. this._rootContainer.addControl(control);
  162. return this;
  163. }
  164. public removeControl(control: Control): AdvancedDynamicTexture {
  165. this._rootContainer.removeControl(control);
  166. return this;
  167. }
  168. public dispose(): void {
  169. let scene = this.getScene();
  170. if (!scene) {
  171. return;
  172. }
  173. scene.onBeforeCameraRenderObservable.remove(this._renderObserver);
  174. if (this._resizeObserver) {
  175. scene.getEngine().onResizeObservable.remove(this._resizeObserver);
  176. }
  177. if (this._pointerMoveObserver) {
  178. scene.onPrePointerObservable.remove(this._pointerMoveObserver);
  179. }
  180. if (this._pointerObserver) {
  181. scene.onPointerObservable.remove(this._pointerObserver);
  182. }
  183. if (this._preKeyboardObserver) {
  184. scene.onPreKeyboardObservable.remove(this._preKeyboardObserver);
  185. }
  186. if (this._canvasPointerOutObserver) {
  187. scene.getEngine().onCanvasPointerOutObservable.remove(this._canvasPointerOutObserver);
  188. }
  189. if (this._layerToDispose) {
  190. this._layerToDispose.texture = null;
  191. this._layerToDispose.dispose();
  192. this._layerToDispose = null;
  193. }
  194. this._rootContainer.dispose();
  195. super.dispose();
  196. }
  197. private _onResize(): void {
  198. let scene = this.getScene();
  199. if (!scene) {
  200. return;
  201. }
  202. // Check size
  203. var engine = scene.getEngine();
  204. var textureSize = this.getSize();
  205. var renderWidth = engine.getRenderWidth() * this._renderScale;
  206. var renderHeight = engine.getRenderHeight() * this._renderScale;
  207. if (this._renderAtIdealSize) {
  208. if (this._idealWidth) {
  209. renderHeight = (renderHeight * this._idealWidth) / renderWidth;
  210. renderWidth = this._idealWidth;
  211. } else if (this._idealHeight) {
  212. renderWidth = (renderWidth * this._idealHeight) / renderHeight;
  213. renderHeight = this._idealHeight;
  214. }
  215. }
  216. if (textureSize.width !== renderWidth || textureSize.height !== renderHeight) {
  217. this.scaleTo(renderWidth, renderHeight);
  218. this.markAsDirty();
  219. if (this._idealWidth || this._idealHeight) {
  220. this._rootContainer._markAllAsDirty();
  221. }
  222. }
  223. }
  224. public _getGlobalViewport(scene: Scene): Viewport {
  225. var engine = scene.getEngine();
  226. return this._fullscreenViewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
  227. }
  228. private _checkUpdate(camera: Camera): void {
  229. if (this._layerToDispose) {
  230. if ((camera.layerMask & this._layerToDispose.layerMask) === 0) {
  231. return;
  232. }
  233. }
  234. if (this._isFullscreen && this._linkedControls.length) {
  235. var scene = this.getScene();
  236. if (!scene) {
  237. return;
  238. }
  239. var globalViewport = this._getGlobalViewport(scene);
  240. for (var control of this._linkedControls) {
  241. if (!control.isVisible) {
  242. continue;
  243. }
  244. var mesh = control._linkedMesh;
  245. if (!mesh || mesh.isDisposed()) {
  246. Tools.SetImmediate(() => {
  247. control.linkWithMesh(null);
  248. });
  249. continue;
  250. }
  251. var position = mesh.getBoundingInfo().boundingSphere.center;
  252. var projectedPosition = Vector3.Project(position, mesh.getWorldMatrix(), scene.getTransformMatrix(), globalViewport);
  253. if (projectedPosition.z < 0 || projectedPosition.z > 1) {
  254. control.notRenderable = true;
  255. continue;
  256. }
  257. control.notRenderable = false;
  258. control._moveToProjectedPosition(projectedPosition);
  259. }
  260. }
  261. if (!this._isDirty && !this._rootContainer.isDirty) {
  262. return;
  263. }
  264. this._isDirty = false;
  265. this._render();
  266. this.update();
  267. }
  268. private _render(): void {
  269. var textureSize = this.getSize();
  270. var renderWidth = textureSize.width;
  271. var renderHeight = textureSize.height;
  272. // Clear
  273. var context = this.getContext();
  274. context.clearRect(0, 0, renderWidth, renderHeight);
  275. if (this._background) {
  276. context.save();
  277. context.fillStyle = this._background;
  278. context.fillRect(0, 0, renderWidth, renderHeight);
  279. context.restore();
  280. }
  281. // Render
  282. context.font = "18px Arial";
  283. context.strokeStyle = "white";
  284. var measure = new Measure(0, 0, renderWidth, renderHeight);
  285. this._rootContainer._draw(measure, context);
  286. }
  287. private _doPicking(x: number, y: number, type: number, buttonIndex: number): void {
  288. var scene = this.getScene();
  289. if (!scene) {
  290. return;
  291. }
  292. var engine = scene.getEngine();
  293. var textureSize = this.getSize();
  294. if (this._isFullscreen) {
  295. x = x * ((textureSize.width / this._renderScale) / engine.getRenderWidth());
  296. y = y * ((textureSize.height / this._renderScale) / engine.getRenderHeight());
  297. }
  298. if (this._capturingControl) {
  299. this._capturingControl._processObservables(type, x, y, buttonIndex);
  300. return;
  301. }
  302. if (!this._rootContainer._processPicking(x, y, type, buttonIndex)) {
  303. if (type === BABYLON.PointerEventTypes.POINTERMOVE) {
  304. if (this._lastControlOver) {
  305. this._lastControlOver._onPointerOut(this._lastControlOver);
  306. }
  307. this._lastControlOver = null;
  308. }
  309. }
  310. this._manageFocus();
  311. }
  312. public attach(): void {
  313. var scene = this.getScene();
  314. if (!scene) {
  315. return;
  316. }
  317. this._pointerMoveObserver = scene.onPrePointerObservable.add((pi, state) => {
  318. if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE
  319. && pi.type !== BABYLON.PointerEventTypes.POINTERUP
  320. && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
  321. return;
  322. }
  323. if (!scene) {
  324. return;
  325. }
  326. let camera = scene.cameraToUseForPointers || scene.activeCamera;
  327. if (!camera) {
  328. return;
  329. }
  330. let engine = scene.getEngine();
  331. let viewport = camera.viewport;
  332. let x = (scene.pointerX / engine.getHardwareScalingLevel() - viewport.x * engine.getRenderWidth()) / viewport.width;
  333. let y = (scene.pointerY / engine.getHardwareScalingLevel() - viewport.y * engine.getRenderHeight()) / viewport.height;
  334. this._shouldBlockPointer = false;
  335. this._doPicking(x, y, pi.type, pi.event.button);
  336. pi.skipOnPointerObservable = this._shouldBlockPointer;
  337. });
  338. this._attachToOnPointerOut(scene);
  339. }
  340. public attachToMesh(mesh: AbstractMesh, supportPointerMove = true): void {
  341. var scene = this.getScene();
  342. if (!scene) {
  343. return;
  344. }
  345. this._pointerObserver = scene.onPointerObservable.add((pi, state) => {
  346. if (pi.type !== BABYLON.PointerEventTypes.POINTERMOVE
  347. && pi.type !== BABYLON.PointerEventTypes.POINTERUP
  348. && pi.type !== BABYLON.PointerEventTypes.POINTERDOWN) {
  349. return;
  350. }
  351. if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
  352. var uv = pi.pickInfo.getTextureCoordinates();
  353. if (uv) {
  354. let size = this.getSize();
  355. this._doPicking(uv.x * size.width, (1.0 - uv.y) * size.height, pi.type, pi.event.button);
  356. }
  357. } else if (pi.type === BABYLON.PointerEventTypes.POINTERUP) {
  358. if (this._lastControlDown) {
  359. this._lastControlDown.forcePointerUp();
  360. }
  361. this._lastControlDown = null;
  362. this.focusedControl = null;
  363. } else if (pi.type === BABYLON.PointerEventTypes.POINTERMOVE) {
  364. if (this._lastControlOver) {
  365. this._lastControlOver._onPointerOut(this._lastControlOver);
  366. }
  367. this._lastControlOver = null;
  368. }
  369. });
  370. mesh.enablePointerMoveEvents = supportPointerMove;
  371. this._attachToOnPointerOut(scene);
  372. }
  373. public moveFocusToControl(control: IFocusableControl): void {
  374. this.focusedControl = control;
  375. this._lastPickedControl = <any>control;
  376. this._blockNextFocusCheck = true;
  377. }
  378. private _manageFocus(): void {
  379. if (this._blockNextFocusCheck) {
  380. this._blockNextFocusCheck = false;
  381. this._lastPickedControl = <any>this._focusedControl;
  382. return;
  383. }
  384. // Focus management
  385. if (this._focusedControl) {
  386. if (this._focusedControl !== (<any>this._lastPickedControl)) {
  387. if (this._lastPickedControl.isFocusInvisible) {
  388. return;
  389. }
  390. this.focusedControl = null;
  391. }
  392. }
  393. }
  394. private _attachToOnPointerOut(scene: Scene): void {
  395. this._canvasPointerOutObserver = scene.getEngine().onCanvasPointerOutObservable.add(() => {
  396. if (this._lastControlOver) {
  397. this._lastControlOver._onPointerOut(this._lastControlOver);
  398. }
  399. this._lastControlOver = null;
  400. if (this._lastControlDown) {
  401. this._lastControlDown.forcePointerUp();
  402. }
  403. this._lastControlDown = null;
  404. });
  405. }
  406. // Statics
  407. public static CreateForMesh(mesh: AbstractMesh, width = 1024, height = 1024, supportPointerMove = true): AdvancedDynamicTexture {
  408. var result = new AdvancedDynamicTexture(mesh.name + " AdvancedDynamicTexture", width, height, mesh.getScene(), true, Texture.TRILINEAR_SAMPLINGMODE);
  409. var material = new BABYLON.StandardMaterial("AdvancedDynamicTextureMaterial", mesh.getScene());
  410. material.backFaceCulling = false;
  411. material.diffuseColor = BABYLON.Color3.Black();
  412. material.specularColor = BABYLON.Color3.Black();
  413. material.emissiveTexture = result;
  414. material.opacityTexture = result;
  415. mesh.material = material;
  416. result.attachToMesh(mesh, supportPointerMove);
  417. return result;
  418. }
  419. public static CreateFullscreenUI(name: string, foreground: boolean = true, scene: Nullable<Scene> = null, sampling = Texture.BILINEAR_SAMPLINGMODE): AdvancedDynamicTexture {
  420. var result = new AdvancedDynamicTexture(name, 0, 0, scene, false, sampling);
  421. // Display
  422. var layer = new BABYLON.Layer(name + "_layer", null, scene, !foreground);
  423. layer.texture = result;
  424. result._layerToDispose = layer;
  425. result._isFullscreen = true;
  426. // Attach
  427. result.attach();
  428. return result;
  429. }
  430. }
  431. }