three.js examples (threejs.org)

(6 messages) Gaussian Blur of WebGL Smart Building Effect Algorithm series -CSDN blog – WebGL Halo

WebGL Learning HDR and Bloom – Jeff Zhong – Cnblogs.com

– Gaussian fuzzy values, which seem to be common

  • Gaussian fuzzy algorithm in vertical direction is applied first.
  • On the basis of vertical fuzzy, horizontal gaussian fuzzy algorithm is carried out.
    • Two steps (left and right N+N) gauss fuzzy algorithm and one step (NxN) gauss fuzzy algorithm with two directions are basically the same, but it can improve the efficiency of the algorithm.

Ping-pong frame cache

  • The statement
//2 ping-pong frame cache (both contain only 1 color attachment)
const hFbo = createFramebuffer(gl,{informat:gl.RGBA16F, type:gl.FLOAT});
const vFbo = createFramebuffer(gl,{informat:gl.RGBA16F, type:gl.FLOAT});
Copy the code
  • bindFramebufferInfo
  • drawBuffer
/** * ping-pong frame cache */
gl.useProgram(pProgram.program);
for(let i=0; i < 6; i++){
    bindFramebufferInfo(gl, i%2 ? hFbo:vFbo);
    setBuffersAndAttributes(gl, pProgram, pVao);
    setUniforms(pProgram,{
        horizontal: i%2? true:false.image: i == 0 ? fbo.textures[1]: i%2 ? vFbo.textures[0]: hFbo.textures[0].// The first ping-pong frame cache is empty, so the light texture is passed in the first time
    });
    drawBufferInfo(gl, pVao);
}
Copy the code

THREEJS Gaussian blur

varying vec2 vUv;
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
Copy the code
#define SIGMA 3
#define KERNEL_RADIUS 3
varying vec2 vUv;
uniform sampler2D colorTexture;
uniform vec2 texSize; // This is the size of the map is usually screen space
uniform vec2 direction;//1, 0,1 is horizontal 0,1 is vertical 3 times
float gaussianPdf(in float x, in float sigma) { // Gaussian blur
    return 0.39894 * exp( 0.5 * x * x/( sigma * sigma))/sigma;
}
void main() {
    vec2 invSize = 1.0 / texSize;  
    float fSigma = float(SIGMA);
    float weightSum = gaussianPdf(0.0, fSigma); / / 0.0
    vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum; // This is the original 0.0
    for( int i = 1; i < KERNEL_RADIUS; i ++ ) { // There is only one direction
        float x = float(i);
        float w = gaussianPdf(x, fSigma); // Gaussian ratio
        vec2 uvOffset = direction * invSize * x; // Vec2 offset direction
        vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb; //
        vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb; //
        diffuseSum += (sample1 + sample2) * w; / / add
        weightSum += 2.0 * w; The weightSum is also added
    }
    gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
}
Copy the code

Other sites gaussian blur

#version 300 es
precision highp float;
uniform sampler2D image;
uniform bool horizontal;
in vec2 texcoord;
out vec4 FragColor;
const float weight[5] = float[] (0.2270270270.0.1945945946.0.1216216216.0.0540540541.0.0162162162); Why are these numbers not clear

void main() {
    vec2 tex_offset = vec2(1.0 / float(textureSize(image, 0)));// The size of each pixel
    vec3 result = texture(image, texcoord).rgb * weight[0];
    if (horizontal) {
        for (int i = 0; i < 5; ++i) {
            result += texture(image, texcoord + vec2(tex_offset.x * float(i), 0.0)).rgb * weight[i];
            result += texture(image, texcoord - vec2(tex_offset.x * float(i), 0.0)).rgb * weight[i]; }}else {
        for (int i = 0; i < 5; ++i) {
            result += texture(image, texcoord + vec2(0.0, tex_offset.y * float(i))).rgb * weight[i];
            result += texture(image, texcoord - vec2(0.0, tex_offset.y * float(i))).rgb * weight[i];
        }
    }
    FragColor = vec4 (result, 1.0);
}
Copy the code