Shader with transparent background

[Shifty]

I am making a map-ish thing at the moment, and I would like to place this tag on a wall:



What script is required to make this a shader where the transparent background won't show up? I have tried just putting it straight onto the map as-is but the blank background is black =/.

Thanks

[Knowitall66]

Here's one for a decal (It'll be semi transparent and white wont be visible, most appropriate for graffiti);

Code: [Select]

textures/MAP_NAME/SHADER_NAME
{
qer_editorimage textures/MAP_NAME/TEXTURE_NAME.jpg
surfaceparm noimpact
surfaceparm nonsolid
surfaceparm trans
polygonoffset
{
map textures/MAP_NAME/TEXTURE_NAME.jpg
blendfunc filter
}
}

[Shifty]

thankyou kind sir, I shall give that a try

EDIT:
Im sorry, I know I've done this before, but I have forgotten and cant quite figure things out. How do I get that shader to show up in my mapper?

Thanks

[gimhael]

blendfunc filter will make the "transparent" parts black, you should use either blendfunc blend or blendfunc GL_ONE GL_ZERO together with alphaFunc GE128.

[Shifty]

Well I have tried multiple things and I can get it to show up as a shader, but the black wont go away. My latest attempt used this script:

textures/signature/tag.tga
{
   qer_editorimage textures/signature/tag.tga
   surfaceparm noimpact
   surfaceparm nonsolid
   surfaceparm trans
   polygonoffset
   {
      map textures/signature/tag.tga
      blendfunc GL_ONE GL_ZERO
      alphafunc GE128
   }
}

and just before that:

textures/signature/tag.tga
{
   qer_editorimage textures/signature/tag.tga
   surfaceparm noimpact
   surfaceparm nonsolid
   surfaceparm trans
   polygonoffset
   {
      map textures/signature/tag.tga
      blendfunc blend
   }
}

But so far it still looks like this:

[Knowitall66]

Don't put '.tga' at the end of the first line (It is the shaders name not a filename).
The shader I offered you requires the background to be white to show up correctly.
Also this mightn't make any difference but change the filetype to '.jpg' (Just in the shader file but you can actually change the image file too if you want). I've found that TGA's often don't seem to work as decals unless I do this.

If you haven't set up shaders properly it's like this;
-  Make sure your 'SHADERFILE_NAME.shader' is in '.../Tremulous/base/scripts/'.
-  Open '.../Tremulous/base/scripts/shaderlist.txt' and add 'SHADERFILE_NAME' to a new line. Save the file.
-  Restart Gtk Radiant.
Shaders should show up with white outline in texture browser.

'blendfunc add' Should remove black too.

[Shifty]

Ok, I think I see what I did wrong. Ill get back to you. Thanks

[Shifty]

well now it works, but it doesnt react to light:



This is using the 2 scripts posted above.

[Knowitall66]

Needs a lightmap stage. Something like this, I think;

Code: [Select]

textures/signature/tag
{
   qer_editorimage textures/signature/tag.tga
   surfaceparm noimpact
   surfaceparm nonsolid
   surfaceparm trans
   polygonoffset
   {
      map textures/signature/tag.tga
      blendfunc GL_ONE GL_ZERO
      alphafunc GE128
   }
   {
map $lightmap
blendFunc GL_DST_COLOR GL_ZERO
rgbgen identity
   }
}

[gimhael]

When you use alphafunc you should always have a "depthfunc equal" in later stages.

[Shifty]

Ok, we are getting there:



