OpenGL Texture Mapping distorts image - c#

So, I'm just trying to draw a texture to two triangles that are the same size as the viewport, but it breaks up the image and distorts it, I have tried resizing the image file and everything, but nothing seems to work. Below is the code that maps the texture and draws the triangles.
public void Render()
{
Texture texture = _textureManager.Get("splash");
Gl.glEnable(Gl.GL_TEXTURE_2D);
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);
double height = 720;
double width = 1280;
double x = 0;
double y = 0;
double z = 0;
float topUV = 0;
float bottomUV = 1;
float leftUV = 0;
float rightUV = 1;
Gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);
Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(leftUV, topUV);
Gl.glVertex3d(x - width, y + height, z);
Gl.glTexCoord2d(rightUV, topUV);
Gl.glVertex3d(x + width, y + height, z);
Gl.glTexCoord2d(leftUV, bottomUV);
Gl.glVertex3d(x - width, y - height, z);
Gl.glTexCoord2d(rightUV, topUV);
Gl.glVertex3d(x + width, y + height, z);
Gl.glTexCoord2d(rightUV, bottomUV);
Gl.glVertex3d(x + width, y - height, z);
Gl.glTexCoord2d(leftUV, bottomUV);
Gl.glVertex3d(x - width, y - height, z);
}
Gl.glEnd();
}
Here is the original image:
And here's the result:
The image is 1920 x 1080, and the viewport is 1280 x 720, but I'm not too sure that matters because I have tried resizing the image and nothing seems to work.

Alright, so I ended up cutting the image in half down the center and just loading two images, and then I used four triangles. This may not be the most elegant solution, but it works just fine. I'm guessing it had to do with the dimensions of the image. (I also changed the parameters for the texture coordinates and all the vertices so that it is more straight forward in the context of Stack Overflow).
public void Render()
{
//Draw Left Half
Texture texture = _textureManager.Get("splash1");
Gl.glEnable(Gl.GL_TEXTURE_2D);
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);
Gl.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
Gl.glClear(Gl.GL_COLOR_BUFFER_BIT);
Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(0, 0);//top left
Gl.glVertex2f(-1280 , 720);
Gl.glTexCoord2d(1, 0);//middle top
Gl.glVertex2f(0, 720);
Gl.glTexCoord2d(0, 1);//bottom left
Gl.glVertex2f(-1280, -720);
Gl.glTexCoord2d(0, 1);//bottom left
Gl.glVertex2f(-1280, -720);
Gl.glTexCoord2d(1, 0);//middle right top
Gl.glVertex2f(0, 720);
Gl.glTexCoord2d(1, 1);//bottom middle
Gl.glVertex2f(0, -720);
}
Gl.glEnd();
//Draw Right Half
texture = _textureManager.Get("splash2");
Gl.glBindTexture(Gl.GL_TEXTURE_2D, texture.Id);
Gl.glBegin(Gl.GL_TRIANGLES);
{
Gl.glTexCoord2d(0, 0);//middle top
Gl.glVertex2f(0, 720);
Gl.glTexCoord2d(1, 0);//top right
Gl.glVertex2f(1280, 720);
Gl.glTexCoord2d(0, 1);//bottom middle
Gl.glVertex2f(0, -720);
Gl.glTexCoord2d(1, 0);//top right
Gl.glVertex2f(1280, 720);
Gl.glTexCoord2d(0, 1);//bottom middle
Gl.glVertex2f(0, -720);
Gl.glTexCoord2d(1, 1);//bottom right
Gl.glVertex2f(1280, -720);
}
Gl.glEnd();
}

Related

How can i scale a texture to the given size in pixel with SharpDX.Direct3D9?

