I want to customize the reflection from the FlowCover (Cover Flow remake) sample code. Now, the reflection (a texture) is only transparent but I want it to have a gradient so that the texture fades to be completely transparent.
How would you achieve this effect with OpenGL? This is the code that handles the textures.
glPushMatrix();
glBindTexture(GL_TEXTURE_2D,fcr.texture);
glTranslatef(trans, 0, 0);
glScalef(sc,sc,1.0);
glMultMatrixf(m);
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
// reflect
glTranslatef(0,-2,0);
glScalef(1,-1,1);
glColor4f(0.5,0.5,0.5,0.5);
glDrawArrays(GL_TRIANGLE_STRIP,0,4);
glColor4f(1,1,1,1);
glPopMatrix();
Any hints or key words are welcome.
Thanks a lot.
My solution to this problem was to remove openGL reflection and to path image with reflection and gradient to FlowCower. Here is a nice example on creating image reflection.
It's a good idea to draw reflection with gradient way. ^_^
I think you can put a light source, and change the normal vector of project view. The lighting source will make some gradient effect.
You might want to look into multitexturing. You can combine the base texture with a gradient texture in a way that uses the color of the first and the alpha values of the second. Take a look at the glTexEnvi command.
Related
i have two images which are overlapping on each other.(the way in which cards are placed on top of each other)
now if i move my finger over the top most image that portion of the image should become transparent.(opacity of that part should become 0).
i am new to OpenGL ES development.
kindly help me out or give me any suggestion to complete this functionality.
Thanks in advance
You're going to need render-to-texture using Framebuffer Objects (FBOs). Render to the desired texture, but only to the alpha channel, which is done using glColorMask (With it you can mask all color channels except alpha), and then draw the pattern into the alpha channel, setting alpha to 0.0, then display the textures as normal.
I just did something similar, and I found a solution in GLBlending:
if (eraseMode) {
glBlendFunc(1.0,0.0);
}
else {
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
}
Some cosmetics are needed around this, but it's a simple solution that fits basic needs.
What's the best choice when trying to mask a texture
like ColorSplash or other apps like iSteam, etc?
I started learning OPENGL ES like... 4 days ago (I'm a total
rookie) and tried the following approach:
1) I created a colored texture2D, a grayscale version of the first
texture and a third texture2D called mask
2) I also created a texture2D for the brush... which is grayscale and
it's opaque (brush = black = 0,0,0,1 and surroundings = white =
1,1,1,1). My intention was to create an antialiased brush with smooth
edges but i'm fine with a normal one right now
3) I searched for masking techniques on the internet and found this
tutorial ZeusCMD - Design and Development Tutorials : OpenGL ES Programming Tutorials - Masking
about masking. The tutorial tells me to use blending to achieve
masking... first draw colored, then mask with
glBlendFunc(GL_DST_COLOR, GL_ZERO) and then grayscale with
glBlendFunc(GL_ONE, GL_ONE) ... and this gives me something close to
what i want... but not exactly what i want. The result is masked but
it's somehow overbright-ed
4) For drawing to the mask texture i used an extra frame buffer object (FBO)
I'm not really happy with the resulting image (overbright-ed picture)
nor with the speed achieved with this method. I think the normal way
was to draw directly to the grayscale (overlay) texture2D affecting
only it's alpha channel in the places where the brush hits. Is there a
fast way to achieve this? I have searched a lot and never got an
answer that's clear and understandable. Then, in the main draw loop I
could only draw the colored texture and then blend the grayscale ontop
with glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA).
I just want to learn to use OPENGL ES and it's driving me nuts because i can't get it to work properly. An advice, a link to a tutorial would be much appreciated.
For something that will actually work on the iPhone, try texture combiners.
I used them to mask an RGBA texture against another, transformed alpha texture.
This was for generating a complicated shadow in the absence of a stencil buffer,
but your situation doesn't seem so different.
Note that this link explains combiners in terms of fragment shaders, which works well.
Unfortunately the combiners are more complicated than their shader counterparts.
I'm familiar with some of the basics of Quartz 2D drawing, like drawing basic shapes and gradients and so on, but I'm not sure how to draw a shape with a "beveled" look, like this:
beveled circle http://www.shaggyfrog.com/junk/beveled-circle.jpg
Essentially we've got a shine on one corner, and maybe some shading in the opposite corner. I think -- I didn't make this image, although I'd like to be able to approximate it.
Any ideas? This is on the iPhone, and I'd like to use built-in frameworks and avoid any external libraries if at all possible.
There are really only a few useful approaches you can take to this problem.
Use your basic shape drawing techniques and combine them with a one or more gradient curves. (Implicit object construction) with curves/fills.
Custom build a UIView and build the object up per-pixel in a drawRect.
Pre-render your beveled/shadowed shapes and load them into an image and blit them into a UIImageView.
I have some PNGs with transparent backgrounds that I would like to add shadows to programatically. I've seen examples of adding shadows to square objects, but haven't seen any with complex shapes.
So the two steps I think I'd have to do would be:
Isolate the PNG shape
Draw a shape behind the PNG that is blurred, faded, and offset.
I don't have much experience with drawing within Cocoa, so any insight on where to begin would be much appreciated!
Screenshot:
(source: iworkinprogress.com)
Simplest way is to call CGContextSetShadow in your drawRect: before you draw the images.
- (void)drawRect:(CGRect)invalidRect
{
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSetShadow(c, CGSizeMake(5.0f, 5.0f), 5.0f);
[myImage drawAtPoint:CGPointMake(50.0f, 50.0f)];
}
I found this category to be very useful: UIImage+Shadow.m
https://gist.github.com/kompozer/387210
I am not really a graphics person, but what about this: if you have a mask for these images, or if you can create one programatically, then you can probably use a blur function to add a shadow like effect.
Experiment in Photoshop/Acorn/Pixelmator?
Since you want shadows like they all have the same light source... it seems like you might actually be better off with an OpenGL view, that casts a light from above and the images would sit slightly above a flat plane to cast a shadow on. I'd look for 3D OpenGL frameworks that would let you add things pretty easily...
I've got a pretty simple situation that calls for something I don't know how to do without a stencil buffer (which is not supported on the iPhone).
Basically, I've got a 3D model that gets drawn behind an image. I want an outline of that model to be drawn on top of it at all times. So when it's behind the image, you can see its outline, and when its not behind the image you can see a model with an outline.
An option to simply get an outline working would be to draw a wireframe of the model with thick lines and a z offset, then draw the regular model on top of it. The problem with this is obviously that I need the outline to be drawn after the model.
This method needs to be fast, as I'm already pushing a lot of polygons around - full-on drawing of the model again in one way or another is not really desired.
Also, is there any way to find out whether my model can be seen at the moment? That is, whether or not the image over top has an opaque section at the position of the model, or if it has a transparent section. If I can figure this out (again, very quickly), then I can just draw a wireframe instead of a textured model, depending on if it's visible.
Any ideas here? Thanks.
most of the time you can re-create stencil effects using the alpha channel and render-to-texture if you think about it ...
http://research.microsoft.com/en-us/um/people/hoppe/proj/silmap/ Is a technical paper on the matter. Hopefully there's an easier way for you to accomplish this ;)
Here is a general option that might produce the effect you want (I have experience with OGL, but not iPhone):
Method 1
Render object to texture as pure white, separate from scene. This will produce a white mask where the object would be rendered.
Either draw this directly to the screen with alpha fade for a "full object", or if you're intent on your outlines, you could try rendering THIS texture to another texture, slightly enlarged, then render the original "full object" shading over this enlarged texture as pure black. This will create a sort of outline texture that you could render over the top of the scene.
Method 2
Edit out. Just read the "no stencil buffer" stipulation.
Does that help?