As you can see it is transparent in the light, and reacts to light...but I still get black in other areas. I have tried with a .tga with transparent background, and jpgs with white and black backgrounds, but the transparent was the best, delivering the result above (the background of the others didn't change). Where to?

[Draeke]

This shader (and variants of it) should let you get results similar to the above (logo and paint on the floor, banners on the walls). Your base texture should be a TGA with an appropriate alpha channel.
In practice (at least for this shader) it's a good idea to ignore that polygonOffset is in use and place decals ~1gu away from surfaces to prevent flickering at a distance.

Code: [Select]

textures/YOURMAP/YOURSHADER
{
qer_editorimage textures/YOURMAP/YOUREDITORIMAGE
surfaceparm noimpact
surfaceparm nonsolid
surfaceparm trans
polygonOffset
{
map textures/YOURMAP/YOURTEXTURE
rgbGen identity
depthWrite
alphaFunc GE128
}
{
map $lightmap
blendfunc filter
rgbGen identity
tcGen lightmap
depthFunc equal
}
}

[Shifty]

Right. So....I have a brick texture, just a plain .jpg for the background, and the texture is out from the wall a tad anyway. SO! I will try that script and hope THAT one works, if not I will spend a while looking at the shaders from that map (I have it) Before I come back to you guys.

Thanks.

[DraZiLoX]

And don't forget to send us picture, because that looks (so far) pretty darn cool.

[Shifty]

Its not an actual map so to speak Just gonna be my sig. It'll need a bit of work with size. But I may include it into a map if I can come up with a map that suits that brick..city kinda look.

[CreatureofHell]

Make it a map. I really like the look of it.

[Shifty]

Well I am semi-pleased with the results. Its not quite what I hoped, but its ok.



Im gonna scale it down a bit, to about half the size perhaps. I think to looks neat, but as a signature....not so sure.

[CATAHA]

Such graffiti will look ok on a plain wall. On bricks it look like only 'semi' due to lack of relief. Better make separate texture with graffiti placed on it in image editor (photoshop, gimp, etc...) Or change shader at least. =D

[Shifty]

Yeah I'm wondering about that...Of course that will make this whole topic for nothing . I think that map had some part of the script which made the shaders kind of blend into the walls.

[your face]

Use this: (from transit.pk3)

Code: [Select]

textures/map/shader
{
surfaceparm noimpact
surfaceparm nonsolid
surfaceparm trans
polygonoffset
{
map textures/map/graffiti.jpg
blendfunc filter
}
}

Then you can make it possible to see the brick texture behind it.

[Knowitall66]

Use this: (from transit.pk3)

Code: [Select]

textures/map/shader
{
surfaceparm noimpact
surfaceparm nonsolid
surfaceparm trans
polygonoffset
{
map textures/map/graffiti.jpg
blendfunc filter
}
}

Then you can make it possible to see the brick texture behind it.

Face, that's the same shader as I originally posted. (Except yours is lacking editor image) 

[your face]

Oh, you don't need an editor image for the image to show up in radiant, though.

[mindriot]

Such graffiti will look ok on a plain wall. On bricks it look like only 'semi' due to lack of relief. Better make separate texture with graffiti placed on it in image editor (photoshop, gimp, etc...) Or change shader at least. =D

Or take 'textures/signature/tag.tga' and in Photoshop/GIMP change the opacity to 75% or so.  That way the bricks show through and looks more like it was painted on.  You might also want to change 'alphaFunc GE128' to 'alphaFunc GT0' - it might help the transition between full transparency and partial transparency look better.

[Demolution]

I really enjoy this topic just for the experimentation factor. I wish more people would do these kinds of attempts.
It was certainly not a wasted topic.

[mindriot]

I ran an experiment a few months ago and discovered a similar solution as above.  The difference was that I used a .tga that had 75% opacity to allow the detailing of the wall to show through.

decal experiment

The problem is that I still get z-fighting with either the _decal projection (entity) or the decal flush (brush) methods.  Not all the time, but it happens at certain viewing angles.

[your face]

Or take 'textures/signature/tag.tga' and in Photoshop/GIMP change the opacity to 75% or so.  That way the bricks show through and looks more like it was painted on.

You should not need to do this.

Using the blood shader from the transit shader file:


I converted the image to jpg and made the background white.
Here's the pk3 with everything you need, just put it in your base and add "graffiti" to your shaderlist.txt:
http://imn2rc.unvanquished.net/hehmaps/graffiti.pk3

[CATAHA]

Sometime if you strongly need some effects you just cant solve it only with shaders. =}

[mindriot]

I converted the image to jpg and made the background white.

That also works but sometimes I prefer to control the opacity instead of it being uniformly handled by 'blendfunc filter'.

[gimhael]

Or take 'textures/signature/tag.tga' and in Photoshop/GIMP change the opacity to 75% or so.

You *could* do this in the shader: add "alphaGen const 0.75" to the second stage

[Ingar]

Performance on shaders like this is rather miserable. I have some walls with transparent decals like this and I'm considering removing them again.