• Playcanvas后处理-辉光bloom

    （一）Bloom介绍

    Bloom（辉光、光晕、泛光）是一种常见的摄像机后处理（PostProcessing）效果，用于再现真实世界相机的成像伪影。这种效果会产生从图像中明亮区域边界延伸的光条纹（或羽毛），从而产生一种极其明亮的光线压倒捕捉场景的相机的错觉。

    辉光简单的说法，就是有些地方足够亮，看上去是溢出到周围的区域，下面是playcanvas官方提供的辉光效果对比图

    图1 未使用辉光效果

    图2 使用辉光效果

    （二）Bloom实现原理

    bloom的实现原理很简单：就是取camera获取图像的高亮部分，进行高斯模糊，并和原图进行合并就可以实现。

    1. 提取较亮区域

    通过阈值提取较亮区域的像素点

    1. varying vec2 vUv0;
    2.  
    3. uniform sampler2D uBaseTexture
    4. uniform float uBloomThreshold;
    5.  
    6. float luminance(vec4 color)
    7. {
    8.     return  0.2125 * color[0] + 0.7154 * color[1] + 0.0721 * color[2]; 
    9. }
    10.  
    11. void main(void)
    12. {
    13.     vec4 color = texture2D(uBaseTexture, vUv0);
    14.     
    15.     // 只保留亮度超过阈值亮度的像素点
    16.     float val = clamp(luminance(color) - uBloomThreshold, 0.0, 1.0);
    17.     gl_FragColor = color * val;
    18.  
    19.     //这是playcanvas官网提供提取亮度高于某个阈值的算法，但还不知道它的原理
    20.     //gl_FragColor = clamp((color - uBloomThreshold) / (1.0 - uBloomThreshold), 0.0, 1.0);
    21. }

    2. 高斯模糊

    接下来，就是如何得到模糊图uBloomTexture

    一般模糊图像的算法，我们可以选择常见的高斯模糊，它可以减少图像噪声、降低细节层次

    高斯模糊的实现原理，这里不做多赘述，这里提供2篇文章供参考。

    原理参考：2D Shader学习——高斯模糊

    shader实现参考：基于线性采样的高效高斯模糊实现（译）

    参考第二篇文章，我们在JavaScript中，计算我们高斯卷积核的权重和位移

    1. var SAMPLE_COUNT = 15;
    2.  
    3. //高斯曲线
    4. function computeGaussian(n, theta) {
    5.     return ((1.0 / Math.sqrt(2 * Math.PI * theta)) * Math.exp(-(n * n) / (2 * theta * theta)));
    6. }
    7.  
    8. function calculateBlurValues(sampleWeights, sampleOffsets, dx, dy, blurAmount) {
    9.  
    10.     // Create temporary arrays for computing our filter settings.
    11.     // The first sample always has a zero offset.
    12.     sampleWeights[0] = computeGaussian(0, blurAmount);
    13.     sampleOffsets[0] = 0;
    14.     sampleOffsets[1] = 0;
    15.  
    16.     // Maintain a sum of all the weighting values.
    17.     var totalWeights = sampleWeights[0];
    18.  
    19.     // Add pairs of additional sample taps, positioned
    20.     // along a line in both directions from the center.
    21.     var i, len;
    22.     for (i = 0, len = Math.floor(SAMPLE_COUNT / 2); i < len; i++) {
    23.         // Store weights for the positive and negative taps.
    24.         var weight = computeGaussian(i + 1, blurAmount);
    25.         sampleWeights[i * 2] = weight;
    26.         sampleWeights[i * 2 + 1] = weight;
    27.         totalWeights += weight * 2;
    28.  
    29.   
    30.         var sampleOffset = i * 2 + 1.5;
    31.  
    32.         
    33.         sampleOffsets[i * 4] = dx * sampleOffset;
    34.         sampleOffsets[i * 4 + 1] = dy * sampleOffset;
    35.         sampleOffsets[i * 4 + 2] = -dx * sampleOffset;
    36.         sampleOffsets[i * 4 + 3] = -dy * sampleOffset;
    37.     }
    38.  
    39.     // Normalize the list of sample weightings, so they will always sum to one.
    40.     for (i = 0, len = sampleWeights.length; i < len; i++) {
    41.         sampleWeights[i] /= totalWeights;
    42.     }
    43. }

    在fragment shader中，对图像进行卷积模糊（注意：这里的shader只对水平或垂直一个方向卷积）

    1. #define SAMPLE_COUNT 15
    2.  
    3. varying vec2 vUv0;
    4.  
    5. uniform sampler2D uBloomTexture;
    6. uniform vec2 uBlurOffsets[15];
    7. uniform float uBlurWeights[15];
    8.  
    9. void main(void)
    10. {
    11.     vec4 color = vec4(0.0);
    12.     for (int i = 0; i < SAMPLE_COUNT; i++)
    13.     {
    14.         color += texture2D(uBloomTexture, vUv0 + uBlurOffsets[i]) * uBlurWeights[i];
    15.     }
    16.     gl_FragColor = color;
    17. }

    最后，我们需要进行2次方向的滤波处理

    原理具体参考文章二中，如何将高斯滤波器分为水平方向和垂直方向的滤波器的原理

    1. // Pass 2: draw from rendertarget 1 into rendertarget 2（垂直方向）
    2. calculateBlurValues(this.sampleWeights, this.sampleOffsets, 1.0 / this.targets[1].width, 0, this.blurAmount);
    3. scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
    4. scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
    5. scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
    6. this.drawQuad(this.targets[1], this.blurShader);
    7.  
    8. // Pass 3: draw from rendertarget 2 back into rendertarget 1（水平方向）
    9. calculateBlurValues(this.sampleWeights, this.sampleOffsets, 0, 1.0 / this.targets[0].height, this.blurAmount);
    10. scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
    11. scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
    12. scope.resolve("uBloomTexture").setValue(this.targets[1].colorBuffer);
    13. this.drawQuad(this.targets[0], this.blurShader);

    3. 混合原图和模糊图

    那我们最后的fragment shader就可以这样实现，原图+模糊图进行混合

    1. varying vec2 vUv0;
    2.  
    3. //bloom 强度
    4. uniform float uBloomEffectIntensity;
    5.  
    6. uniform sampler2D uBaseTexture;
    7. uniform sampler2D uBloomTexture;
    8.  
    9. void main(void)
    10. {
    11.     vec4 bloom = texture2D(uBloomTexture, vUv0) * uBloomEffectIntensity;
    12.     vec4 base = texture2D(uBaseTexture, vUv0);
    13.     
    14.     //将原图变暗，防止两图叠加后，像素溢出1
    15.     base *= (1.0 - clamp(bloom, 0.0, 1.0));
    16.     
    17.     //合并原图和模糊图，得到最终的bloom效果
    18.     gl_FragColor = base + bloom;
    19. }

    （三）在playcanvas编辑器中使用

    1. 创建脚本bloom.js

    1. // --------------- POST EFFECT DEFINITION --------------- //
    2. var SAMPLE_COUNT = 15;
    3.  
    4. function computeGaussian(n, theta) {
    5.     return ((1.0 / Math.sqrt(2 * Math.PI * theta)) * Math.exp(-(n * n) / (2 * theta * theta)));
    6. }
    7.  
    8. function calculateBlurValues(sampleWeights, sampleOffsets, dx, dy, blurAmount) {
    9.     // Look up how many samples our gaussian blur effect supports.
    10.  
    11.     // Create temporary arrays for computing our filter settings.
    12.     // The first sample always has a zero offset.
    13.     sampleWeights[0] = computeGaussian(0, blurAmount);
    14.     sampleOffsets[0] = 0;
    15.     sampleOffsets[1] = 0;
    16.  
    17.     // Maintain a sum of all the weighting values.
    18.     var totalWeights = sampleWeights[0];
    19.  
    20.     // Add pairs of additional sample taps, positioned
    21.     // along a line in both directions from the center.
    22.     var i, len;
    23.     for (i = 0, len = Math.floor(SAMPLE_COUNT / 2); i < len; i++) {
    24.         // Store weights for the positive and negative taps.
    25.         var weight = computeGaussian(i + 1, blurAmount);
    26.         sampleWeights[i * 2] = weight;
    27.         sampleWeights[i * 2 + 1] = weight;
    28.         totalWeights += weight * 2;
    29.  
    30.         // To get the maximum amount of blurring from a limited number of
    31.         // pixel shader samples, we take advantage of the bilinear filtering
    32.         // hardware inside the texture fetch unit. If we position our texture
    33.         // coordinates exactly halfway between two texels, the filtering unit
    34.         // will average them for us, giving two samples for the price of one.
    35.         // This allows us to step in units of two texels per sample, rather
    36.         // than just one at a time. The 1.5 offset kicks things off by
    37.         // positioning us nicely in between two texels.
    38.         var sampleOffset = i * 2 + 1.5;
    39.  
    40.         // Store texture coordinate offsets for the positive and negative taps.
    41.         sampleOffsets[i * 4] = dx * sampleOffset;
    42.         sampleOffsets[i * 4 + 1] = dy * sampleOffset;
    43.         sampleOffsets[i * 4 + 2] = -dx * sampleOffset;
    44.         sampleOffsets[i * 4 + 3] = -dy * sampleOffset;
    45.     }
    46.  
    47.     // Normalize the list of sample weightings, so they will always sum to one.
    48.     for (i = 0, len = sampleWeights.length; i < len; i++) {
    49.         sampleWeights[i] /= totalWeights;
    50.     }
    51. }
    52.  
    53. /**
    54.  * @class
    55.  * @name BloomEffect
    56.  * @classdesc Implements the BloomEffect post processing effect.
    57.  * @description Creates new instance of the post effect.
    58.  * @augments PostEffect
    59.  * @param {GraphicsDevice} graphicsDevice - The graphics device of the application.
    60.  * @property {number} bloomThreshold Only pixels brighter then this threshold will be processed. Ranges from 0 to 1.
    61.  * @property {number} blurAmount Controls the amount of blurring.
    62.  * @property {number} bloomIntensity The intensity of the effect.
    63.  */
    64. function BloomEffect(graphicsDevice) {
    65.     pc.PostEffect.call(this, graphicsDevice);
    66.  
    67.     // Shaders
    68.     var attributes = {
    69.         aPosition: pc.SEMANTIC_POSITION
    70.     };
    71.  
    72.     // Pixel shader extracts the brighter areas of an image.
    73.     // This is the first step in applying a bloom postprocess.
    74.     var extractFrag = [
    75.         "varying vec2 vUv0;",
    76.         "",
    77.         "uniform sampler2D uBaseTexture;",
    78.         "uniform float uBloomThreshold;",
    79.         "",
    80.         "float luminance(vec4 color)",
    81.         "{",
    82.         "    return  0.2125 * color[0] + 0.7154 * color[1] + 0.0721 * color[2]; ",
    83.         "}",
    84.         "",
    85.         "void main(void)",
    86.         "{",
    87.                 // Look up the original image color.
    88.         "    vec4 color = texture2D(uBaseTexture, vUv0);",
    89.         "",
    90.                 // Adjust it to keep only values brighter than the specified threshold.
    91.         "    float val = clamp(luminance(color) - uBloomThreshold, 0.0, 1.0);",
    92.         "    gl_FragColor = color * val;",
    93.         "}"
    94.     ].join("\n");
    95.  
    96.     // Pixel shader applies a one dimensional gaussian blur filter.
    97.     // This is used twice by the bloom postprocess, first to
    98.     // blur horizontally, and then again to blur vertically.
    99.     var gaussianBlurFrag = [
    100.         "#define SAMPLE_COUNT " + SAMPLE_COUNT,
    101.         "",
    102.         "varying vec2 vUv0;",
    103.         "",
    104.         "uniform sampler2D uBloomTexture;",
    105.         "uniform vec2 uBlurOffsets[" + SAMPLE_COUNT + "];",
    106.         "uniform float uBlurWeights[" + SAMPLE_COUNT + "];",
    107.         "",
    108.         "void main(void)",
    109.         "{",
    110.         "    vec4 color = vec4(0.0);",
    111.                 // Combine a number of weighted image filter taps.
    112.         "    for (int i = 0; i < SAMPLE_COUNT; i++)",
    113.         "    {",
    114.         "        color += texture2D(uBloomTexture, vUv0 + uBlurOffsets[i]) * uBlurWeights[i];",
    115.         "    }",
    116.         "",
    117.         "    gl_FragColor = color;",
    118.         "}"
    119.     ].join("\n");
    120.  
    121.     // Pixel shader combines the bloom image with the original
    122.     // scene, using tweakable intensity levels.
    123.     // This is the final step in applying a bloom postprocess.
    124.     var combineFrag = [
    125.         "varying vec2 vUv0;",
    126.         "",
    127.         "uniform float uBloomEffectIntensity;",
    128.         "uniform sampler2D uBaseTexture;",
    129.         "uniform sampler2D uBloomTexture;",
    130.         "",
    131.         "void main(void)",
    132.         "{",
    133.                 // Look up the bloom and original base image colors.
    134.         "    vec4 bloom = texture2D(uBloomTexture, vUv0) * uBloomEffectIntensity;",
    135.         "    vec4 base = texture2D(uBaseTexture, vUv0);",
    136.         "",
    137.                 // Darken down the base image in areas where there is a lot of bloom,
    138.                 // to prevent things looking excessively burned-out.
    139.         "    base *= (1.0 - clamp(bloom, 0.0, 1.0));",
    140.         "",
    141.                 // Combine the two images.
    142.         "    gl_FragColor = base + bloom;",
    143.         "}"
    144.     ].join("\n");
    145.  
    146.     this.extractShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, extractFrag, 'BloomExtractShader', attributes);
    147.     this.blurShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, gaussianBlurFrag, 'BloomBlurShader', attributes);
    148.     this.combineShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, combineFrag, 'BloomCombineShader', attributes);
    149.  
    150.     this.targets = [];
    151.  
    152.     // Effect defaults
    153.     this.bloomThreshold = 0.25;
    154.     this.blurAmount = 4;
    155.     this.bloomIntensity = 1.25;
    156.  
    157.     // Uniforms
    158.     this.sampleWeights = new Float32Array(SAMPLE_COUNT);
    159.     this.sampleOffsets = new Float32Array(SAMPLE_COUNT * 2);
    160. }
    161.  
    162. BloomEffect.prototype = Object.create(pc.PostEffect.prototype);
    163. BloomEffect.prototype.constructor = BloomEffect;
    164.  
    165. BloomEffect.prototype._destroy = function () {
    166.     if (this.targets) {
    167.         var i;
    168.         for (i = 0; i < this.targets.length; i++) {
    169.             this.targets[i].destroyTextureBuffers();
    170.             this.targets[i].destroy();
    171.         }
    172.     }
    173.     this.targets.length = 0;
    174. };
    175.  
    176. BloomEffect.prototype._resize = function (target) {
    177.  
    178.     var width = target.colorBuffer.width;
    179.     var height = target.colorBuffer.height;
    180.  
    181.     if (width === this.width && height === this.height)
    182.         return;
    183.  
    184.     this.width = width;
    185.     this.height = height;
    186.  
    187.     this._destroy();
    188.  
    189.     // Render targets
    190.     var i;
    191.     for (i = 0; i < 2; i++) {
    192.         var colorBuffer = new pc.Texture(this.device, {
    193.             name: "Bloom Texture" + i,
    194.             format: pc.PIXELFORMAT_RGBA8,
    195.             width: width >> 1,
    196.             height: height >> 1,
    197.             mipmaps: false
    198.         });
    199.         colorBuffer.minFilter = pc.FILTER_LINEAR;
    200.         colorBuffer.magFilter = pc.FILTER_LINEAR;
    201.         colorBuffer.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    202.         colorBuffer.addressV = pc.ADDRESS_CLAMP_TO_EDGE;
    203.         colorBuffer.name = 'pe-bloom-' + i;
    204.         var bloomTarget = new pc.RenderTarget({
    205.             name: "Bloom Render Target " + i,
    206.             colorBuffer: colorBuffer,
    207.             depth: false
    208.         });
    209.  
    210.         this.targets.push(bloomTarget);
    211.     }
    212. };
    213.  
    214. Object.assign(BloomEffect.prototype, {
    215.     render: function (inputTarget, outputTarget, rect) {
    216.  
    217.         this._resize(inputTarget);
    218.  
    219.         var device = this.device;
    220.         var scope = device.scope;
    221.  
    222.         // Pass 1: draw the scene into rendertarget 1, using a
    223.         // shader that extracts only the brightest parts of the image.
    224.         scope.resolve("uBloomThreshold").setValue(this.bloomThreshold);
    225.         scope.resolve("uBaseTexture").setValue(inputTarget.colorBuffer);
    226.         this.drawQuad(this.targets[0], this.extractShader);
    227.  
    228.         // Pass 2: draw from rendertarget 1 into rendertarget 2,
    229.         // using a shader to apply a horizontal gaussian blur filter.
    230.         calculateBlurValues(this.sampleWeights, this.sampleOffsets, 1.0 / this.targets[1].width, 0, this.blurAmount);
    231.         scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
    232.         scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
    233.         scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
    234.         this.drawQuad(this.targets[1], this.blurShader);
    235.  
    236.         // Pass 3: draw from rendertarget 2 back into rendertarget 1,
    237.         // using a shader to apply a vertical gaussian blur filter.
    238.         calculateBlurValues(this.sampleWeights, this.sampleOffsets, 0, 1.0 / this.targets[0].height, this.blurAmount);
    239.         scope.resolve("uBlurWeights[0]").setValue(this.sampleWeights);
    240.         scope.resolve("uBlurOffsets[0]").setValue(this.sampleOffsets);
    241.         scope.resolve("uBloomTexture").setValue(this.targets[1].colorBuffer);
    242.         this.drawQuad(this.targets[0], this.blurShader);
    243.  
    244.         // Pass 4: draw both rendertarget 1 and the original scene
    245.         // image back into the main backbuffer, using a shader that
    246.         // combines them to produce the final bloomed result.
    247.         scope.resolve("uBloomEffectIntensity").setValue(this.bloomIntensity);
    248.         scope.resolve("uBloomTexture").setValue(this.targets[0].colorBuffer);
    249.         scope.resolve("uBaseTexture").setValue(inputTarget.colorBuffer);
    250.         this.drawQuad(outputTarget, this.combineShader, rect);
    251.     }
    252. });
    253.  
    254. // ----------------- SCRIPT DEFINITION ------------------ //
    255. var Bloom = pc.createScript('bloom');
    256.  
    257. Bloom.attributes.add('bloomIntensity', {
    258.     type: 'number',
    259.     default: 1,
    260.     min: 0,
    261.     title: 'Intensity'
    262. });
    263.  
    264. Bloom.attributes.add('bloomThreshold', {
    265.     type: 'number',
    266.     default: 0.25,
    267.     min: 0,
    268.     max: 1,
    269.     title: 'Threshold'
    270. });
    271.  
    272. Bloom.attributes.add('blurAmount', {
    273.     type: 'number',
    274.     default: 4,
    275.     min: 1,
    276.     'title': 'Blur amount'
    277. });
    278.  
    279. Bloom.prototype.initialize = function () {
    280.     this.effect = new BloomEffect(this.app.graphicsDevice);
    281.  
    282.     this.effect.bloomThreshold = this.bloomThreshold;
    283.     this.effect.blurAmount = this.blurAmount;
    284.     this.effect.bloomIntensity = this.bloomIntensity;
    285.  
    286.     var queue = this.entity.camera.postEffects;
    287.  
    288.     queue.addEffect(this.effect);
    289.  
    290.     this.on('attr', function (name, value) {
    291.         this.effect[name] = value;
    292.     }, this);
    293.  
    294.     this.on('state', function (enabled) {
    295.         if (enabled) {
    296.             queue.addEffect(this.effect);
    297.         } else {
    298.             queue.removeEffect(this.effect);
    299.         }
    300.     });
    301.  
    302.     this.on('destroy', function () {
    303.         queue.removeEffect(this.effect);
    304.         this.effect._destroy();
    305.     });
    306. };

    2. 将脚本挂载在相机

  • 相关阅读:
    Codeforces Round #818 (Div. 2)
    stm32f4单片机强制类型转换为float程序跑飞问题
    XML - XML学习/XML文件解析器(C++)实现
    智能合约经典漏洞案例，xSurge 重入漏洞+套利 综合运用
    axios升级依赖版本后报错SyntaxError: Cannot use import statement outside a module
    基于阶梯碳交易的含P2G-CCS耦合和燃气掺氢的虚拟电厂优化调度matlab程序
    有效的字母异位词 C
    Python | Leetcode Python题解之第47题全排列II
    德鲁克《卓有成效的管理者》学习笔记-掌握时间的学习和实践
    防御式编程之断言assert的使用
  • 原文地址：https://blog.csdn.net/u014494705/article/details/134512109