babylon.spriteManager.ts 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. module BABYLON {
  2. export class SpriteManager {
  3. public sprites = new Array<Sprite>();
  4. public renderingGroupId = 0;
  5. public layerMask: number = 0x0FFFFFFF;
  6. public onDispose: () => void;
  7. public fogEnabled = true;
  8. private _capacity: number;
  9. private _spriteTexture: Texture;
  10. private _epsilon: number;
  11. private _scene: Scene;
  12. private _vertexDeclaration = [4, 4, 4, 4];
  13. private _vertexStrideSize = 16 * 4; // 15 floats per sprite (x, y, z, angle, sizeX, sizeY, offsetX, offsetY, invertU, invertV, cellIndexX, cellIndexY, color)
  14. private _vertexBuffer: WebGLBuffer;
  15. private _indexBuffer: WebGLBuffer;
  16. private _vertices: Float32Array;
  17. private _effectBase: Effect;
  18. private _effectFog: Effect;
  19. constructor(public name: string, imgUrl: string, capacity: number, public cellSize: number, scene: Scene, epsilon?: number, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE) {
  20. this._capacity = capacity;
  21. this._spriteTexture = new Texture(imgUrl, scene, true, false, samplingMode);
  22. this._spriteTexture.wrapU = Texture.CLAMP_ADDRESSMODE;
  23. this._spriteTexture.wrapV = Texture.CLAMP_ADDRESSMODE;
  24. this._epsilon = epsilon === undefined ? 0.01 : epsilon;
  25. this._scene = scene;
  26. this._scene.spriteManagers.push(this);
  27. // VBO
  28. this._vertexBuffer = scene.getEngine().createDynamicVertexBuffer(capacity * this._vertexStrideSize * 4);
  29. var indices = [];
  30. var index = 0;
  31. for (var count = 0; count < capacity; count++) {
  32. indices.push(index);
  33. indices.push(index + 1);
  34. indices.push(index + 2);
  35. indices.push(index);
  36. indices.push(index + 2);
  37. indices.push(index + 3);
  38. index += 4;
  39. }
  40. this._indexBuffer = scene.getEngine().createIndexBuffer(indices);
  41. this._vertices = new Float32Array(capacity * this._vertexStrideSize);
  42. // Effects
  43. this._effectBase = this._scene.getEngine().createEffect("sprites",
  44. ["position", "options", "cellInfo", "color"],
  45. ["view", "projection", "textureInfos", "alphaTest"],
  46. ["diffuseSampler"], "");
  47. this._effectFog = this._scene.getEngine().createEffect("sprites",
  48. ["position", "options", "cellInfo", "color"],
  49. ["view", "projection", "textureInfos", "alphaTest", "vFogInfos", "vFogColor"],
  50. ["diffuseSampler"], "#define FOG");
  51. }
  52. private _appendSpriteVertex(index: number, sprite: Sprite, offsetX: number, offsetY: number, rowSize: number): void {
  53. var arrayOffset = index * 16;
  54. if (offsetX === 0)
  55. offsetX = this._epsilon;
  56. else if (offsetX === 1)
  57. offsetX = 1 - this._epsilon;
  58. if (offsetY === 0)
  59. offsetY = this._epsilon;
  60. else if (offsetY === 1)
  61. offsetY = 1 - this._epsilon;
  62. this._vertices[arrayOffset] = sprite.position.x;
  63. this._vertices[arrayOffset + 1] = sprite.position.y;
  64. this._vertices[arrayOffset + 2] = sprite.position.z;
  65. this._vertices[arrayOffset + 3] = sprite.angle;
  66. this._vertices[arrayOffset + 4] = sprite.width;
  67. this._vertices[arrayOffset + 5] = sprite.height;
  68. this._vertices[arrayOffset + 6] = offsetX;
  69. this._vertices[arrayOffset + 7] = offsetY;
  70. this._vertices[arrayOffset + 8] = sprite.invertU ? 1 : 0;
  71. this._vertices[arrayOffset + 9] = sprite.invertV ? 1 : 0;
  72. var offset = (sprite.cellIndex / rowSize) >> 0;
  73. this._vertices[arrayOffset + 10] = sprite.cellIndex - offset * rowSize;
  74. this._vertices[arrayOffset + 11] = offset;
  75. // Color
  76. this._vertices[arrayOffset + 12] = sprite.color.r;
  77. this._vertices[arrayOffset + 13] = sprite.color.g;
  78. this._vertices[arrayOffset + 14] = sprite.color.b;
  79. this._vertices[arrayOffset + 15] = sprite.color.a;
  80. }
  81. public render(): void {
  82. // Check
  83. if (!this._effectBase.isReady() || !this._effectFog.isReady() || !this._spriteTexture || !this._spriteTexture.isReady())
  84. return;
  85. var engine = this._scene.getEngine();
  86. var baseSize = this._spriteTexture.getBaseSize();
  87. // Sprites
  88. var deltaTime = engine.getDeltaTime();
  89. var max = Math.min(this._capacity, this.sprites.length);
  90. var rowSize = baseSize.width / this.cellSize;
  91. var offset = 0;
  92. for (var index = 0; index < max; index++) {
  93. var sprite = this.sprites[index];
  94. if (!sprite) {
  95. continue;
  96. }
  97. sprite._animate(deltaTime);
  98. this._appendSpriteVertex(offset++, sprite, 0, 0, rowSize);
  99. this._appendSpriteVertex(offset++, sprite, 1, 0, rowSize);
  100. this._appendSpriteVertex(offset++, sprite, 1, 1, rowSize);
  101. this._appendSpriteVertex(offset++, sprite, 0, 1, rowSize);
  102. }
  103. engine.updateDynamicVertexBuffer(this._vertexBuffer, this._vertices);
  104. // Render
  105. var effect = this._effectBase;
  106. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  107. effect = this._effectFog;
  108. }
  109. engine.enableEffect(effect);
  110. var viewMatrix = this._scene.getViewMatrix();
  111. effect.setTexture("diffuseSampler", this._spriteTexture);
  112. effect.setMatrix("view", viewMatrix);
  113. effect.setMatrix("projection", this._scene.getProjectionMatrix());
  114. effect.setFloat2("textureInfos", this.cellSize / baseSize.width, this.cellSize / baseSize.height);
  115. // Fog
  116. if (this._scene.fogEnabled && this._scene.fogMode !== Scene.FOGMODE_NONE && this.fogEnabled) {
  117. effect.setFloat4("vFogInfos", this._scene.fogMode, this._scene.fogStart, this._scene.fogEnd, this._scene.fogDensity);
  118. effect.setColor3("vFogColor", this._scene.fogColor);
  119. }
  120. // VBOs
  121. engine.bindBuffers(this._vertexBuffer, this._indexBuffer, this._vertexDeclaration, this._vertexStrideSize, effect);
  122. // Draw order
  123. engine.setDepthFunctionToLessOrEqual();
  124. effect.setBool("alphaTest", true);
  125. engine.setColorWrite(false);
  126. engine.draw(true, 0, max * 6);
  127. engine.setColorWrite(true);
  128. effect.setBool("alphaTest", false);
  129. engine.setAlphaMode(Engine.ALPHA_COMBINE);
  130. engine.draw(true, 0, max * 6);
  131. engine.setAlphaMode(Engine.ALPHA_DISABLE);
  132. }
  133. public dispose(): void {
  134. if (this._vertexBuffer) {
  135. this._scene.getEngine()._releaseBuffer(this._vertexBuffer);
  136. this._vertexBuffer = null;
  137. }
  138. if (this._indexBuffer) {
  139. this._scene.getEngine()._releaseBuffer(this._indexBuffer);
  140. this._indexBuffer = null;
  141. }
  142. if (this._spriteTexture) {
  143. this._spriteTexture.dispose();
  144. this._spriteTexture = null;
  145. }
  146. // Remove from scene
  147. var index = this._scene.spriteManagers.indexOf(this);
  148. this._scene.spriteManagers.splice(index, 1);
  149. // Callback
  150. if (this.onDispose) {
  151. this.onDispose();
  152. }
  153. }
  154. }
  155. }