I have a strange problem that I can't figure out when trying to do blending in WebGL. Black is rendered fully transparent , and everything with shades of grey in it is rendered also semi transparent. I have set it to use the alpha channel as the source for transparency, and in some respect it works, every thing that isn't black/grey is rendered differently when changing the alpha value. but even when I set the alpha to 1, black is still displayed transparent.
This is how I enable transparency:
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE);
this.gl.enable(this.gl.BLEND);
this.gl.disable(this.gl.DEPTH_TEST);
And the part of the shader that does transparency:
gl_FragColor = vec4(texColor.rgb * vLightWeight, texColor.a * uAlpha);
where texColor is the texture color that is being sampled, vLightWeight is the shadowing that is being calculated in the vertex shader, and uAlpha the uniform which I use for transparency.
I think you should have gl.ONE_MINUS_SRC_ALPHA where you currently have gl.ONE.
gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
Related
I am trying to add some blur brush stroke with OpenCV
If I use cv.add or cv.addweighted, I only got half of the red color (look pink),
but I want the red to cover the underlying picture, not blend.
If I use copyto or clone, I can't get the blur edge, so how should I do it ??
The background of your brush image is black. If you were in photoshop and set that brush layer's blend mode to screen the red gradient would show through and the black background would become transparent.
Here are a couple of relevant posts:
How does photoshop blend two images together?
Trying to translate formula for blending mode
Alternatively, if you're using OpenCV 3.0 you try using seamlessClone.
I got a trick to do it simply copy the area to a new mat, then draw a circle and blur it on the new mat, and use addWeighted to blend it to the image with whatever alpha I need.
Mat roi = myImage.submat(y-20, y+20, x-20, x+20);
Mat mix = roiB.clone();
Imgproc.circle(mix, new Point(20, 20), 12, color, -1);
Core.addWeighted(mix, alpha, roiB, beta, 0.0, mix);
Imgproc.GaussianBlur(mix, mix, new Size(21, 21), 0);
mix.copyTo(roiB);
I have a green button with a white icon and title. I am trying to use the GPUImage library that I just learned about to change the green to blue, but keep the white as white. Here is my code:
UIImage *inputImage = [UIImage imageNamed:#"pause-button"];
GPUImageFalseColorFilter *colorSwapFilter = [[GPUImageFalseColorFilter alloc] init];
colorSwapFilter.firstColor = (GPUVector4){0.0f, 0.0f, 1.0f, 1.0f};
colorSwapFilter.secondColor = (GPUVector4){1.0f, 1.0f, 1.0f, 1.0f};
UIImage *filteredImage = [colorSwapFilter imageByFilteringImage:inputImage];
There are 2 problems:
The resulting image is a pale purple instead of blue. Almost as though the blue is being overlaid with a 50% opacity or something and the original green was set to white.
The button isn't a rectangle (more of an oval), and the transparent areas of the PNG (the corners) are now filled in with a semi-transparent blue (well, pale purple actually). Basically the button is now a rectangle with a darker oval in the middle.
Am I using this filter incorrectly? Do I have to do some pre-processing before using this filter?
The GPUImageFalseColorFilter is probably not what you want to use to alter the hue of something. It's a reimplementation of the filter by the same name in Core Image, which first converts an image to its luminance and then replaces white with one color and black with another. Instead of a grayscale, you get a variable mix between these colors. I also don't think it respects alpha channels at present.
You might want something more like a GPUImageHueFilter (again, not sure if it respects alpha) or a GPUImageLookupFilter. You might need to build a custom filter to locate a color within a certain threshold (look at the chroma keying ones for that) and to replace that with your given color. Hue changes might do the job, though.
When I draw semitransparent textures with OpenGL, it looks like that I get them blended with EAGLView backgroundColor.
((EAGLView*)my_view).backgroundColor = [UIColor redColor];
opaque property is set to YES.
Now that image looks red, when I change to black it turns to gray(blended with black), to white it becomes white (even semitransparent black).
What can it be?
my blending function setting is: src BFP_SRC_ALPHA, dest ONE_MINUS_SRC_ALPHA
I tried also(possibly something like premultiplied alpha):
src ONE dest GL_ONE_MINUS_SRC_ALPHA - it gives good result, but I get problems when drawing semitransparent quad(not texture).
the problem is in premultiplied alpha use src ONE dest GL_ONE_MINUS_SRC_ALPHA, and args must be with premultiplied alpha too glColor4f(r*a, g*a, b*a, a)
I'm trying to get create an inverse of an image, as part of an app.
I have implemented some image processing using openGL, following the GLImageProcessing demo from Apple.
My image is loaded from a .jpg, and loaded to a texture. I can happily modify contrast and brightness.
However, I am having unsatisfactory results when trying to create an inverse image (swap black for white).
I've tried a few approaches, but nothing works well on the device.
so far, I have tried;
glBlendFunc(GL_ONE_MINUS_DST_COLOR, GL_ZERO);
this works well in the simulator, but on the device produces unstable results.
I have also tried;
glBlendFunc(GL_ONE_MINUS_SRC_COLOR, GL_ONE_MINUS_DST_COLOR);
this creates results as before.
Finally, I have tried;
glLogicOp(GL_XOR);
this simply toggles between the image, and a black screen.
Can you suggest a (relatively) simple solution to invert my image?
How about this shader:
void main() {
vec4 color = texture2D(texture, textureCoordinate);
float inverted = 1.0 - color.r;
vec4 inverted_vec = vec4( vec3(inverted), 1.0);
gl_FragColor = clamp(inverted_vec, 0.0, 1.0);"
};
If you can use OpenGL ES 2.0 (which you should be able to do safely, given the tiny fraction of 1.1-only devices in the wild), a simple way to do this would be to use my open source GPUImage framework and its GPUImageColorInvertFilter.
The following code loads your image from disk, creates a color invert filter, applies that filter, and then spits out a UIImage for you to use:
UIImage *inputImage = [UIImage imageNamed:#"image.jpg"];
GPUImageColorInvertFilter *stillImageFilter = [[GPUImageColorInvertFilter alloc] init];
UIImage *quickFilteredImage = [stillImageFilter imageByFilteringImage:inputImage];
If you want to just display the resulting image to the screen, or use it as a texture, you can instead direct the filter to a GPUImageView or GPUImageTextureOutput to avoid some Core Graphics overhead (due to the generation of the output UIImage).
If you have no transparency I suggest you first draw a white rectangle where the image should be (no texture, just pure white color). Then use glBlendFunc(GL_ZERO, GL_ONE_MINUS_SRC_COLOR) and disable the alpha channel glColorMask(GL_TRUE, GL_TRUE, GL_TRUE, GL_FALSE) and draw the grayscale texture. This should give you the desired effect if you have no need for transparency, in other case you should do the same using a FBO with a texture attached. Also after you draw the texture reenable the alpha channel.
How can I get rid of the white layer drawn under the bitmap images by Delphi/Windows when Glyph property of TBitBtn is used. I just want to draw the image, no shadow under it, no other layers that comes automatically. I am inserting round shaped 24 bit bitmap images.
Since you have a 24-bit bitmap, there is no alpha transparency, so Delphi uses the bottom left pixel of the image to determine the transparent color. All pixels with that color are treated as transparent. The part of the image with the shadow effect is not an exact match for the designated transparent color, so those pixels are painted normally, just like the rest of the image.
The shadow appears white because there was a white background in the graphic program when your designer applied the shadow effect.
Either edit the image to remove the shadow, or use a 32-bit image with alpha transparency. You'll be hard-pressed to apply alpha transparency after the fact. Fix the source image.