OpenGL transparent background Xamarin - ios

I'm building an application who stream the content of the camera on the screen. Now I want to add a OpenGL element on the screen. My OpenGL element is an arrow that I create in a other class, that inherit GLKView call TriangleView. My ViewController is a GLKViewController. I add my Triangle View like this
View = triangleView = new TriangleView (View.Frame);
That draw my GLKView, but I would like to have a transparent background for this GLKView in order to see my camera stream. I'm beginning in OpenGL so I don't really know how to do that. I found some post that say to put an alpha on itGL.ClearColor (1.0f, 0f, 0f, 0f);,in the Draw function of my GLKView, but this doesn't work.
Any help or comment is welcome.
Thank in advance

You may also need to set the GLKView's opaque property to NO so the alpha blending can work.

Related

UIImage behind GLKView

i'm trying to create a signature with touch inputs using a GLKView.
But now i need a UIImage to be below the signature.
Short: I want to draw lines above a UIImage using a custom GLKView.
The problem is that my line gets drawn below the image every time, no matter if i set opaque to NO and insertSubview: belowSubview..
Otherwise i tried with the help of textures but i have no idea how to do this..
I do not want to use a GLKViewController if it is possible ;)
Thanks in advance!
Update:
I found my problem and now i get the result that i wanted to have.
Inside the GLKView in the Constructor i initiate the EAGLContext.
I forgot to set the context to self.
context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
if (context) {
self.opaque = NO; // set view transparent
self.context = context; // set the context to itself
}
Although setting opaque to NO is not a good solution it is the only efficient solution for my task.
There are a couple of ways worth looking at to do this.
One is to look at view containment instead of layering — make the GLKView a subview of the view you're drawing a UIImage in.
The other is to draw the image in your GLKView using OpenGL ES. It's a little more work, but not too hard if you look over the documentation and the answers already here on SO. And it has some extra benefits: since both the background image and your drawing are going into the same framebuffer, you can control blending in GL. Here's some tips for getting started:
Use GLKTextureLoader to get your image into an OpenGL ES texture.
Set up a GLKBaseEffect instance for drawing with your texture. Don't forget to tell it to prepareToDraw.
Draw a quad using the texture and effect. This answer has a pretty decent starting point for doing that.
After drawing the background image, draw your signature and it'll be on top of the image.

how to draw a string in a GLKView mixed with OpenGL

I want to be able to draw a string over the OpenGL window in my iOS app. What is the easiest way to do this? I know you can define a texture with letters and draw parts of that texture to create text - but this is quite a bit of work for what I am doing. I just want to be able to draw a simple string in the upper left of the window.
Is it possible to mix opengl with 2d drawing commands? I'm using GLKView, so I suspect it involves adding some code to drawInRect.
I am using OpenGL ES 1.1 for this.
Found a solution for this. If you add a label as subview to the GLKView then you can draw text over the opengl.

Replicating UIView drawRect in OpenGL ES

My iOS application draws into a bitmap (same size as my view) using Core Graphics. I want to push updated regions of the bitmap to the screen. (I've used the standard UIView drawRect method but I have some good reasons to switch to OpenGL).
I just want to replicate the same behavior as UIView/CALayer drawRect but in an OpenGL view. Essentially I would like to update dirty rectangles on my OpenGL view. Nothing more.
So far I've been able to create an OpenGL ES 1.1 view and push my entire bitmap on screen using a single quad (texture on a vertex array) for each update of my bitmap. Of course, this is pretty inefficient since I only need to refresh the dirty rectangle, not the whole view.
What would be the most efficient way to do that in OpenGL ES? Should I use a lattice of quads and update the texture of the quads that intersect with my dirty rectangle? (If I were to use that method, should I use VBO?) Is there a better way to do that?
FYI (just in case), I won't need rotation but will need to scale the entire OpenGL view.
UPDATE:
This method indeed works. However, there's a bug in iOS5.x on retina display devices that produces an artifact when using single buffering. The problem has been fixed in iOS6. I don't yet have a work around.
You could simply just update a part of the texture using TexSubImage, and redraw your standard full-screen quad, but with the scissor rect beeing set (glScissor) to the "dirty" part. The GL will then not draw any fragments outside this rect.
For this to work, you must of course use single buffering.

How to set Background image in GLKViewController iPhone OpenGLES?

I'm drawing a line using OpenGL on the iPhone. I used GLView and GLKView delegates to draw the line. But now I want to set a background image to GLKViewController, and on the background image, I want to draw the line. I have tried to set a background image using UIImageView, but the image is appearing above on the (GLKView) drawn line.
How can I set a background image to the GLKViewController?
The easiest way should be to add additional view with background image (such as you proposed - but you need to set it behind OpenGL view). Try this:
[RootViewController.view addSubview: BackgroundView belowSubview: OpenGLView];
OpenGLView.opaque = NO;
But this will bring some FPS penalty (Apple recommends to use opaque OpenGL view for performance reason). More correct approach is to draw background via OpenGL as fullscreen quad.
I just want to state that the accepted answer is a very bad one... You will lose an almost immediate 20fps even on the newer devices (iPhone 5, iPad 2 & newer) by turning off opaque. The performance penalty is horrible and should not be taken lightly.
You can set a background in OpenGL and keep your opaque. Convert the UIImage to an OpenGL texture and render it. Depending on your OpenGL environment, this can be done a number of ways easily.

Make an EAGLView transparent?

It's possible to place in a UIViewController object an EAGLView object and make the background of EAGLView transparent in order to view what is behind?
Thanks.
-UPDATE----
I've tried which appears in this post. But still the layer of the EAGLView appears like a black square. :(
Any idea why this is not working for me?
openGLView.opaque = NO
Also pay attention on correct opacity in alpha channel of OpenGL framebuffer.
And pay attention on Tark answer about performance drop.
There is no such thing as an EAGLView, but it is definitely possible to have a CAEAGLLayer with a transparent background on top of UIKit content. It is not recommended however, from the docs:
Because an OpenGL ES rendering surface is presented to the user using Core Animation, any effects and animations you apply to the layer affect the 3D content you render. However, for best performance, do the following:
Set the layer’s opaque attribute to TRUE.
Set the layer bounds to match the dimensions of the display.
Make sure the layer is not transformed.
Avoid drawing other layers on top of the CAEAGLLayer object. If you must draw other, non OpenGL content, you might find the performance cost acceptable if you place transparent 2D content on top of the GL content and also make sure that the OpenGL content is opaque and not transformed.
When drawing landscape content on a portrait display, you should rotate the content yourself rather than using the CAEAGLLayer transform to rotate it.

Resources