PNG alpha rendered as black

I’m a Blender novice, so this is probably easy to fix.

When I use a transparent PNG as a texture in Blender, the parts that should be transparent are rendered as black.

This is especially confusing since in the material preview it looks as if the material would indeed be transparent.

Here’s a screenshot:
http://i.stack.imgur.com/qxx3xl.png

Here is the .blend file in case you want to check it: transparent.zip (82.6 KB)

Now, I wonder if this is an interface limitation.

Because I played with the settings for a while and it does render with transparency (but only on the rendered image, not while editing). Remember that I only want the “Z-Transparency”, so I think it’s likely that the editing interface supports it… But then again, if it does, why it isn’t there already?

Also, the only place I care about transparency right now is the editing interface, I don’t care about the rendered one.

The reason is I’m using Blender to model stuff that will be used with Three.js (<canvas>/WebGL).

Here is how it’s supposed to look (rendered on an HTML <canvas>):
http://i.stack.imgur.com/3O0wU.png

try premultiply

I think I’ve already sent a post to this topic but it’s probably still in the moderator approval queue since I’m a new user :stuck_out_tongue:

In any case, premultiply? I don’t understand, I’m a new user. There’s a premultiply in the Textures panel, but it doesn’t seem to do more than make it white instead of black if I disable it (it was enabled) (so there’s still no alpha, but it can be white or black matted).

If someone could at least confirm it’s impossible I’d be grateful, I’ll possibly resume modelling today even if I can’t see it properly due to deadlines.

If your looking to view transparency in the editing window, hit “n” on your keyboard. It will display a panel. On the panel there is a tab labeled “display”. In that tab, under the word shading, their is a drop-down box. Click on it and choose GLSL.

Wow, that did it! Thank you very very much as I was nearly giving up. Please, if you have an account at SuperUser.com, post this as an answer there, as I have a bounty set up and I’ll happily give you 50 rep. Here’s the link: http://superuser.com/questions/444002 (If you have an account at StackOverflow.com, you may know this site, if not, you may want to create an account :slight_smile: ).

In case you can’t use GLSL on your system (as GLSL display materials textures in the viewport while Multitexture display UV/Image editor textures in the viewport) and you are stuck in Multitexture, the problem lies in some bizarre Blender design .

If you don’t use materials, there’s no problem :
http://i.imgur.com/VHR6u.jpg

But if you setup the materials and texture to render them, even if you set them up correctly, here’s what happens in your viewport, the transparency just turns black (but it will render correctly) :
http://i.imgur.com/xUg5k.jpg

And here’s what is responsible of this, and why Blender has sometime a very odd interface, because there’s a setting that control alpha in materials but is actually not available in the main Blender engine :
click on there and instead of being in “Blender Render” mode (as you are by default), go to “Blender Game” mode
http://i.imgur.com/vjqM4.jpg

Now with your model selected, go into the Material Panel, you will see a section that is not present in the Material Panel when you’re in “Blender Render”

You see the setting “Opaque”, that’s the one responsible of your alpha transparency being black instead of transparent in the viewport while having a material set and being in Multitexture, change it to “Alpha Blend” or “Alpha Clip” and suddenly it will fix the problem, the alpha transparency will work in your viewport again, even when you go back to “Blender Render” mode.
http://i.imgur.com/KInaF.jpg

I did not understand why one wouldn’t be able to use GLSL (my video card is very old and it still works correctly) but to be honest I’ve tried your solution and I like it better, because it somehow renders differently.

Here, there’s screenshots of both solutions:

http://i.stack.imgur.com/hCJKI.pnghttp://i.stack.imgur.com/1smGa.png

And to be honest the solution by Sanctuary (the screenshot on the right) looks better for me because it looks more like what I’ll see when I render it with Three.js (which is what I’m making models for), so thanks to both but Sanctuary, you rock! You even made screenshots and all, thank you for your time, it’s very appreciated and I’m sure people will even appreaciate this when they google for the same things I did :wink: