babylon.spriteManager.ts 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. module BABYLON {
  2. /**
  3. * Defines the minimum interface to fullfil in order to be a sprite manager.
  4. */
  5. export interface ISpriteManager extends IDisposable {
  6. /**
  7. * Restricts the camera to viewing objects with the same layerMask.
  8. * A camera with a layerMask of 1 will render spriteManager.layerMask & camera.layerMask!== 0
  9. */
  10. layerMask: number;
  11. /**
  12. * Gets or sets a boolean indicating if the mesh can be picked (by scene.pick for instance or through actions). Default is true
  13. */
  14. isPickable: boolean;
  15. /**
  16. * Specifies the rendering group id for this mesh (0 by default)
  17. * @see http://doc.babylonjs.com/resources/transparency_and_how_meshes_are_rendered#rendering-groups
  18. */
  19. renderingGroupId: number;
  20. /**
  21. * Defines the list of sprites managed by the manager.
  22. */
  23. sprites: Array<Sprite>;
  24. /**
  25. * Tests the intersection of a sprite with a specific ray.
  26. * @param ray The ray we are sending to test the collision
  27. * @param camera The camera space we are sending rays in
  28. * @param predicate A predicate allowing excluding sprites from the list of object to test
  29. * @param fastCheck Is the hit test done in a OOBB or AOBB fashion the faster, the less precise
  30. * @returns picking info or null.
  31. */
  32. intersects(ray: Ray, camera: Camera, predicate?: (sprite: Sprite) => boolean, fastCheck?: boolean): Nullable<PickingInfo>;
  33. /**
  34. * Renders the list of sprites on screen.
  35. */
  36. render(): void;
  37. }
  38. /**
  39. * Class used to manage multiple sprites on the same spritesheet
  40. * @see http://doc.babylonjs.com/babylon101/sprites
  41. */
  42. export class SpriteManager implements ISpriteManager {
  43. /** Gets the list of sprites */
  44. public sprites = new Array<Sprite>();
  45. /** Gets or sets the rendering group id (0 by default) */
  46. public renderingGroupId = 0;
  47. /** Gets or sets camera layer mask */
  48. public layerMask: number = 0x0FFFFFFF;
  49. /** Gets or sets a boolean indicating if the manager must consider scene fog when rendering */
  50. public fogEnabled = true;
  51. /** Gets or sets a boolean indicating if the sprites are pickable */
  52. public isPickable = false;
  53. /** Defines the default width of a cell in the spritesheet */
  54. public cellWidth: number;
  55. /** Defines the default height of a cell in the spritesheet */
  56. public cellHeight: number;
  57. /**
  58. * An event triggered when the manager is disposed.
  59. */
  60. public onDisposeObservable = new Observable<SpriteManager>();
  61. private _onDisposeObserver: Nullable<Observer<SpriteManager>>;
  62. /**
  63. * Callback called when the manager is disposed
  64. */
  65. public set onDispose(callback: () => void) {
  66. if (this._onDisposeObserver) {
  67. this.onDisposeObservable.remove(this._onDisposeObserver);
  68. }
  69. this._onDisposeObserver = this.onDisposeObservable.add(callback);
  70. }
  71. private _capacity: number;
  72. private _spriteTexture: Texture;
  73. private _epsilon: number;
  74. private _scene: Scene;
  75. private _vertexData: Float32Array;
  76. private _buffer: Buffer;
  77. private _vertexBuffers: { [key: string]: VertexBuffer } = {};
  78. private _indexBuffer: WebGLBuffer;
  79. private _effectBase: Effect;
  80. private _effectFog: Effect;
  81. /**
  82. * Gets or sets the spritesheet texture
  83. */
  84. public get texture(): Texture {
  85. return this._spriteTexture;
  86. }
  87. public set texture(value: Texture) {
  88. this._spriteTexture = value;
  89. }
  90. /**
  91. * Creates a new sprite manager
  92. * @param name defines the manager's name
  93. * @param imgUrl defines the sprite sheet url
  94. * @param capacity defines the maximum allowed number of sprites
  95. * @param cellSize defines the size of a sprite cell
  96. * @param scene defines the hosting scene
  97. * @param epsilon defines the epsilon value to align texture (0.01 by default)
  98. * @param samplingMode defines the smapling mode to use with spritesheet
  99. */
  100. constructor(
  101. /** defines the manager's name */
  102. public name: string,
  103. imgUrl: string, capacity: number, cellSize: any, scene: Scene, epsilon: number = 0.01, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
  104. if (!scene._getComponent(SceneComponentConstants.NAME_SPRITE)) {
  105. scene._addComponent(new SpriteSceneComponent(scene));
  106. }
  107. this._capacity = capacity;
  108. this._spriteTexture = new Texture(imgUrl, scene, true, false, samplingMode);
  109. this._spriteTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
  110. this._spriteTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
  111. if (cellSize.width && cellSize.height) {
  112. this.cellWidth = cellSize.width;
  113. this.cellHeight = cellSize.height;
  114. } else if (cellSize !== undefined) {
  115. this.cellWidth = cellSize;
  116. this.cellHeight = cellSize;
  117. } else {
  118. return;
  119. }
  120. this._epsilon = epsilon;
  121. this._scene = scene;
  122. this._scene.spriteManagers.push(this);
  123. var indices = [];
  124. var index = 0;
  125. for (var count = 0; count < capacity; count++) {
  126. indices.push(index);
  127. indices.push(index + 1);
  128. indices.push(index + 2);
  129. indices.push(index);
  130. indices.push(index + 2);
  131. indices.push(index + 3);
  132. index += 4;
  133. }
  134. this._indexBuffer = scene.getEngine().createIndexBuffer(indices);
  135. // VBO
  136. // 16 floats per sprite (x, y, z, angle, sizeX, sizeY, offsetX, offsetY, invertU, invertV, cellIndexX, cellIndexY, color r, color g, color b, color a)
  137. this._vertexData = new Float32Array(capacity * 16 * 4);
  138. this._buffer = new Buffer(scene.getEngine(), this._vertexData, true, 16);
  139. var positions = this._buffer.createVertexBuffer(VertexBuffer.PositionKind, 0, 4);
  140. var options = this._buffer.createVertexBuffer("options", 4, 4);
  141. var cellInfo = this._buffer.createVertexBuffer("cellInfo", 8, 4);
  142. var colors = this._buffer.createVertexBuffer(VertexBuffer.ColorKind, 12, 4);
  143. this._vertexBuffers[VertexBuffer.PositionKind] = positions;
  144. this._vertexBuffers["options"] = options;
  145. this._vertexBuffers["cellInfo"] = cellInfo;
  146. this._vertexBuffers[VertexBuffer.ColorKind] = colors;
  147. // Effects
  148. this._effectBase = this._scene.getEngine().createEffect("sprites",
  149. [VertexBuffer.PositionKind, "options", "cellInfo", VertexBuffer.ColorKind],
  150. ["view", "projection", "textureInfos", "alphaTest"],
  151. ["diffuseSampler"], "");
  152. this._effectFog = this._scene.getEngine().createEffect("sprites",
  153. [VertexBuffer.PositionKind, "options", "cellInfo", VertexBuffer.ColorKind],
  154. ["view", "projection", "textureInfos", "alphaTest", "vFogInfos", "vFogColor"],
  155. ["diffuseSampler"], "#define FOG");
  156. }
  157. private _appendSpriteVertex(index: number, sprite: Sprite, offsetX: number, offsetY: number, rowSize: number): void {
  158. var arrayOffset = index * 16;
  159. if (offsetX === 0) {
  160. offsetX = this._epsilon;
  161. }
  162. else if (offsetX === 1) {
  163. offsetX = 1 - this._epsilon;
  164. }
  165. if (offsetY === 0) {
  166. offsetY = this._epsilon;
  167. }
  168. else if (offsetY === 1) {
  169. offsetY = 1 - this._epsilon;
  170. }
  171. this._vertexData[arrayOffset] = sprite.position.x;
  172. this._vertexData[arrayOffset + 1] = sprite.position.y;
  173. this._vertexData[arrayOffset + 2] = sprite.position.z;
  174. this._vertexData[arrayOffset + 3] = sprite.angle;
  175. this._vertexData[arrayOffset + 4] = sprite.width;
  176. this._vertexData[arrayOffset + 5] = sprite.height;
  177. this._vertexData[arrayOffset + 6] = offsetX;
  178. this._vertexData[arrayOffset + 7] = offsetY;
  179. this._vertexData[arrayOffset + 8] = sprite.invertU ? 1 : 0;
  180. this._vertexData[arrayOffset + 9] = sprite.invertV ? 1 : 0;
  181. var offset = (sprite.cellIndex / rowSize) >> 0;
  182. this._vertexData[arrayOffset + 10] = sprite.cellIndex - offset * rowSize;
  183. this._vertexData[arrayOffset + 11] = offset;
  184. // Color
  185. this._vertexData[arrayOffset + 12] = sprite.color.r;
  186. this._vertexData[arrayOffset + 13] = sprite.color.g;
  187. this._vertexData[arrayOffset + 14] = sprite.color.b;
  188. this._vertexData[arrayOffset + 15] = sprite.color.a;
  189. }
  190. /**
  191. * Intersects the sprites with a ray
  192. * @param ray defines the ray to intersect with
  193. * @param camera defines the current active camera
  194. * @param predicate defines a predicate used to select candidate sprites
  195. * @param fastCheck defines if a fast check only must be done (the first potential sprite is will be used and not the closer)
  196. * @returns null if no hit or a PickingInfo
  197. */
  198. public intersects(ray: Ray, camera: Camera, predicate?: (sprite: Sprite) => boolean, fastCheck?: boolean): Nullable<PickingInfo> {
  199. var count = Math.min(this._capacity, this.sprites.length);
  200. var min = Vector3.Zero();
  201. var max = Vector3.Zero();
  202. var distance = Number.MAX_VALUE;
  203. var currentSprite: Nullable<Sprite> = null;
  204. var cameraSpacePosition = Vector3.Zero();
  205. var cameraView = camera.getViewMatrix();
  206. for (var index = 0; index < count; index++) {
  207. var sprite = this.sprites[index];
  208. if (!sprite) {
  209. continue;
  210. }
  211. if (predicate) {
  212. if (!predicate(sprite)) {
  213. continue;
  214. }
  215. } else if (!sprite.isPickable) {
  216. continue;
  217. }
  218. Vector3.TransformCoordinatesToRef(sprite.position, cameraView, cameraSpacePosition);
  219. min.copyFromFloats(cameraSpacePosition.x - sprite.width / 2, cameraSpacePosition.y - sprite.height / 2, cameraSpacePosition.z);
  220. max.copyFromFloats(cameraSpacePosition.x + sprite.width / 2, cameraSpacePosition.y + sprite.height / 2, cameraSpacePosition.z);
  221. if (ray.intersectsBoxMinMax(min, max)) {
  222. var currentDistance = Vector3.Distance(cameraSpacePosition, ray.origin);
  223. if (distance > currentDistance) {
  224. distance = currentDistance;
  225. currentSprite = sprite;
  226. if (fastCheck) {
  227. break;
  228. }
  229. }
  230. }
  231. }
  232. if (currentSprite) {
  233. var result = new PickingInfo();
  234. result.hit = true;
  235. result.pickedSprite = currentSprite;
  236. result.distance = distance;
  237. return result;
  238. }
  239. return null;
  240. }
  241. /**
  242. * Render all child sprites
  243. */
  244. public render(): void {
  245. // Check
  246. if (!this._effectBase.isReady() || !this._effectFog.isReady() || !this._spriteTexture || !this._spriteTexture.isReady()) {
  247. return;
  248. }
  249. var engine = this._scene.getEngine();
  250. var baseSize = this._spriteTexture.getBaseSize();
  251. // Sprites
  252. var deltaTime = engine.getDeltaTime();
  253. var max = Math.min(this._capacity, this.sprites.length);
  254. var rowSize = baseSize.width / this.cellWidth;
  255. var offset = 0;
  256. for (var index = 0; index < max; index++) {
  257. var sprite = this.sprites[index];
  258. if (!sprite || !sprite.isVisible) {
  259. continue;
  260. }
  261. sprite._animate(deltaTime);
  262. this._appendSpriteVertex(offset++, sprite, 0, 0, rowSize);
  263. this._appendSpriteVertex(offset++, sprite, 1, 0, rowSize);
  264. this._appendSpriteVertex(offset++, sprite, 1, 1, rowSize);
  265. this._appendSpriteVertex(offset++, sprite, 0, 1, rowSize);
  266. }
  267. this._buffer.update(this._vertexData);
  268. // Render
  269. var effect = this._effectBase;
  270. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  271. effect = this._effectFog;
  272. }
  273. engine.enableEffect(effect);
  274. var viewMatrix = this._scene.getViewMatrix();
  275. effect.setTexture("diffuseSampler", this._spriteTexture);
  276. effect.setMatrix("view", viewMatrix);
  277. effect.setMatrix("projection", this._scene.getProjectionMatrix());
  278. effect.setFloat2("textureInfos", this.cellWidth / baseSize.width, this.cellHeight / baseSize.height);
  279. // Fog
  280. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  281. effect.setFloat4("vFogInfos", this._scene.fogMode, this._scene.fogStart, this._scene.fogEnd, this._scene.fogDensity);
  282. effect.setColor3("vFogColor", this._scene.fogColor);
  283. }
  284. // VBOs
  285. engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
  286. // Draw order
  287. engine.setDepthFunctionToLessOrEqual();
  288. effect.setBool("alphaTest", true);
  289. engine.setColorWrite(false);
  290. engine.drawElementsType(Material.TriangleFillMode, 0, (offset / 4) * 6);
  291. engine.setColorWrite(true);
  292. effect.setBool("alphaTest", false);
  293. engine.setAlphaMode(Engine.ALPHA_COMBINE);
  294. engine.drawElementsType(Material.TriangleFillMode, 0, (offset / 4) * 6);
  295. engine.setAlphaMode(Engine.ALPHA_DISABLE);
  296. }
  297. /**
  298. * Release associated resources
  299. */
  300. public dispose(): void {
  301. if (this._buffer) {
  302. this._buffer.dispose();
  303. (<any>this._buffer) = null;
  304. }
  305. if (this._indexBuffer) {
  306. this._scene.getEngine()._releaseBuffer(this._indexBuffer);
  307. (<any>this._indexBuffer) = null;
  308. }
  309. if (this._spriteTexture) {
  310. this._spriteTexture.dispose();
  311. (<any>this._spriteTexture) = null;
  312. }
  313. // Remove from scene
  314. var index = this._scene.spriteManagers.indexOf(this);
  315. this._scene.spriteManagers.splice(index, 1);
  316. // Callback
  317. this.onDisposeObservable.notifyObservers(this);
  318. this.onDisposeObservable.clear();
  319. }
  320. }
  321. }