Is possible to add a sampler2d uniform inside postprocess plugin?

  • Hi,

    I am writing a postprocess plugin to act as a filter based on "postprocessing_multipass_blur.js"


    I need to add a sampler2d uniform to the fragment shader like below:

    function get_shader_src()
    {
    return ""+
    "precision mediump float;"+
    "uniform sampler2D sm;"+ // sm = the screen as input texture sampler
    "uniform vec2 sz;"+ // sz = screen size in pixels (sz.x = width, sz.y = height)
    "uniform float blur;"+ // a custom uniform
    "uniform vec2 dir;"+ // a custom uniform
    "uniform sampler2D sm2;"+ // sm2 = filter lookup table
    "varying vec2 tx;"+ // tx = the texture coordinates (0.0,0.0 to 1.0,1.0)
    "const highp vec3 W = vec3(0.299,0.587,0.114);"+
    "void main()"+
    "{"+
    "vec3 texel = texture2D(sm, tx).rgb;"+
    "texel = vec3(dot(vec3(0.3, 0.6, 0.1), texel));"+
    "texel = vec3(texture2D(sm2, vec2(texel.r, .16666)).r);"+
    "gl_FragColor = vec4(texel, 1.0);"+
    "}";
    }

    Here "sm2" is a sampler2D uniform.

    I know it requires to load a image as a texture, and pass to to the "sm2" handler, I tried but never success.


    function loadTexture(gl, url) {
    const texture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, texture);

    // Because images have to be download over the internet
    // they might take a moment until they are ready.
    // Until then put a single pixel in the texture so we can
    // use it immediately. When the image has finished downloading
    // we'll update the texture with the contents of the image.
    const level = 0;
    const internalFormat = gl.RGBA;
    const width = 1;
    const height = 1;
    const border = 0;
    const srcFormat = gl.RGBA;
    const srcType = gl.UNSIGNED_BYTE;
    const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
    width, height, border, srcFormat, srcType,
    pixel);

    const image = new Image();
    image.onload = function() {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
    srcFormat, srcType, image);

    // WebGL1 has different requirements for power of 2 images
    // vs non power of 2 images so check if the image is a
    // power of 2 in both dimensions.
    if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
    // Yes, it's a power of 2. Generate mips.
    gl.generateMipmap(gl.TEXTURE_2D);
    } else {
    // No, it's not a power of 2. Turn off mips and set
    // wrapping to clamp to edge
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    }
    };
    image.src = url;

    return texture;
    }

    Is there any idea? Thanks in advance.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!