babylon.spriteManager.ts 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. module BABYLON {
  2. export class SpriteManager {
  3. public sprites = new Array<Sprite>();
  4. public renderingGroupId = 0;
  5. public layerMask: number = 0x0FFFFFFF;
  6. public fogEnabled = true;
  7. public isPickable = false;
  8. public cellWidth: number;
  9. public cellHeight: number;
  10. /**
  11. * An event triggered when the manager is disposed.
  12. * @type {BABYLON.Observable}
  13. */
  14. public onDisposeObservable = new Observable<SpriteManager>();
  15. private _onDisposeObserver: Nullable<Observer<SpriteManager>>;
  16. public set onDispose(callback: () => void) {
  17. if (this._onDisposeObserver) {
  18. this.onDisposeObservable.remove(this._onDisposeObserver);
  19. }
  20. this._onDisposeObserver = this.onDisposeObservable.add(callback);
  21. }
  22. private _capacity: number;
  23. private _spriteTexture: Texture;
  24. private _epsilon: number;
  25. private _scene: Scene;
  26. private _vertexData: Float32Array;
  27. private _buffer: Buffer;
  28. private _vertexBuffers: { [key: string]: VertexBuffer } = {};
  29. private _indexBuffer: WebGLBuffer;
  30. private _effectBase: Effect;
  31. private _effectFog: Effect;
  32. public get texture(): Texture {
  33. return this._spriteTexture;
  34. }
  35. public set texture(value: Texture) {
  36. this._spriteTexture = value;
  37. }
  38. constructor(public name: string, imgUrl: string, capacity: number, cellSize: any, scene: Scene, epsilon: number = 0.01, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
  39. this._capacity = capacity;
  40. this._spriteTexture = new Texture(imgUrl, scene, true, false, samplingMode);
  41. this._spriteTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
  42. this._spriteTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
  43. if (cellSize.width && cellSize.height) {
  44. this.cellWidth = cellSize.width;
  45. this.cellHeight = cellSize.height;
  46. } else if(cellSize !== undefined) {
  47. this.cellWidth = cellSize;
  48. this.cellHeight = cellSize;
  49. } else {
  50. return;
  51. }
  52. this._epsilon = epsilon;
  53. this._scene = scene;
  54. this._scene.spriteManagers.push(this);
  55. var indices = [];
  56. var index = 0;
  57. for (var count = 0; count < capacity; count++) {
  58. indices.push(index);
  59. indices.push(index + 1);
  60. indices.push(index + 2);
  61. indices.push(index);
  62. indices.push(index + 2);
  63. indices.push(index + 3);
  64. index += 4;
  65. }
  66. this._indexBuffer = scene.getEngine().createIndexBuffer(indices);
  67. // VBO
  68. // 16 floats per sprite (x, y, z, angle, sizeX, sizeY, offsetX, offsetY, invertU, invertV, cellIndexX, cellIndexY, color r, color g, color b, color a)
  69. this._vertexData = new Float32Array(capacity * 16 * 4);
  70. this._buffer = new Buffer(scene.getEngine(), this._vertexData, true, 16);
  71. var positions = this._buffer.createVertexBuffer(VertexBuffer.PositionKind, 0, 4);
  72. var options = this._buffer.createVertexBuffer("options", 4, 4);
  73. var cellInfo = this._buffer.createVertexBuffer("cellInfo", 8, 4);
  74. var colors = this._buffer.createVertexBuffer(VertexBuffer.ColorKind, 12, 4);
  75. this._vertexBuffers[VertexBuffer.PositionKind] = positions;
  76. this._vertexBuffers["options"] = options;
  77. this._vertexBuffers["cellInfo"] = cellInfo;
  78. this._vertexBuffers[VertexBuffer.ColorKind] = colors;
  79. // Effects
  80. this._effectBase = this._scene.getEngine().createEffect("sprites",
  81. [VertexBuffer.PositionKind, "options", "cellInfo", VertexBuffer.ColorKind],
  82. ["view", "projection", "textureInfos", "alphaTest"],
  83. ["diffuseSampler"], "");
  84. this._effectFog = this._scene.getEngine().createEffect("sprites",
  85. [VertexBuffer.PositionKind, "options", "cellInfo", VertexBuffer.ColorKind],
  86. ["view", "projection", "textureInfos", "alphaTest", "vFogInfos", "vFogColor"],
  87. ["diffuseSampler"], "#define FOG");
  88. }
  89. private _appendSpriteVertex(index: number, sprite: Sprite, offsetX: number, offsetY: number, rowSize: number): void {
  90. var arrayOffset = index * 16;
  91. if (offsetX === 0)
  92. offsetX = this._epsilon;
  93. else if (offsetX === 1)
  94. offsetX = 1 - this._epsilon;
  95. if (offsetY === 0)
  96. offsetY = this._epsilon;
  97. else if (offsetY === 1)
  98. offsetY = 1 - this._epsilon;
  99. this._vertexData[arrayOffset] = sprite.position.x;
  100. this._vertexData[arrayOffset + 1] = sprite.position.y;
  101. this._vertexData[arrayOffset + 2] = sprite.position.z;
  102. this._vertexData[arrayOffset + 3] = sprite.angle;
  103. this._vertexData[arrayOffset + 4] = sprite.width;
  104. this._vertexData[arrayOffset + 5] = sprite.height;
  105. this._vertexData[arrayOffset + 6] = offsetX;
  106. this._vertexData[arrayOffset + 7] = offsetY;
  107. this._vertexData[arrayOffset + 8] = sprite.invertU ? 1 : 0;
  108. this._vertexData[arrayOffset + 9] = sprite.invertV ? 1 : 0;
  109. var offset = (sprite.cellIndex / rowSize) >> 0;
  110. this._vertexData[arrayOffset + 10] = sprite.cellIndex - offset * rowSize;
  111. this._vertexData[arrayOffset + 11] = offset;
  112. // Color
  113. this._vertexData[arrayOffset + 12] = sprite.color.r;
  114. this._vertexData[arrayOffset + 13] = sprite.color.g;
  115. this._vertexData[arrayOffset + 14] = sprite.color.b;
  116. this._vertexData[arrayOffset + 15] = sprite.color.a;
  117. }
  118. public intersects(ray: Ray, camera:Camera, predicate?: (sprite: Sprite) => boolean, fastCheck?: boolean): Nullable<PickingInfo> {
  119. var count = Math.min(this._capacity, this.sprites.length);
  120. var min = Vector3.Zero();
  121. var max = Vector3.Zero();
  122. var distance = Number.MAX_VALUE;
  123. var currentSprite: Nullable<Sprite> = null;
  124. var cameraSpacePosition = Vector3.Zero();
  125. var cameraView = camera.getViewMatrix();
  126. for (var index = 0; index < count; index++) {
  127. var sprite = this.sprites[index];
  128. if (!sprite) {
  129. continue;
  130. }
  131. if (predicate) {
  132. if (!predicate(sprite)) {
  133. continue;
  134. }
  135. } else if (!sprite.isPickable) {
  136. continue;
  137. }
  138. Vector3.TransformCoordinatesToRef(sprite.position, cameraView, cameraSpacePosition);
  139. min.copyFromFloats(cameraSpacePosition.x - sprite.width / 2, cameraSpacePosition.y - sprite.height / 2, cameraSpacePosition.z);
  140. max.copyFromFloats(cameraSpacePosition.x + sprite.width / 2, cameraSpacePosition.y + sprite.height / 2, cameraSpacePosition.z);
  141. if (ray.intersectsBoxMinMax(min, max)) {
  142. var currentDistance = Vector3.Distance(cameraSpacePosition, ray.origin);
  143. if (distance > currentDistance) {
  144. distance = currentDistance;
  145. currentSprite = sprite;
  146. if (fastCheck) {
  147. break;
  148. }
  149. }
  150. }
  151. }
  152. if (currentSprite) {
  153. var result = new PickingInfo();
  154. result.hit = true;
  155. result.pickedSprite = currentSprite;
  156. result.distance = distance;
  157. return result;
  158. }
  159. return null;
  160. }
  161. public render(): void {
  162. // Check
  163. if (!this._effectBase.isReady() || !this._effectFog.isReady() || !this._spriteTexture || !this._spriteTexture.isReady())
  164. return;
  165. var engine = this._scene.getEngine();
  166. var baseSize = this._spriteTexture.getBaseSize();
  167. // Sprites
  168. var deltaTime = engine.getDeltaTime();
  169. var max = Math.min(this._capacity, this.sprites.length);
  170. var rowSize = baseSize.width / this.cellWidth;
  171. var offset = 0;
  172. for (var index = 0; index < max; index++) {
  173. var sprite = this.sprites[index];
  174. if (!sprite) {
  175. continue;
  176. }
  177. sprite._animate(deltaTime);
  178. this._appendSpriteVertex(offset++, sprite, 0, 0, rowSize);
  179. this._appendSpriteVertex(offset++, sprite, 1, 0, rowSize);
  180. this._appendSpriteVertex(offset++, sprite, 1, 1, rowSize);
  181. this._appendSpriteVertex(offset++, sprite, 0, 1, rowSize);
  182. }
  183. this._buffer.update(this._vertexData);
  184. // Render
  185. var effect = this._effectBase;
  186. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  187. effect = this._effectFog;
  188. }
  189. engine.enableEffect(effect);
  190. var viewMatrix = this._scene.getViewMatrix();
  191. effect.setTexture("diffuseSampler", this._spriteTexture);
  192. effect.setMatrix("view", viewMatrix);
  193. effect.setMatrix("projection", this._scene.getProjectionMatrix());
  194. effect.setFloat2("textureInfos", this.cellWidth / baseSize.width, this.cellHeight / baseSize.height);
  195. // Fog
  196. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  197. effect.setFloat4("vFogInfos", this._scene.fogMode, this._scene.fogStart, this._scene.fogEnd, this._scene.fogDensity);
  198. effect.setColor3("vFogColor", this._scene.fogColor);
  199. }
  200. // VBOs
  201. engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
  202. // Draw order
  203. engine.setDepthFunctionToLessOrEqual();
  204. effect.setBool("alphaTest", true);
  205. engine.setColorWrite(false);
  206. engine.drawElementsType(Engine.DrawType.TRIANGLES, 0, max * 6);
  207. engine.setColorWrite(true);
  208. effect.setBool("alphaTest", false);
  209. engine.setAlphaMode(Engine.ALPHA_COMBINE);
  210. engine.drawElementsType(Engine.DrawType.TRIANGLES, 0, max * 6);
  211. engine.setAlphaMode(Engine.ALPHA_DISABLE);
  212. }
  213. public dispose(): void {
  214. if (this._buffer) {
  215. this._buffer.dispose();
  216. (<any>this._buffer) = null;
  217. }
  218. if (this._indexBuffer) {
  219. this._scene.getEngine()._releaseBuffer(this._indexBuffer);
  220. (<any>this._indexBuffer) = null;
  221. }
  222. if (this._spriteTexture) {
  223. this._spriteTexture.dispose();
  224. (<any>this._spriteTexture) = null;
  225. }
  226. // Remove from scene
  227. var index = this._scene.spriteManagers.indexOf(this);
  228. this._scene.spriteManagers.splice(index, 1);
  229. // Callback
  230. this.onDisposeObservable.notifyObservers(this);
  231. this.onDisposeObservable.clear();
  232. }
  233. }
  234. }