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.