babylon.spriteManager.ts 12 KB

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