How to make white transparent - c++

I am playing with OGL's blending. I have a white background. I draw quad on this background. The quad is binded with white and black texture. Colors array is filled with color and alpha values:
for (i = 0; i < IMAGE_WIDTH; i++) {
for (j = 0; j < MAGE_HEIGHT; j++) {
c = ((((i&0x8)==0)^((j&0x8))==0))*255;
Image[i][j][0] = (GLubyte) c;
Image[i][j][1] = (GLubyte) c;
Image[i][j][2] = (GLubyte) c;
Image[i][j][3] = (GLubyte) 255;
};
Display textured quad:
glEnable(GL_BLEND);
glBlendFunc (GL_SRC_ALPHA, GL_ONE);
glDisable (GL_DEPTH_TEST);
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, texCheck);
glLoadIdentity();
glTranslatef (0.0f, 0.0f, -9.0f);
glBegin (GL_QUADS);
glColor3f (1.0f, 1.0f, 1.0f);
glTexCoord2f(0.0, 0.0); glVertex3f(-5.0f, -5.0f, 0.0f);
glTexCoord2f(0.0, 1.0); glVertex3f( 5.0f, -5.0f, 0.0f);
glTexCoord2f(1.0, 1.0); glVertex3f( 5.0f, 5.0f, 0.0f);
glTexCoord2f(1.0, 0.0); glVertex3f(-5.0f, 5.0f, 0.0f);
glEnd();
glDisable(GL_TEXTURE_2D);
glEnable (GL_DEPTH_TEST);
glDisable (GL_BLEND);
Black color of the binded texture on the quad is invisible and works fine. What should I do to make white color of binded texture transparent and black color of binded texure not transparent.

Your blend function should be
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
Supplying GL_ONE as second parameter means that destination color value is taken without taking source alpha value into account so no proper blending occurs.

You have to solve 2 issues:
If different texels of a texture should be blended in different way, then you have to set different alpha channels. If, as in your case, black colored texels should be opaque and white colored texels should be invisible, then the alpha channel of the black texel has to be set to 255 and the alpha channel of the white texel has to be set to 0. Note, any alpha value between 0 and 255 causes a transparent effect, which is more or less strong.
you have set the blending function to glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)
Blending calculates a new target color (the fragment color in the frame buffer), by a function of the original target color and the source color (in your case the color of the texel).
If you set the glBlendFunc
with the functions (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) and you use
glBlendEquation with the equation GL_FUNC_ADD (this is default) then the destination color is
calculated as follows:
C_dest_new = C_src * A_src + C_dest * (1-A_src)
If the alpha channel is equal to 0.0:
C_dest_new = C_src * 0 + C_dest * (1-0) = C_dest
If the alpha channel is equal to 1.0 (255):
C_dest_new = C_src * 1 + C_dest * (1-1) = C_src
Extension to the answer
To set the alpha channel of white texels to 0, the code, which generates the texture, has to be changed somehow like this:
for (i = 0; i < IMAGE_WIDTH; i++) {
for (j = 0; j < MAGE_HEIGHT; j++) {
c = ((((i&0x8)==0)^((j&0x8))==0))*255;
Image[i][j][0] = (GLubyte) c;
Image[i][j][1] = (GLubyte) c;
Image[i][j][2] = (GLubyte) c;
Image[i][j][3] = (GLubyte) (255 - c);
}
}

Related

How to create a "Concave/Convex Circle Illusion" in OpenGL

