I'm trying to draw some basic graphics here. Namely, Lines or Rectangles with exact pixel widths. No fancy anti aliasing or anything else that makes the line appear different.
Can someone give me some instructions or basic code that can achieve this?
I used the basic Line/Rectangle functions and adjusted the width parameter and the color was black.
Here's what solid 2px and 1px lines look like in any graphics program:
And here's what it looks like in Kivy:
The Kivy version has a thicker line and a 1 pixel line that is not black. How do i draw pixel perfect lines?
Due to an ancient design mistake, the width property in Kivy actually controls half the line width, as you have observed, with the exception of width 1 in which case the line is drawn using a plain OpenGL instruction and genuinely has width 1 pixel. No, this doesn't make sense.
If you get blurriness after specifying half the width you really need, this is probably because of OpenGL interpolation when the line doesn't actually line up with the display pixels. If you have an example where it seems particularly bad, it might be possible to say more about that.
Related
I have two simple translucent circle sprites that I'm using as fake shadows (shown below) under some characters (not shown below). When the characters get close enough, sometimes their shadow circles can overlap - which is fine - but thanks to the default blending it doesn't look right. I want the shadow circles that do overlap to be visually merged/mixed so they maintain the same opacity, but instead they add together where they overlap like this: I have to imagine there's some way to make this work with a shader, but I'm so bad at shaders that I can't seem to figure it out. Does anyone know how to solve this?
I've been using inkscape to create SVGs. But I've come across a problem. I've created a simple plus sign with a 1px line width (as simple as you can imagine). It is currently in PNG format with a transparent background. I've imported it into inkscape so I can convert it into a SVG. However, when I use trace bitmap, Inkscape CHANGES THE SHAPE such that the straight lines that are one pixel wide are tappered with pointed ends! I've tried different options in the trace bitmap settings but nothing seems to work. I've also gone through a number of online free conversion sites with no luck.
I wouldn't mind just creating the plus sign using html and css but the exact position of the lines as well as the line thickness tends to move around between chrome and firefox. It's very strange.
..Help?
I think I figured it out. If I create a plus sign that is 2 px thick instead of 1 px thick, inkscape does not do its smoothing thing (as long as I have unticked smoothing options). So, I do this, but draw it much bigger than what I need. Then when I load it into my website I can reduce the size of it there, and voila the 2 px width becomes 1 px width!
When rendering textures that have an alpha-channel, a white border appears around the non-transparent part (the border seems to be the pixels that have an alpha > 0 and < 1):
The original texture is created in illustrator and exported as a png. here it is:
(well, seems stackoverflow altered the image, adjusting pixels that are not completely opaque/transparent, so here is a link)
it is probably the blending, though i dont know what is wrong with the setup:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
[Update]
Here is a rendered version, where i added a alpha-gradient to the left part of the texture (so it is getting from 0 opacity to 1 until the half)
this texture is the only texture rendered at this position. it seems to be whitest around a=0.5. really weird. the background is just a cleared color:
gl.clearColor(0.603, 0.76, 0.804, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// render objects here
the depth-function looks like:
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
any ideas? thanks a lot.
[Update 2]
Answering my own question: the effect occurs when the background-color of the canvas or the body of the html-page is white. I don't have an explanation, though.
Use premultiplied alpha and this problem will go away.
See: http://home.comcast.net/~tom_forsyth/blog.wiki.html#%5B%5BPremultiplied%20alpha%5D%5D
This is problem related to texturing linear interpolation. On borders, some interpolated pixels will take half white half green, and 0.5 alpha. You should modify your texture to extend your borders with one more green pixel, even if it is totally transparent.
What's your draw order? This looks like a depth buffering issue to me — you start with a white background, draw the thing with the border so that it's composited on the white, then draw the thing behind the thing with the border. Those areas where the border was blended with the original white background will have stored a value in the depth buffer equal to the depth of their plane, so when the object behind is subsequently drawn, its pixels are discarded in that area.
The general rule is to draw transparent objects after opaque objects, usually from back to front. If you're using additive blending then it's often good enough to disable the depth buffer after the opaque draw and draw them in any order.
When setting the FragColor in the shader, try multiplying the image RGB with the image alpha.
I have a multiviewport OpenGL modeler application. It has three different viewports : perspective, front and top. Now I want to paint a label for each viewport and not succeeding in doing it.
What is the best way to print a label for each different perspective?
EDITED : The result
Here is the result of my attempt:
I don't understand why the perspective viewport label got scrambled like that. And, Actually I want to draw it in the upper left corner. How do I accomplished this, because I think it want 3D coordinate... is that right? Here is my code of drawing the label
glColor3f(1,0,0);
glDisable(GL_DEPTH_TEST);
glDepthMask(GL_FALSE);
glRasterPos2f(0,0);
glPushAttrib(GL_LIST_BIT); // Pushes The Display List Bits
glListBase(base - 32); // Sets The Base Character to 32
glCallLists(strlen("Perspective"), GL_UNSIGNED_BYTE, "Perspective"); // Draws The Display List Textstrlen(label)
glPopAttrib();
I use the code from here http://nehe.gamedev.net/data/lessons/lesson.asp?lesson=13
thanks
For each viewport switch into a projection that allows you to supply "viewport space" coordinates, disable depth testing (glDisable(GL_DEPTH_TEST)) and depth writes (glDepthMask(GL_FALSE)) and draw the text using one of the methods used to draw text in OpenGL (texture mapped fonts, rendering the full text into a texture drawing that one, draw glyphs as actual geometry).
Along with #datenwolf's excellent answer, I'd add just one bit of advice: rather than drawing the label in the viewport, it's usually easier (and often looks better) to draw the label just outside the viewport. This avoids the label covering anything in the viewport, and makes it easy to get nice, cleanly anti-aliased text (which you can normally do in OpenGL as well, but it's more difficult).
If you decide you need to draw the text inside the viewport anyway, I'll add just one minor detail to what #datenwolf said: since you generally do want your text anti-aliased (even if the rest of the picture isn't) you generally want to draw the label after all the other geometry of the picture itself. If you haven't turned on anti-aliasing otherwise, you generally will want to turn it on for drawing the text.
I'm not sure how to ask this but here goes.
I draw a filled coloured rectangle on screen. The colour is in form of R,G,B
I then want to draw text on top of the rectangle, however the colour of the text has to be such that it provides the best contrast, meaning it's readable.
Example:
If I draw a black rectangle, the obvious colour for text would be white.
What I tried right now is this. I pass this function the colour of the rectangle and it returns an inverted colour that I then use for my text.
It works, but it's not the best way.
Any suggestions?
// eg. usage: Color textColor = GetInverseLuminance(rectColor);
private Color GetInverseLuminance(Color color)
{
int greyscale = (int)(255 - ((color.R * 0.30f) + (color.G * 0.59f) + (color.B * 0.11f)));
return Color.FromArgb(greyscale, greyscale, greyscale);
}
One simple approach that is guaranteed to give a significantly different color is to toggle the top bit of each component of the RGB triple.
Color inverse(Color c)
{
return new Color(c.R ^ 0x80, c.G ^ 0x80, c.B ^ 0x80);
}
If the original color was #1AF283, the "inverse" will be #9A7203.
The contrast will be significant. I make no guarantees about the aesthetics.
Update, 2009/4/3: I experimented with this and other schemes. Results at my blog.
The most readable color is going to be either white or black. The most 'soothing' color will be something that is not white nor black, it will be a color that lightly contrasts your background color. There is no way to programmatically do this because it is subjective. You will not find the most readable color for everyone because everyone sees things differently.
Some tips about color, particularly concerning foreground and background juxtaposition, such as with text.
The human eye is essentially a simple lens, and therefore can only effectively focus on one color at a time. The lenses used in most modern cameras work around this problem by using multiple lenses of different refractive indexes (chromatic lenses) so that all colors are in focus at one time, but the human eye is not that advanced.
For that reason, your users should only have to focus on one color at a time to read the text. This means that either the foreground is in color, or the background, but never both. This leads to a condition typically called vibration, in which the eye rapidly shifts focus between foreground and background colors, trying to resolve the shape, but it never resolves, the shape is never in focus, and it leads to eyestrain.
Your function won't work if you supply it with RGB(127,127,127), because it will return the exact same colour. (modifying your function to return either black or white would slightly improve things)
The best way to always have things readable is to have white text with black around it, or the other way around.
It's oftenly achieved by first drawing black text at (x-1,y-1),(x+1,y-1),(x+1,y-1),(x+1,x+1), and then white text at (x,y).
Alternatively, you could first draw a semi-transparent black block, and then non-transparent white text over it. That ensures that there will always be a certain amount of contrast between your background and your text.
why grey? either black or white would be best. white on dark colors, black on light colors. just see if luminance is above a threshold and pick one or the other
(you don't need the .net, c# or asp.net tags, by the way)
You need to study some color theory. A program called "Color Wheel Pro" is fun to play around with and will give you the general idea.
Essentially, you're looking for complimentary colors for a given color.
That said, I think you will find that while color theory helps, you still need a human eye to fine tune.