I'm currently trying to scale a texture to the given size in pixels via SharpDX.Direct3D9.
I have the following code which draws a texture on the screen (2D)
public static bool DrawTexture(IntPtr device, IntPtr txt, RectangleF rect, float rotation, Color tint)
{
try {
Texture texture = (Texture)txt;
Matrix m = Matrix.Identity * Matrix.Translation(-0.5f, -0.5f, 0.0f) * Matrix.Scaling(rect.Width, rect.Height, 1.0f) * Matrix.RotationZ(rotation) * Matrix.Translation(rect.X, rect.Y, 0.0f);
using (Sprite s = new Sprite((Device)device)) {
s.Begin();
s.Transform = m;
s.Draw(texture, tint.ToRawColorBGRA());
s.End();
}
return true;
}
catch (Exception ex) {
Main.managerInstance.console.PrintError(string.Format("[Direct3D9] An error occured while trying to draw texture. Details: {0}", ex.ToString()));
}
return false;
}
Matrix.Scaling(rect.Width, rect.Height, 1.0f) is responsible for scaling my texture to the given size (128x128 pixel).
But as far as i understand, the Matrix.Scaling function takes in a float from 0 - 1 where 1 is the full texture size and 2 would be double the texture size. But i would like to enter the size in pixel and not in units(?).
So i tried the following:
Size res = CGame.Resolution;
float cW = rect.Width / res.Width;
float cH = rect.Height / res.Height;
Matrix m = Matrix.Identity * Matrix.Translation(-0.5f, -0.5f, 0.0f) * Matrix.Scaling(cW, cH, 1.0f) * Matrix.RotationZ(rotation) * Matrix.Translation(rect.X, rect.Y, 0.0f);
I divide the given texture Width and Height (which is 128x128 pixel) by the Width and Height of the current screen resolution (Which in my case is 1920x1080).
This leaves me with the following:
The result of the division by the screen resolution
As you can see there is a red rectangle in the texture, which is actually 128x128 pixel in size, and in the background, there is my texture, which is supposed to be scaled to 128x128 but as you can see, it clearly is larger then the red rectangle which is 128x128.
Here is how i load my texture
// D3DX.DefaultNonPowerOf2 = -2
Texture t = Texture.FromFile(device, filePath, D3DX.DefaultNonPowerOf2, D3DX.DefaultNonPowerOf2, 1, Usage.None, Format.Unknown, Pool.Managed, Filter.None, Filter.None, 0);
If someone could help me out with this problem i would be really grateful!
Got it working!
Needed to divide the target Size of the texture by the actual texture size like so:
SurfaceDescription sd = texture.GetLevelDescription(0);
float cW = rect.Width / sd.Width;
float cH = rect.Height / sd.Height;

Transforming Rectangle Coordinates to a Large Resolution Image

I'm using the following code to Transform a small rectangle coordinates to a larger one ie: A rectangle position on a small image to the same position on the larger resolution of the same image
Rectangle ConvertToLargeRect(Rectangle smallRect, Size largeImageSize, Size smallImageSize)
{
double xScale = (double)largeImageSize.Width / smallImageSize.Width;
double yScale = (double)largeImageSize.Height / smallImageSize.Height;
int x = (int)(smallRect.X * xScale + 0.5);
int y = (int)(smallRect.Y * yScale + 0.5);
int right = (int)(smallRect.Right * xScale + 0.5);
int bottom = (int)(smallRect.Bottom * yScale + 0.5);
return new Rectangle(x, y, right - x, bottom - y);
}
But there seems to be a problem with some images.The transformed rectangle coordinates seems to be off the image.
UPDATE:
img.Draw(rect, new Bgr(232, 3, 3), 2);
Rectangle transret= ConvertToLargeRect(rect, orgbitmap.Size, bit.Size);
target = new Bitmap(transret.Width, transret.Height);
using (Graphics g = Graphics.FromImage(target))
{
g.SmoothingMode = SmoothingMode.HighQuality;
g.DrawImage(orgbitmap, new Rectangle(0, 0, target.Width, target.Height),
transret, GraphicsUnit.Pixel);
}
Rectangle Drawn on small resolution Image
{X=190,Y=2,Width=226,Height=286}
Rectangle Transformed into Orginal Large Resolution Image {X=698,Y=7,Width=830,Height=931}
Original Image
First of all, if you resize the shape it shouldn't move position. That's not what one would expect out of enlarging a shape. This means the X,Y point of the top-left corner shouldn't be transformed.
Second, you shouldn't be adding 0.5 manually to operations, that's not a clean way to proceed. Use the ceiling function as suggested by #RezaAghaei
Third, you should not substract X/Y from the height/width, your calculations should be done as width * scale.
Please correct those mistakes, and if it doesn't work I'll update the answer with extra steps.

