What I'm trying to do is have a background image, for sake of simplicity, lets say it's a picture of the front of a house. Then, I want to have a red ball move from window to window.
**I want to have a background picture, and a picture on top of it.
**I then want to be able to tell the top picture EXACTLY where to go.
How can I do this?
I'm just beginning to learn about animations in Android, and have not yet run across any way to do this.
There are two routes to animation in android: Canvas and OpenGL ES.
I would recommend OpenGL for anything requiring smoothness and speed, like a moving ball.
You should create a view using the helper class GLSurfaceView
http://android-developers.blogspot.com/2009/04/introducing-glsurfaceview.html, and implement a Renderer.
I assume you have the images saved in your res/drawable folders, in a format like png and the ball file contains an alpha channel.
You can see many tutorials online, but basically you need to load your background image and your ball resource at onSurfaceCreated and store it in a texture using GLUtils.texImage2D.
In the onDrawFrame method, you should set up a 2D projection such as glOrtho2D, then draw the background.
Then just before you draw the ball texture, you can use the glTranslate(x,y,0) function to move the ball over the house. Use an alpha blend for the ball:
glBlendFunc(GL_SRC_ALPHA, GL_SRC_ONE_MINUS_ALPHA);
glEnable(GL_BLEND);
Unfortunately writing in OpenGL isn't as straightforward as you might hope. Everything is done with 3D coordinates, despite the fact you want only a 2D image. But hopefully this gives you enough info to google for good exmaples, which are abundant!
Related
I'm writing an android app using OpenCV for my masters that will be something like a game. The main goal is to a detect a car in selected area. The "prize" will be triggered randomly while detecting cars. When the user will hit the proper car I want to display a 3D object overlay on the screen and attach it to the middle of the car and keep it there so when the user will change the angle of his view on the car, the object will also be seen from diffrent angle.
at the moment I have EVERYTHING beside attaching the object. I've created detection, I'm drawing the 3D overlay, I've created functions that allow me to rotate the camera etc. BUT I do not have any clue how can I attach the overlay to the specific point. Cause I don't have this I have no point to recalculate the renderer to change the overlay perspective.
Please, I really need some help, even a small idea will be fine:
How can I attach the overlay to the specific in real world
(Sorry, I couldn't comment. Need at least 50 points to do that ... :P )
I assume your image of the car is coming from a camera feed and you are drawing 3d car in opengl. If so, then you can try this:
You set the pixel format of the opengl layer as RGBA_8888, so that you can set the background of the opengl camera as a transparent color.
You take a relative layout as layout of your activity.
first you add the opencv camera layout to it as full height and width.
then you add opengl layer as full height and width.
you get the position of the real car from opencv layer as pixel value or something you did.
then scale it to your opengl parameters so that you can draw it on the right spot.
it worked for me. hope it works for you too.
I am developing an augmented reality app, that should render a 3D model. So far so good. I am using Vuforia for AR, libgdx for graphics, everything is on Android, works like charm...
Problem is, that I need to create a "window - like" effect. I literally need to make the model look like a window you can look through and see behind it. That means I have some kind of wall-object, which has a hole in it(a window). Through this hole, you can see another 3D model behind the wall.
Problem is, I need to also render the video background. And this background is also behind the wall. I can't just turn of blending when rendering the wall, because that would corrupt the video image.
So I need to make the wall and everything directly behind it transparent, but not the video background.
Is such marvel even possible using only OpenGL?
I have been thinking about some combination of front-to-end and back-to-front rendering: render background first, then render the wall, but blend it only into the alpha channel (making video visible only on pixels that are not covered by wall), then render the actual content, but blend it only into the visible pixels (that are not behind the wall) and then "render" the wall once more, but this time make everything behind it visible. Would such thing work?
I can't just turn of blending when rendering the wall
What makes you think that? OpenGL is not a scene graph. It's a drawing API and everything happens in the order and as you call it.
So order of operations would be
Draw video background with blending turned off.
The the objects between video and the wall (turn blending on or off as needed)
Draw the wall, with blending or alpha test enabled, so that you can create the window.
Is such marvel even possible using only OpenGL?
The key in understanding OpenGL is, that you don't think of using it to setup a 3D world scene, but instead use it to draw a 2D picture of a 3D world (because that's what OpenGL actually does). In the end OpenGL is just a bit smarter brush to draw onto a flat canvas. Think about how you'd paint a picture on paper, how you'd mask different parts. And then you do that with OpenGL.
Update
Ohkay, now I see what you want to achieve. The wall is not really visible, but a depth dependent mask. Easy enough to achieve: Use alpha testing instead of blending to produce the window in the depth buffer. Or, instead of alpha testing you could just draw 4 quads, which form a window between them.
The trick is, that you draw it into just the depth buffer, but not into the color buffer.
glDepthMask(1);
glColorMask(0,0,0,0);
draw_wall();
Blending will not work in this case, since even fully transparent fragments will end up in the depth buffer. Hence alpha test. In fixed function OpenGL glEnable(GL_ALPHA_TEST) and glAlphaFunc(…). However on OpenGL-ES2 you've to implement it through a shader.
Say you've got a single channel texture, in the fragment shader do
float opacity = texture(sampler, uv).r;
if( opacity < threshold ) discard;
I need to create an OpenGL ES app (preferably using libGDX) that shows a spinning texture that has a reflection of some sort beneath it.
I've searched the web, and found some very old tutorials of how to do it in OpenGL.
I'm wondering if there is an easy way to do it on libGdx or on Android, and if I'm forced to use OpenGL 2 instead of 1.x.
Is there any tutorial of achieving reflection of a texture in Java, Android or libgdx?
I've made some small progress, but I still need more help.
Currently the code of showing the texture is based on this link, and I've modified it so that it would show the spinning image and its reflection.
However, I have some bad issues with it:
it's almost like a perfect mirror. I need to put some kind of special effect so that it has some kind of gradient effect on it.
the images might go over one another, and they are not transparent. If I move the reflection a bit closer to the spinning image, I could see that they overlap each other.
The code is here:
public class GlRenderer implements Renderer
#Override
public void onDrawFrame(final GL10 gl)
{
gl.glClear(GL10.GL_COLOR_BUFFER_BIT|GL10.GL_DEPTH_BUFFER_BIT);
square.draw(gl);
// draw normal spinning image
gl.glLoadIdentity();
gl.glColor4f(1f,1f,1f,1f);
gl.glTranslatef(0.0f,0.0f,-5.0f);
gl.glRotatef(rotationAngle++,0.0f,0.0f,1.0f);
square.draw(gl);
// draw reflection
gl.glLoadIdentity();
gl.glColor4f(0.5f,0.5f,0.5f,1.0f);
gl.glTranslatef(0.0f,-1.0f,-3.0f);
gl.glRotatef(-80+180,1.0f,0.0f,0.0f);
gl.glRotatef(rotationAngle,0.0f,0.0f,1.0f);
}
Is there anyone that could help me on this?
For a perfect effect you will need to do 2 things.
Assuming you used Image class to render it,
first, is to put the same image bellowthe original one and use the scaleY to flip it vertically.
this will create reflection effect, but you will need to apply same things that you applied to first image to the second one, like movement, rotation, whatever you did to it.
Besides that you will probably need your reflection image to fade out like a gradient, if you are doing everything on a solid not moving background, you can create a third image which is a gradient png from transparent to the color of your background, and put it over the reflection image. If you have a dynamic background, then you will probably need to use shaders (sorry, openGL 2 only). You can read more on how to write custom shaders here: http://blog.josack.com/2011/08/my-first-2d-pixel-shaders-part-3.html (A great tutorial)]
Hope that helps. There might be other solution I don't know about, so keep researching, but this is what came to my mind.
I want to implement an effect that, showing a picture on a bubble surface with the picture looks like surrounding the bubble surface. But I don't know how to do this kind of things...
I am doing it in Android platform, should I use OpenGL ES for this ? Or just some 2D transformation can achieve this effect ?
One more question is, I want to create many interesting graphics effects like the PhotoShop's various filter, is there any books/articles I can refer for this kind of things ? Is this kind of work belongs to the "Digital Image Processing" field or some other computer graphics related fields ?
Or just some 2D transformation
This effect is a nonlinear transformation, so doing through the 2D (linear) transformations being available will not work. You can do it using OpenGL by numerous ways. I'm currently thinking about some easy to understand way to convey, what you need to do. Basically you need to implement some kind of refraction or nonlinear radial warp.
Say p is the center of your bubble (in 2D), and r the position relative to p, then the undistorted picture is given by r+p. Now you want to distort it toward the edges. A parabolic distortion comes to mid, i.e. instead of r+p you'd show the pixel r + (|p|^2)*p/|p|
I want to make brushes displayed in below image for drawing application. Which is a suitable method - Open GL or Canvas & How can we implement it?
I'd say Canvas, as you'll want to modify an image. OpenGLES is good for displaying images, but does not (as far as I know) have methods for modifying its textures (unless you render to a texture that then render to screen with some modifications, which is not always so effective).
Using the Canvas you will have the methods for drawing your brush-strokes onto the Bitmap you're painting on, in GLES you would have to modify a texture (by using a canvas) and then upload that to the GPU again, before it could be rendered, and the rendering would most likely just consist of drawing a square with your texture on it (as the fillrate for most mobile GPUs are quite bad, you don't want to draw the strokes separately).
What I'm trying to say is; The most convenient way to let the user draw on an openGLES surface would be by creating a texture by drawing on a Canvas.
But, there might still be some gain in using GL for drawing, as the Canvas-operations can be performed off-screen, and you can push this data to a gl-renderer to (possibly) speed up the on-screen drawing.
However; if you are developing for Android 3.x+ you should take a look at RenderScript, (which I personally have never had a chance to use), but seems like it would be a good solution in this case.
Your best solution is going to be using native code. That's how Sketchbook does it. You could probably figure out how by browsing through the GIMP source code http://www.gimp.org/source . Out of Canvas vs OpenGL, Canvas would be the way to go.
It depends. if you want to edit the image statically, go with canvas. But if you want after brushing the screen, to have the ability to edit, scale, rotate, it would be easier with opengl.
An example with opengl: Store the motion the user do with touchs. create a class that store a motion and have fields for size, rotation etc. to draw this class, just make a path of the brush image selected following the stored motion.