This semester, I am taking a Computer Graphics course at school, and our first assignment is to create a concave/convex illusion.
This is an example of what I am supposed to create:
Concave/Convex Circle Illusion
I've tried to work this problem out myself, however I keep getting stuck. I know how to create the gray background, and I know how to create a circle. What I dont know how to do is to make the circle look like the picture. I know how to fill it with a solid color, I just dont know how to fill it with multiple colors and fade it like in the picture.
So here is my C++ code which we run in Visual Studio 15.
#include <cstdlib>
#include <glut.h>
#include <math.h>
const double p = 3.14159/180;
void circle(float r){
glColor3f(1.0,0.0,0.0);
glBegin(GL_LINE_LOOP);
for (int i=100; i <= 460; i++){
double degree = p*i;
double x = cos(degree) * r;
double y = sin(degree) * r;
glVertex2d(x,y);
}
glEnd();
}
/*
//This circle function was my attempt at creating the illusion shown in the picture above.
//I tried to break up the circle into separate pieces and make them each a different color,
//but unfortunately it didnt come out like the picture above.
void circle (float radius){
glColor3f(0.0,0.0,0.0); // black
glBegin(GL_POLYGON);
glVertex2i(21,21);
glVertex2i(25,19);
glVertex2i(28,17);
glVertex2i(32,16);
glVertex2i(36,17);
glVertex2i(40,19);
glVertex2i(43,21);
glEnd();
glColor3f(0.329412,0.329412,0.329412); // dim grey
glBegin(GL_POLYGON);
glVertex2i(21,21);
glVertex2i(19,25);
glVertex2i(17,30);
glVertex2i(48,30);
glVertex2i(46,25);
glVertex2i(43,21);
glEnd();
glColor3f(0.752941,0.752941,0.752941); // grey
glBegin(GL_POLYGON);
glVertex2i(17,30);
glVertex2i(16,35);
glVertex2i(15,40);
glVertex2i(50,40);
glVertex2i(49,35);
glVertex2i(48,30);
glEnd();
glColor3f(0.650024,0.650024,0.650024); // light grey
glBegin(GL_POLYGON);
glVertex2i(15,40);
glVertex2i(16,45);
glVertex2i(17,50);
glVertex2i(48,50);
glVertex2i(49,45);
glVertex2i(50,40);
glEnd();
glColor3f(0.8,0.8,0.8); // very light grey
glBegin(GL_POLYGON);
glVertex2i(17,50);
glVertex2i(20,55);
glVertex2i(45,55);
glVertex2i(48,50);
glEnd();
glColor3f(1.0,1.0,1.0); // white
glBegin(GL_POLYGON);
glVertex2i(20,55);
glVertex2i(23,58);
glVertex2i(25,60);
glVertex2i(28,62);
glVertex2i(32,63);
glVertex2i(36,62);
glVertex2i(40,60);
glVertex2i(43,58);
glVertex2i(45,55);
glEnd();
}
*/
void display(void){
glClear(GL_COLOR_BUFFER_BIT);
glColor3f(0.658824,0.658824,0.658824);
glBegin(GL_POLYGON); //Creates the gray background
glVertex2i(10,10);
glVertex2i(390, 10);
glVertex2i(390,290);
glVertex2i(10,290);
glEnd();
circle(30);
glFlush();
}
void main(int argc, char** argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 300);
glutInitWindowPosition(200,100);
glutCreateWindow("Project 1");
glClearColor(0.0,0.0,0.0,0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0,400.0,0.0,300.0);
glutDisplayFunc(display);
glutMainLoop();
}
So Ive got the majority of the code down, I just cant figure out the coloring of the circle.
Any advice/help that can make the outcome of my code look like the example picture above would be greatly appreciated.
Thanks!
Drawing by glBegin/glEnd sequences is deprecated since several years.
Read about Fixed Function Pipeline and see Vertex Specification and Shader for a state of the art way of rendering.
But, the effect of the picture is achieved by a simple gray color gradient. The background is gray and inside the circle is a linear color gradient from white to black.
glClear, clear the framebuffer by the color which is set by glClearColor.
Set a gray clear color to create a gray background:
glClearColor( 0.5f, 0.5f, 0.5f, 1.0f );
glClear(GL_COLOR_BUFFER_BIT);
To create a color gradient, you have to set the color attribute by glColor3d, before you set the vertex coordinate by glVertex2d. The color is interpolated between the vertices. Use the primitive type GL_TRIANGLE_FAN to create a filled polygon:
const double p = 3.14159/180;
void circle(float r, bool flip ){
glBegin(GL_TRIANGLE_FAN);
glColor3d( 0.5, 0.5, 0.5 );
glVertex2d( 0.0, 0.0 );
for (int i=0; i <= 360; i++)
{
double degree = p*i;
double c = cos( degree );
double s = sin( degree );
double col = s * 0.5 + 0.5;
if ( flip )
col = 1.0 - col;
glColor3d( col, col, col );
glVertex2d( c*r, s*r );
}
glEnd();
}
The draw function may look like this:
void display(void){
glClearColor( 0.5f, 0.5f, 0.5f, 1.0f );
glClear(GL_COLOR_BUFFER_BIT);
glMatrixMode( GL_MODELVIEW );
glLoadIdentity();
for ( int x = 0; x < 2; ++ x )
{
for ( int y = 0; y < 2; ++ y)
{
glPushMatrix();
glTranslated( 120.0 + 160.0*x, 100.0+100*y, 0.0f );
circle(30, x > 0);
glPopMatrix();
}
}
glFlush();
}
Preview:

OpenGL Fade in / fade out a texture2D