Using a draw function in C#

I made a function that draws a rectangle with rounded corners using examples I got researching here, now I want to call this function with a button click, but I'm not sure how to provide the arguments to the function, can someone help in how to I call this function?
public void DrawCond(Graphics g, Pen p, float width, float height, float x, float y)
{
// Auxiliary variables
float radius;
if (width>=3.55)
{
radius = 1F;
}
else if (width>2.25)
{
radius = 0.8F;
}
else if (width>1.61)
{
radius = 0.65F;
}
else
{
radius = 0.5F;
}
GraphicsPath gp = new GraphicsPath();
//Draw lines
gp.AddLine(x + radius, y, x + width - 2 * radius, y); //bottom horizontal line
gp.AddLine(x + radius, y + height, x + width - 2 * radius, y + height); //top horizontal line
gp.AddLine(x + width, y + radius, x + width, y + height - 2 * radius); //inner vertical line
gp.AddLine(x + radius, y + radius, x + radius, y + height - 2 * radius); //outer vertical line
//Draw arcs
gp.AddArc(x, y + radius, radius, radius, 90, 90); //bottom left corner
gp.AddArc(x + width - radius, y + radius, radius, radius, 0, 90); //bottom right corner
gp.AddArc(x, y + height, radius, radius, 180, 90); //top left corner
gp.AddArc(x + width - radius, y + height, radius, radius, 270, 90); //top right corner
g.DrawPath(p, gp);
gp.Dispose();
}
You can create Graphics from panel you want to draw to like var g = panel.CreateGraphics() and pass it to your function.
Also you can create Pen by using one of its constructors. See MSDN for reference about Pen.

How do i change the pixel size when using SetPixel on a bitmap?

newbitmap.SetPixel((int)clouds1[x].X, (int)clouds1[x].Y, Color.Red);
I set pixels in to a new bitmap with color red.
In form1 i show the newbitmap in pictureBox3:
pictureBox3.Image = CloudEnteringAlert.newbitmap;
But the pixels are very small almost cant be see on the pictureBox3.
How can i make the pixels bigger ?
You can't, but you can draw a circle instead.
using(var g = Graphics.FromImage(newbitmap)) {
g.FillEllipse(Brushes.Red, (int)clouds1[x].X - radius,
(int)clouds1[x].Y - radius, 2 * radius, 2 * radius);
}
I created an extension method that simplifies drawing a circle (here with float coordinates):
public static void FillCircle(this Graphics g, Brush brush,
PointF center, float radius)
{
g.FillEllipse(brush, center.X - radius, center.Y - radius,
radius + radius, radius + radius);
}
If your clouds are PoinF's you can call it like this:
using(var g = Graphics.FromImage(newbitmap)) {
g.FillCircle(Brushes.Red, clouds1[x], radius);
}
If not, adapt the extension method accordingly. Place such extension methods in a static class.
In order to get smooth circles you can use antialiasing. Set the SmoothingMode of the Graphics object to the desired value before drawing circles:
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

Draw simple circle in XNA

