babylon.blurPostProcess.ts 9.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. module BABYLON {
  2. /**
  3. * The Blur Post Process which blurs an image based on a kernel and direction.
  4. * Can be used twice in x and y directions to perform a guassian blur in two passes.
  5. */
  6. export class BlurPostProcess extends PostProcess {
  7. protected _kernel: number;
  8. protected _idealKernel: number;
  9. protected _packedFloat: boolean = false;
  10. private _staticDefines:string = ""
  11. /**
  12. * Sets the length in pixels of the blur sample region
  13. */
  14. public set kernel(v: number) {
  15. if (this._idealKernel === v) {
  16. return;
  17. }
  18. v = Math.max(v, 1);
  19. this._idealKernel = v;
  20. this._kernel = this._nearestBestKernel(v);
  21. if(!this.blockCompilation){
  22. this._updateParameters();
  23. }
  24. }
  25. /**
  26. * Gets the length in pixels of the blur sample region
  27. */
  28. public get kernel(): number {
  29. return this._idealKernel;
  30. }
  31. /**
  32. * Sets wether or not the blur needs to unpack/repack floats
  33. */
  34. public set packedFloat(v: boolean) {
  35. if (this._packedFloat === v) {
  36. return;
  37. }
  38. this._packedFloat = v;
  39. if(!this.blockCompilation){
  40. this._updateParameters();
  41. }
  42. }
  43. /**
  44. * Gets wether or not the blur is unpacking/repacking floats
  45. */
  46. public get packedFloat(): boolean {
  47. return this._packedFloat;
  48. }
  49. /**
  50. * Creates a new instance of @see BlurPostProcess
  51. * @param name The name of the effect.
  52. * @param direction The direction in which to blur the image.
  53. * @param kernel The size of the kernel to be used when computing the blur. eg. Size of 3 will blur the center pixel by 2 pixels surrounding it.
  54. * @param options The required width/height ratio to downsize to before computing the render pass. (Use 1.0 for full size)
  55. * @param camera The camera to apply the render pass to.
  56. * @param samplingMode The sampling mode to be used when computing the pass. (default: 0)
  57. * @param engine The engine which the post process will be applied. (default: current engine)
  58. * @param reusable If the post process can be reused on the same frame. (default: false)
  59. * @param textureType Type of textures used when performing the post process. (default: 0)
  60. * @param blockCompilation If compilation of the shader should not be done in the constructor. The updateEffect method can be used to compile the shader at a later time. (default: false)
  61. */
  62. constructor(name: string, /** The direction in which to blur the image. */ public direction: Vector2, kernel: number, options: number | PostProcessOptions, camera: Nullable<Camera>, samplingMode: number = Texture.BILINEAR_SAMPLINGMODE, engine?: Engine, reusable?: boolean, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT, defines = "", private blockCompilation = false) {
  63. super(name, "kernelBlur", ["delta", "direction", "cameraMinMaxZ"], ["circleOfConfusionSampler"], options, camera, samplingMode, engine, reusable, null, textureType, "kernelBlur", {varyingCount: 0, depCount: 0}, true);
  64. this._staticDefines = defines;
  65. this.onApplyObservable.add((effect: Effect) => {
  66. effect.setFloat2('delta', (1 / this.width) * this.direction.x, (1 / this.height) * this.direction.y);
  67. });
  68. this.kernel = kernel;
  69. }
  70. /**
  71. * Updates the effect with the current post process compile time values and recompiles the shader.
  72. * @param defines Define statements that should be added at the beginning of the shader. (default: null)
  73. * @param uniforms Set of uniform variables that will be passed to the shader. (default: null)
  74. * @param samplers Set of Texture2D variables that will be passed to the shader. (default: null)
  75. * @param indexParameters The index parameters to be used for babylons include syntax "#include<kernelBlurVaryingDeclaration>[0..varyingCount]". (default: undefined) See usage in babylon.blurPostProcess.ts and kernelBlur.vertex.fx
  76. * @param onCompiled Called when the shader has been compiled.
  77. * @param onError Called if there is an error when compiling a shader.
  78. */
  79. public updateEffect(defines: Nullable<string> = null, uniforms: Nullable<string[]> = null, samplers: Nullable<string[]> = null, indexParameters?: any,
  80. onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void) {
  81. this._updateParameters(onCompiled, onError);
  82. }
  83. protected _updateParameters(onCompiled?: (effect: Effect) => void, onError?: (effect: Effect, errors: string) => void): void {
  84. // Generate sampling offsets and weights
  85. let N = this._kernel;
  86. let centerIndex = (N - 1) / 2;
  87. // Generate Gaussian sampling weights over kernel
  88. let offsets = [];
  89. let weights = [];
  90. let totalWeight = 0;
  91. for (let i = 0; i < N; i++) {
  92. let u = i / (N - 1);
  93. let w = this._gaussianWeight(u * 2.0 - 1);
  94. offsets[i] = (i - centerIndex);
  95. weights[i] = w;
  96. totalWeight += w;
  97. }
  98. // Normalize weights
  99. for (let i = 0; i < weights.length; i++) {
  100. weights[i] /= totalWeight;
  101. }
  102. // Optimize: combine samples to take advantage of hardware linear sampling
  103. // Walk from left to center, combining pairs (symmetrically)
  104. let linearSamplingWeights = [];
  105. let linearSamplingOffsets = [];
  106. let linearSamplingMap = [];
  107. for (let i = 0; i <= centerIndex; i += 2) {
  108. let j = Math.min(i + 1, Math.floor(centerIndex));
  109. let singleCenterSample = i === j;
  110. if (singleCenterSample) {
  111. linearSamplingMap.push({ o: offsets[i], w: weights[i] });
  112. } else {
  113. let sharedCell = j === centerIndex;
  114. let weightLinear = (weights[i] + weights[j] * (sharedCell ? .5 : 1.));
  115. let offsetLinear = offsets[i] + 1 / (1 + weights[i] / weights[j]);
  116. if (offsetLinear === 0) {
  117. linearSamplingMap.push({ o: offsets[i], w: weights[i] });
  118. linearSamplingMap.push({ o: offsets[i + 1], w: weights[i + 1] });
  119. } else {
  120. linearSamplingMap.push({ o: offsetLinear, w: weightLinear });
  121. linearSamplingMap.push({ o: -offsetLinear, w: weightLinear });
  122. }
  123. }
  124. }
  125. for (let i = 0; i < linearSamplingMap.length; i++) {
  126. linearSamplingOffsets[i] = linearSamplingMap[i].o;
  127. linearSamplingWeights[i] = linearSamplingMap[i].w;
  128. }
  129. // Replace with optimized
  130. offsets = linearSamplingOffsets;
  131. weights = linearSamplingWeights;
  132. // Generate shaders
  133. let maxVaryingRows = this.getEngine().getCaps().maxVaryingVectors;
  134. let freeVaryingVec2 = Math.max(maxVaryingRows, 0.) - 1; // Because of sampleCenter
  135. let varyingCount = Math.min(offsets.length, freeVaryingVec2);
  136. let defines = "";
  137. defines+=this._staticDefines;
  138. for (let i = 0; i < varyingCount; i++) {
  139. defines += `#define KERNEL_OFFSET${i} ${this._glslFloat(offsets[i])}\r\n`;
  140. defines += `#define KERNEL_WEIGHT${i} ${this._glslFloat(weights[i])}\r\n`;
  141. }
  142. let depCount = 0;
  143. for (let i = freeVaryingVec2; i < offsets.length; i++) {
  144. defines += `#define KERNEL_DEP_OFFSET${depCount} ${this._glslFloat(offsets[i])}\r\n`;
  145. defines += `#define KERNEL_DEP_WEIGHT${depCount} ${this._glslFloat(weights[i])}\r\n`;
  146. depCount++;
  147. }
  148. if (this.packedFloat) {
  149. defines += `#define PACKEDFLOAT 1`;
  150. }
  151. this.blockCompilation = false;
  152. super.updateEffect(defines, null, null, {
  153. varyingCount: varyingCount,
  154. depCount: depCount
  155. }, onCompiled, onError);
  156. }
  157. /**
  158. * Best kernels are odd numbers that when divided by 2, their integer part is even, so 5, 9 or 13.
  159. * Other odd kernels optimize correctly but require proportionally more samples, even kernels are
  160. * possible but will produce minor visual artifacts. Since each new kernel requires a new shader we
  161. * want to minimize kernel changes, having gaps between physical kernels is helpful in that regard.
  162. * The gaps between physical kernels are compensated for in the weighting of the samples
  163. * @param idealKernel Ideal blur kernel.
  164. * @return Nearest best kernel.
  165. */
  166. protected _nearestBestKernel(idealKernel: number): number {
  167. let v = Math.round(idealKernel);
  168. for (let k of [v, v - 1, v + 1, v - 2, v + 2]) {
  169. if (((k % 2) !== 0) && ((Math.floor(k / 2) % 2) === 0) && k > 0) {
  170. return Math.max(k, 3);
  171. }
  172. }
  173. return Math.max(v, 3);
  174. }
  175. /**
  176. * Calculates the value of a Gaussian distribution with sigma 3 at a given point.
  177. * @param x The point on the Gaussian distribution to sample.
  178. * @return the value of the Gaussian function at x.
  179. */
  180. protected _gaussianWeight(x: number): number {
  181. //reference: Engine/ImageProcessingBlur.cpp #dcc760
  182. // We are evaluating the Gaussian (normal) distribution over a kernel parameter space of [-1,1],
  183. // so we truncate at three standard deviations by setting stddev (sigma) to 1/3.
  184. // The choice of 3-sigma truncation is common but arbitrary, and means that the signal is
  185. // truncated at around 1.3% of peak strength.
  186. //the distribution is scaled to account for the difference between the actual kernel size and the requested kernel size
  187. let sigma = (1 / 3);
  188. let denominator = Math.sqrt(2.0 * Math.PI) * sigma;
  189. let exponent = -((x * x) / (2.0 * sigma * sigma));
  190. let weight = (1.0 / denominator) * Math.exp(exponent);
  191. return weight;
  192. }
  193. /**
  194. * Generates a string that can be used as a floating point number in GLSL.
  195. * @param x Value to print.
  196. * @param decimalFigures Number of decimal places to print the number to (excluding trailing 0s).
  197. * @return GLSL float string.
  198. */
  199. protected _glslFloat(x: number, decimalFigures = 8) {
  200. return x.toFixed(decimalFigures).replace(/0+$/, '');
  201. }
  202. }
  203. }