I am writing an application that displays .jpg files that are stored as Texture2D (RGB) in OpenGL. I want to smoothly change from one texture2D to the next by fading to black, then fading into the next texture.
After looking for some explanation I wrote something like this.
void renderTexture()
{
glMatrixMode(GL_MODELVIEW);
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, mTexture);
gluSphere(mQuad, 1.0f, 50, 50);
glBindTexture(GL_TEXTURE_2D, 0);
}
void fadeToBlack()
{
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);
for (GLfloat alpha = 1.0; alpha > 0.0; alpha -= 0.05)
{
glColor4f(0.0, 0.0, 0.0, alpha);
renderTexture();
glFlush();
glutSwapBuffers();
}
glDisable(GL_BLEND);
}
Unfortunately, this does not fade to black but instead switches to black immediately. I must have some misunderstanding on how GL_BLEND is working here. Can somebody please point out what I am doing wrong?
** EDIT: This did the trick. Thanks a lot j-p and Benjamin for the pointers **
void fadeToBlack()
{
for (GLfloat alpha = 1.0; alpha > 0.0; alpha -= 0.001)
{
renderTexture();
glColor4f(alpha, alpha, alpha, alpha);
glFlush();
glutSwapBuffers();
}
glColor4f(1.0, 1.0, 1.0, 1.0);
}
The for loop will be executing so quickly that the texture changes will appear to happen instantly.

Layering quads on top of each other in OpenGL

I'm creating a 2D tile based tactical rpg using OpenGL using C++ and I'm having difficulties with layering my tiles/quads. I want to to able to put say a tree textured quad, the image is of the tree with a surrounding transparent alpha layer, on top of an opaque grass textured quad. I need to have the tree appear on top of the grass with the grass showing through the alpha layer of the tree image.
So far I've been messing with glDisable(GL_DEPTH_TEST), glEnable(GL_BLEND), andglBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) but with no luck so far. I end up with a tree on a black background, instead of the grass tile. Could someone point me in the right direction?
Below is my render function and initialize function which are probably most relevant.
void View::initialize() {
updateProjection(window);
glDisable(GL_DEPTH_TEST);
glClearColor(0.0, 0.0, 0.0, 1.0);
camera = new Camera(Vector3(-1, -3, 25), Vector3(-1, -3, 0), Vector3(0, 1, 0));
loadImages();
initShaders();
//needed for transparency?
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
}
void View::render(World* worldTemp)
{
Matrix4 mvpMatrix, viewMatrix, modelMatrix;
Matrix4 XAxisRotationMatrix, YAxisRotationMatrix, ZAxisRotationMatrix;
input->handleInput(camera, worldTemp->getPlayer());
worldTemp->timerTick();
worldTemp->clearFog();
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // Clear Screen and Depth Buffer
XAxisRotationMatrix = Matrix4::IDENTITY;
YAxisRotationMatrix = Matrix4::IDENTITY;
ZAxisRotationMatrix = Matrix4::IDENTITY;
XAxisRotationMatrix.rotate(Vector3(1.0, 0.0, 0.0), XAxisRotationAngle);
YAxisRotationMatrix.rotate(Vector3(0.0, 1.0, 0.0), YAxisRotationAngle);
ZAxisRotationMatrix.rotate(Vector3(0.0, 0.0, 1.0), ZAxisRotationAngle);
viewMatrix = camera->getViewMatrix();
modelMatrix = translationMatrix(Vector3(-4, 2, 0));
mvpMatrix = projectionMatrix * viewMatrix * modelMatrix;
//Spit out the map
for (int i = 0; i < 100; i++){
for (int j = 0; j < 100; j++){
for (int t = 0; t < 5; t++){
if (worldTemp->getTile(i, j)->isOccupied() == true) {
if (worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getFog()){
worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getEntityQuad()->render_self(mvpMatrix, true);
}
else{
worldTemp->getTile(i, j)->getOccupyingEntityIndexed(t)->getEntityQuad()->render_self(mvpMatrix);
}
}
}
}
}
//Place the player
worldTemp->getPlayer()->getEntityQuad()->render_self(mvpMatrix);
renderEnemies();
glutSwapBuffers(); //works with GL_DOUBLE. use glFlush(); instead, if using GL_SINGLE
}
Basically, in 2d games layering done via ordering of render calls. If you want layer A on top of layer B, you should render layer B first and then layer A.
blend function that you're using should depend on texture format of images. There are two common formats for alpha:
Pre-multiplied alpha
Straight alpha
More info about this: https://developer.nvidia.com/content/alpha-blending-pre-or-not-pre
opengl es2 premultiplied vs straight alpha + blending
glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA); is for premultiplied alpha, and it should work well if you use colors as is. glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA); is for straight alpha.

