draw 2d image with alpha channel and alpha blending

trnrez · Post by **trnrez** » Thu Jan 11, 2007 11:42 pm

I have searched the forum and didn't find a straight answer but perhaps I didn't search with the best logic.

I am drawing a 2d image using draw2DImage(...) and using the alpha channel of the texture. The part that i'm not finding an answer for is on how to alpha blend that 2dimage. I would like to be able to change how translucent the image is.

My logic was to change the SColor* in draw2DImage(...). I set up an SColor array[4] and set each one to be (255,255,255,255). I would think that changing the first value to be on a range from 0-255 would change the way it renders transparency but that is not the result I am getting.

I thought that perhaps I could do this trough the texture itself but i'm not seeing any thing that allows me to set the color. If someone could point me in the direction of a tut or perhaps a similar topic that would be awesome.

Thanks for your time and if you need further clarification let me know.

Edit: changed wording for clarification.

sgt_pinky · Post by **sgt_pinky** » Thu Jan 11, 2007 11:46 pm

Did you have a look at the tutorial demonstrating rendering 2D objects? That uses transparency. It's in the examples directory of the distribution.

trnrez · Post by **trnrez** » Thu Jan 11, 2007 11:51 pm

sgt_pinky wrote:Did you have a look at the tutorial demonstrating rendering 2D objects? That uses transparency. It's in the examples directory of the distribution.

Yea I have it rendering the object with the background transparent. Exactly how the 2d demo does. The issue i'm having is alpha blending the image so it is translucent.

hybrid · Post by **hybrid** » Fri Jan 12, 2007 12:47 am

Please read the API where you will find an alpha value for the whole image inside the SColor element.

trnrez · Post by **trnrez** » Fri Jan 12, 2007 1:52 am

hybrid wrote:Please read the API where you will find an alpha value for the whole image inside the SColor element.

I had read the api...the problem I found had to be with me using EDT_OPENGL I switched to EDT_DIRECT3D9 and it works properly. Now it shows it translucent. Out of curiosity is this a opengl limitation or is it just not implemented in irrlicht for opengl? or is this my video drivers limitation?

hybrid · Post by **hybrid** » Fri Jan 12, 2007 8:45 am

Do you have Irrlicht 1.2, or are you using an older version? There had been some parts missing in the past, but I think most of them were already solved in 1.1. In case you have the latest version please post your complete code and a screenshot from ogl and dx to see the differences. It should work under OpenGL so it would be a bug if it doesn't

trnrez · Post by **trnrez** » Fri Jan 12, 2007 9:10 am

hybrid wrote:Do you have Irrlicht 1.2, or are you using an older version? There had been some parts missing in the past, but I think most of them were already solved in 1.1. In case you have the latest version please post your complete code and a screenshot from ogl and dx to see the differences. It should work under OpenGL so it would be a bug if it doesn't

I am using Irrlicht 1.2.

DX Screen:

DX Code:

Code: Select all

// The Irrlicht Engine header file
#include <irrlicht.h>

// To avoid having to put irr:: before the name of every class,
// we tell the compiler that we us that namespace.
//
// Everything in the Irrlicht Engine can be found in this namespace
using namespace irr;

// In this namespace can be found basic classes like vectors, planes,
// arrays, lists and so on.
using namespace core;

// All scene management can be found in this namespace: Mesh loading,
// special scene nodes like octrees and billboards, .
using namespace scene;

// The video namespace contains classes for accessing the video 
// driver. All 2d and 3d rendering is done here
using namespace video;

// This namespace provides interfaces for input/output: Reading and
// writing files, accessing zip archives, xml files, ..
using namespace io;

// The gui namespace contains useful classes for easy creation of a
// graphical user interface
using namespace gui;

// To be able to use the Irrlicht.DLL file we need to link with the
// Irrlicht.lib.
#pragma comment(lib, "Irrlicht.lib")

#define ResX 1024
#define ResY 768

int WinMain(void)
{
	IrrlichtDevice *device = createDevice(
		EDT_DIRECT3D9,
		dimension2d<s32>(ResX, ResY),
		32,
		false,
		false,
		false,
		0
		);

	// Set the caption of the window up.
	device->setWindowCaption(L"Hello World! - Irrlicht Engine Demo");

	// Store a pointer to the video driver
	IVideoDriver	*driver	= device->getVideoDriver();

	ITexture		*images = driver->getTexture("media/2ddemo.bmp");
	driver->makeColorKeyTexture(images, position2d<s32>(0,0));

	while(device->run())
	{
		driver->beginScene(true, true, SColor(0, 0, 200, 200));

			SColor tmpColors[4];
			SColor tColor(100,255,255,255);
			tmpColors[0] = tColor;
			tmpColors[1] = tColor;
			tmpColors[2] = tColor;
			tmpColors[3] = tColor;

			driver->draw2DImage(
				images,
				rect<s32>(0,0,342,224),
				rect<s32>(0,0,342,224),
				0,
				tmpColors,
				true
				); 

		driver->endScene();
	}

	// Now we delete the Irrlicht Device we created.
	device->drop();

	return 0;
}

OpenGL Screen:

OpenGL Code:

Code: Select all

// The Irrlicht Engine header file
#include <irrlicht.h>