I want to draw a 2d, filled, circle. I've looked everywhere and cannot seem to find anything that will even remotely help me draw a circle. I simply want to specify a height and width and location on my canvas.
Anyone know how?
Thanks!
XNA doesn't normally have an idea of a canvas you can paint on. Instead you can either create a circle in your favorite paint program and render it as a sprite or create a series vertexes in a 3D mesh to approximate a circle and render that.
You could also check out the sample framework that Jeff Weber uses in Farseer:
http://www.codeplex.com/FarseerPhysics
The demos have a dynamic texture generator that let's him make circles and rectangles (which the samples then use as the visualization of the physics simulation). You could just re-use that :-)
Had the same problem, as others already suggested you need to draw a square or rectangle with a circle texture on it. Here follows my method to create a circle texture runtime. Not the most efficient or fancy way to do it, but it works.
Texture2D createCircleText(int radius)
{
Texture2D texture = new Texture2D(GraphicsDevice, radius, radius);
Color[] colorData = new Color[radius*radius];
float diam = radius / 2f;
float diamsq = diam * diam;
for (int x = 0; x < radius; x++)
{
for (int y = 0; y < radius; y++)
{
int index = x * radius + y;
Vector2 pos = new Vector2(x - diam, y - diam);
if (pos.LengthSquared() <= diamsq)
{
colorData[index] = Color.White;
}
else
{
colorData[index] = Color.Transparent;
}
}
}
texture.SetData(colorData);
return texture;
}
Out of the box, there's no support for this in XNA. I'm assuming you're coming from some GDI background and just want to see something moving around onscreen. In a real game though, this is seldom if ever needed.
There's some helpful info here:
http://forums.xna.com/forums/t/7414.aspx
My advice to you would be to just fire up paint or something, and create the basic shapes yourself and use the Content Pipeline.
Another option (if you want to use a more complex gradient brush or something) is to draw a quad aligned to the screen and use a pixel shader.
What I did to solve this was to paint a rectangular texture, leaving the area of the rectangle which doesn't contain the circle transparent. You check to see if a point in the array is contained within a circle originating from the center of the rectangle.
Using the color data array is a bit weird because its not a 2D array. My solution was to bring in some 2D array logic into the scenario.
public Texture2D GetColoredCircle(float radius, Color desiredColor)
{
radius = radius / 2;
int width = (int)radius * 2;
int height = width;
Vector2 center = new Vector2(radius, radius);
Circle circle = new Circle(center, radius,false);
Color[] dataColors = new Color[width * height];
int row = -1; //increased on first iteration to zero!
int column = 0;
for (int i = 0; i < dataColors.Length; i++)
{
column++;
if(i % width == 0) //if we reach the right side of the rectangle go to the next row as if we were using a 2D array.
{
row++;
column = 0;
}
Vector2 point = new Vector2(row, column); //basically the next pixel.
if(circle.ContainsPoint(point))
{
dataColors[i] = desiredColor; //point lies within the radius. Paint it.
}
else
{
dataColors[i] = Color.Transparent; //point lies outside, leave it transparent.
}
}
Texture2D texture = new Texture2D(GraphicsDevice, width, height);
texture.SetData(0, new Rectangle(0, 0, width, height), dataColors, 0, width * height);
return texture;
}
And here's the method to check whether or not a point is contained within your circle:
public bool ContainsPoint(Vector2 point)
{
return ((point - this.Center).Length() <= this.Radius);
}
Hope this helps!
public Texture2D createCircleText(int radius, GraphicsDevice Devise,Color color,int tickenes)
{
Texture2D texture = new Texture2D(Devise, radius, radius);
Color[] colorData = new Color[radius * radius];
if (tickenes >= radius) tickenes = radius - 5;
float diam = radius / 2f;
float diamsq = diam * diam;
float intdiam = (radius-tickenes) / 2f;
float intdiamsq = intdiam * intdiam;
for (int x = 0; x < radius; x++)
{
for (int y = 0; y < radius; y++)
{
int index = x * radius + y;
Vector2 pos = new Vector2(x - diam, y - diam);
if (pos.LengthSquared() <= diamsq)
{
colorData[index] = color;
}
else
{
colorData[index] = Color.Transparent;
}
if (pos.LengthSquared() <= intdiamsq)
{
colorData[index] = Color.Transparent;
}
}
}
texture.SetData(colorData);
return texture;
}

Categories