DX11 Alpha blending when rendering to a texture

FINAL EDIT:
Resolved... just needed to learn how alpha blending works in-depth. I should have had:
oBlendStateDesc.RenderTarget[a].DestBlendAlpha = D3D11_BLEND_ZERO;
...set to D3D11_BLEND_ONE to preserve the alpha.
When rendering to the backbuffer once the problem would not be noticed as the colours blend normal and that is the final output. When rendering to the texture the same thing applies, just then rendering the texture to the backbuffer the incorrect alpha plays a role in incorrectly blending the texture into the backbuffer.
I then ran into another issue where the alpha seemed to be decreasing. This is because the colour is blended twice, for example...
Source.RBGA = 1.0f, 0.0f, 0.0f, 0.5f
Dest.RGBA = 0.0f, 0.0f, 0.0f, 0.0f
Render into texture...
Result.RGB = Source.RBG * Source.A + Dest.RGB * (1 - Source.A) = 0.5f, 0.0f, 0.0f
Result.A = Source.A * 1 + Dest.A * 1 = 0.5f
Now...
Source.RBGA = 0.5f, 0.0f, 0.0f, 0.5f
Dest.RGBA = 0.0f, 0.0f, 0.0f, 0.0f
Render into backbuffer...
Result.RGB = Source.RBG * Source.A + Dest.RGB * (1 - Source.A) = 0.25f, 0.0f, 0.0f
Result.A = Source.A * 1 + Dest.A * 1 = 0.5f
To resolve this, when rendering the texture into the backbuffer I use the same blendstate but change the SrcBlend to D3D11_BLEND_ONE so the colour is not blended twice.
Hopefully this helps anyone else having a similar problem....
EDITEND
To increase performance I'm attempting to render a string of text that never changes into a texture to save rendering each individual character every time.
Since I'm rendering strictly in 2D, I've disabled the depth & stencil testing while enabling alpha blending.
Problem is there doesn't seem to be any alpha blending happening, whatever is drawn last overwrites the current pixel with its own data... no blending.
I use a single blend state which I do not change. When rendering to the backbuffer the blending works fine. When rendering the final texture to the backbuffer the blending also works fine. It's just when I render to the texture that blending seems to fail.
Here's how I set up my single blend state:
D3D11_BLEND_DESC oBlendStateDesc;
oBlendStateDesc.AlphaToCoverageEnable = 0;
oBlendStateDesc.IndependentBlendEnable = 0; //set to false, dont need loop below... but just incase
for (unsigned int a = 0; a < 8; ++a)
{
oBlendStateDesc.RenderTarget[a].BlendEnable = 1;
oBlendStateDesc.RenderTarget[a].SrcBlend = D3D11_BLEND_SRC_ALPHA;
oBlendStateDesc.RenderTarget[a].DestBlend = D3D11_BLEND_INV_SRC_ALPHA;
oBlendStateDesc.RenderTarget[a].BlendOp = D3D11_BLEND_OP_ADD;
oBlendStateDesc.RenderTarget[a].SrcBlendAlpha = D3D11_BLEND_ONE;
oBlendStateDesc.RenderTarget[a].DestBlendAlpha = D3D11_BLEND_ZERO;
oBlendStateDesc.RenderTarget[a].BlendOpAlpha = D3D11_BLEND_OP_ADD;
oBlendStateDesc.RenderTarget[a].RenderTargetWriteMask = D3D11_COLOR_WRITE_ENABLE_ALL;
}
// Create the blend state from the description
HResult = m_poDevice->CreateBlendState(&oBlendStateDesc, &m_poBlendState_Default);
m_poDeviceContext->OMSetBlendState(m_poBlendState_Default, nullptr, 0xffffff);
Are there any extra steps I am missing to enable blending when rendering to a texture?
EDIT: If I set AlphaToCoverageEnable to true it blends, but looks terrible. That at least confirms it is using the same blend state... just works differently depending on when rendering to backbuffer or a texture : / Here's my texture desc...
m_oTexureDesc.Width = a_oDesc.m_uiWidth;
m_oTexureDesc.Height = a_oDesc.m_uiHeight;
m_oTexureDesc.MipLevels = 1;
m_oTexureDesc.ArraySize = 1;
m_oTexureDesc.Format = DXGI_FORMAT_R32G32B32A32_FLOAT;
m_oTexureDesc.SampleDesc.Count = 1; //No sampling
m_oTexureDesc.SampleDesc.Quality = 0;
m_oTexureDesc.Usage = D3D11_USAGE_DEFAULT; //GPU writes & reads
m_oTexureDesc.BindFlags = D3D11_BIND_RENDER_TARGET | D3D11_BIND_SHADER_RESOURCE;
m_oTexureDesc.CPUAccessFlags = 0;
m_oTexureDesc.MiscFlags = 0;
EDIT:
Here's some visualization...
Rendering to backbuffer - AlphaBlending enabled.
Rendering to texture - AlphaBlending enabled.
Rendering to backbuffer - AlphaBlending disabled.
Letter T taken from the font file
*When rendering with AB disabled, the letters match exactly (compare 4 & 3)
*When rendering to the backbuffer with AB enabled, the letters render slightly (hardly noticeable) washed out but still blend (compare 4 & 1)
*When rendering to a texture with AB enabled, the letters render even more noticeably washed out while not blending at all. (compare 4 & 2)
Not sure why the colours are washed out with alpha blending enabled... but maybe its a clue?
EDIT:
If I clear the render target texture to say... 0.0f, 0.0f, 1.0f, 1.0f (RGBA, blue)... this is the result:
Only the pixels with alpha > 0.0f & < 1.0f blend with the colour. Another clue but I have no idea how to resolve this issue...