// To avoid having to put irr:: before the name of every class,
// we tell the compiler that we us that namespace.
//
// Everything in the Irrlicht Engine can be found in this namespace
using namespace irr;

// In this namespace can be found basic classes like vectors, planes,
// arrays, lists and so on.
using namespace core;

// All scene management can be found in this namespace: Mesh loading,
// special scene nodes like octrees and billboards, .
using namespace scene;

// The video namespace contains classes for accessing the video 
// driver. All 2d and 3d rendering is done here
using namespace video;

// This namespace provides interfaces for input/output: Reading and
// writing files, accessing zip archives, xml files, ..
using namespace io;

// The gui namespace contains useful classes for easy creation of a
// graphical user interface
using namespace gui;

// To be able to use the Irrlicht.DLL file we need to link with the
// Irrlicht.lib.
#pragma comment(lib, "Irrlicht.lib")

#define ResX 1024
#define ResY 768

int WinMain(void)
{
	IrrlichtDevice *device = createDevice(
		EDT_OPENGL,
		dimension2d<s32>(ResX, ResY),
		32,
		false,
		false,
		false,
		0
		);

	// Set the caption of the window up.
	device->setWindowCaption(L"Hello World! - Irrlicht Engine Demo");

	// Store a pointer to the video driver
	IVideoDriver	*driver	= device->getVideoDriver();

	ITexture		*images = driver->getTexture("media/2ddemo.bmp");
	driver->makeColorKeyTexture(images, position2d<s32>(0,0));

	while(device->run())
	{
		driver->beginScene(true, true, SColor(0, 0, 200, 200));

			SColor tmpColors[4];
			SColor tColor(100,255,255,255);
			tmpColors[0] = tColor;
			tmpColors[1] = tColor;
			tmpColors[2] = tColor;
			tmpColors[3] = tColor;

			driver->draw2DImage(
				images,
				rect<s32>(0,0,342,224),
				rect<s32>(0,0,342,224),
				0,
				tmpColors,
				true
				); 

		driver->endScene();
	}

	// Now we delete the Irrlicht Device we created.
	device->drop();

	return 0;
}

Robert Y. · Post by **Robert Y.** » Sat Feb 17, 2007 8:32 pm

Indeed there seems to be a bug in irrlicht 1.2 draw2dimage: in the directx9 driver, the SColor alpha channel is used correctly. But in directx8 and opengl the alpha value is ignored (rgb values are ok).

To be more clear, the alpha of the image itself works fine (masking), but the SColor alpha component is ignored (translucency of the image) in dx8 en ogl.

Robert Y. · Post by **Robert Y.** » Sat Feb 17, 2007 10:17 pm

To enable translucency in DX8, you have to change function setRenderStates2DMode in CD3D8Driver.cpp:

Change

Code: Select all

if (alphaChannel)
		{
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLOROP,   D3DTOP_MODULATE );
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLORARG1, D3DTA_TEXTURE );
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLORARG2, D3DTA_DIFFUSE );

			pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAOP,  D3DTOP_SELECTARG1 );
			pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAARG1, D3DTA_TEXTURE );
						
			pID3DDevice->SetRenderState(D3DRS_ALPHABLENDENABLE, TRUE);
			pID3DDevice->SetRenderState(D3DRS_SRCBLEND,  D3DBLEND_SRCALPHA);
			pID3DDevice->SetRenderState(D3DRS_DESTBLEND, D3DBLEND_INVSRCALPHA);
		}

to

Code: Select all

if (alphaChannel)
		{
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLOROP,   D3DTOP_MODULATE );
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLORARG1, D3DTA_TEXTURE );
			pID3DDevice->SetTextureStageState( 0, D3DTSS_COLORARG2, D3DTA_DIFFUSE );

			if (alpha)
			{
				pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAOP,  D3DTOP_MODULATE );
				pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAARG1, D3DTA_TEXTURE );
				pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAARG2, D3DTA_DIFFUSE );
			}
			else
			{
				pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAOP,  D3DTOP_SELECTARG1 );
				pID3DDevice->SetTextureStageState (0, D3DTSS_ALPHAARG1, D3DTA_TEXTURE );
			}

			pID3DDevice->SetRenderState(D3DRS_ALPHABLENDENABLE, TRUE);
			pID3DDevice->SetRenderState(D3DRS_SRCBLEND,  D3DBLEND_SRCALPHA);
			pID3DDevice->SetRenderState(D3DRS_DESTBLEND, D3DBLEND_INVSRCALPHA);
		}

(this way it is similar to CD3D9Driver.cpp)

Does anyone know a way to do this in OpenGL?

Robert Y. · Post by **Robert Y.** » Mon Feb 19, 2007 10:29 am

Update: the transparency in OGL and DX8 is now fixed in the SVN by hybrid.

WhiskeyJim · Post by **WhiskeyJim** » Tue Feb 20, 2007 4:16 pm

Robert Y. wrote:Update: the transparency in OGL and DX8 is now fixed in the SVN by hybrid.

That's great! Anyone who could give me some guidance how to apply it to my current version of Irrlicht 1.2? The SVN version I compiled caused some serious problems with my current projects.

hybrid · Post by **hybrid** » Tue Feb 20, 2007 10:50 pm

You should use the SVN browser on the SF Irrlicht page. Search the revisions until you find the one that contains the changes and use the text diff links on the right to see what has changed. Just add the code to your sources.