babylon.spriteManager.ts 7.8 KB

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