How to rotate a lightsource around a fixed object (OpenGL)?

I'm trying to make a light source rotate around my character model in my OpenGL project, but as I try it, all I got so far is my model rotating like crazy (or the floor).
My rendering code looks like this:
void mainRender() {
updateState();
renderScene();
glFlush();
glutPostRedisplay();
//spin = (spin + 30) % 360;
Sleep(30);
}
void renderScene() {
glClearColor(backgrundColor[0],backgrundColor[1],backgrundColor[2],backgrundColor[3]);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // limpar o depth buffer
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
updateCam();
renderFloor();
modelAL.Translate(0.0f,1.0f,0.0f);
modelAL.Draw();
}
void renderFloor() {
// set things up to render the floor with the texture
glShadeModel(GL_SMOOTH);
glEnable(type);
glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
glPushMatrix();
glTranslatef(-(float)planeSize/2.0f, 0.0f, -(float)planeSize/2.0f);
float textureScaleX = 10.0;
float textureScaleY = 10.0;
glColor4f(1.0f,1.0f,1.0f,1.0f);
int xQuads = 40;
int zQuads = 40;
for (int i = 0; i < xQuads; i++) {
for (int j = 0; j < zQuads; j++) {
glBegin(GL_QUADS);
glTexCoord2f(1.0f, 0.0f); // coords for the texture
glNormal3f(0.0f,1.0f,0.0f);
glVertex3f(i * (float)planeSize/xQuads, 0.0f, (j+1) * (float)planeSize/zQuads);
glTexCoord2f(0.0f, 0.0f); // coords for the texture
glNormal3f(0.0f,1.0f,0.0f);
glVertex3f((i+1) * (float)planeSize/xQuads, 0.0f, (j+1) * (float)planeSize/zQuads);
glTexCoord2f(0.0f, 1.0f); // coords for the texture
glNormal3f(0.0f,1.0f,0.0f);
glVertex3f((i+1) * (float)planeSize/xQuads, 0.0f, j * (float)planeSize/zQuads);
glTexCoord2f(1.0f, 1.0f); // coords for the texture
glNormal3f(0.0f,1.0f,0.0f);
glVertex3f(i * (float)planeSize/xQuads, 0.0f, j * (float)planeSize/zQuads);
glEnd();
}
}
glDisable(type);
glPopMatrix();
}
How could I make this new lightsource rotate around my "modelAL" object?
For the fixed pipeline, light source position assigned with glLight() are transformed with the model-view matrix, just as normal objects are. So you can use the transformation functions to position and rotate your light source as you would normal objects.
To rotate a light source (or other object) around a point, you need to follow these steps. Let L be where the light source will be when the rotation is 0 degrees, and O be the subject - the object around which you want to rotate the light source.
Position the light source at L-O (the position of the light source relative to the subject)
Rotate it about the required axis (probably the Y axis)
Translate it by O to move it into position.
Because of the way OpenGL works, you essentially do these in backwards order. Basically it would go like this:
glPushMatrix();
glTranslatef(O.x,O.y,O.z);
glRotate(angle,0,1,0);
GLfloat lightpos[4] = {L.x-O.x,L.y-O.y,L.z-O.z,1};
glLightfv(GL_LIGHT0,GL_POSITION,lightpos);
glPopMatrix();
Note, this only applies to positioned light sources, not directional ones i.e. with w=0.