Best method for RGBA textures

i.e. since jpeg + png24 arent 32bit images.
How do I upload a 32bit image?

Bonus Question/
Also whats the best method to get an images data?
so I can store stuff with compression eg A heightmap, a mesh etc

ATM Im drawing it to the screen + then calling getImageData(…) but this is obviously very messy

cheers zed

You can have alpha channels in a PNG. That gives you 8 bits each for R,G,B and A - giving a total of 32 bits…on hardware that supports that, of course.

ta, well Ive only looked at photoshop8.0

*In PhotoShop, PNG 32 are called PNG 24 (24 bits for millions of colors, the other 8 bits is for the alpha channel)

http://www.utexas.edu/learn/graphics/transparency.html

so even though it saiz 24, apparently its actually 32, but when I try displaying in webgl a png24 eg with SRC_ALPHA, ONE_MINUS_SRC_ALPHA its not displaying correctly (alpha info is ignored).

OK so I google + download what I think are png32 bit images + open them up in photoshop, but they only have RGB channels (i.e. 24bit, though it does look like they have transparency, sorry if that doesnt make sense)
This is different to opening up say a TGA or DDS texture when then I have RGBA channels

Sorry, but I hate Photoshop for texture work. Grab a copy of “GIMP” (it’s free at www.gimp.org) - it does about 90% of the useful stuff that Photoshop does (although it has a lot less irrelevent ‘fluff’).

It’s really simple to choose whether you have an alpha component to the image. What I especially like is that you can paint an opaque layer - then cut away parts with alpha - but the RGB data is still there. That’s really handy when you need to do something funky like putting height data for a displacement map in the alpha plane of an ordinary RGB image.

Even if you don’t use GIMP for everything - grab a copy for this kind of situation.

– Steve


sorry about the delay, My webhost is going out of business (so Ive been distracted)
also the above picture might disappear, if it does it shows that

glenable( blend ) src_alpha, one_minus_src_alpha

is not working with png32
it is working with png8 (look top left, the green is a person png8 texture)

the image is from (a google for png32) thus I assume its a png32 with transparency.
If its not a png32, does anyone have a png32 with a gradient alpha channel for testing purposes?
Ive tried in photoshop + gimp but I get the same result (the alphachannel is ignored)

2 possibilities
A/ the images arent png32 with alpha
B/ png32 with minefield is broken

http://www.google.co.nz/images?q=png32& … 0&bih=1067

http://writer.dek-d.com/mini-jaa/writer … hapter=237

The image with the girl in the brown dress and wings is indeed PNG32 - and it has an Alpha channel - however, all of the pixels in that image are opaque (alpha==1.0) - so it comes out opaque.

(It’s also a non-power-of-two image - so it’s strictly illegal for WebGL…although you might get away with it in some circumstances).

I made this for you:

Grab a copy here: http://sjbaker.org/tmp/transparent.png

OK thanks heaps steve. Its working now
The issue was my understanding of how transparency works in png’s. Its different than other texture formats
Unlike most texture formats (dds,tga,tiff) where the alpha channel contains transparency, with png it doesnt, eg your red texture is considered a RGB texture not a RGBA texture

Well all good now

There is nothing different about PNG’s in that regard…they work just the same as DDS’s or BMP or GIF’s with transparency in them.

ta Steve, btw how are you loading your models ith your webgl stuff? From *.json files (which is how Im doing it) or something else.
Im thinking about perhaps loading them from textures.
Has anyone done this?
Is it worth it?
(smaller file sizes but extra hassle )

Right now, I convert models into pre-initialised JavaScript structures. The bandwidth is about the same JSON and it’s just simpler.

Packing them into binary and downloading that as an image is something I’ve considered - but I haven’t had the time to write code to do that.

Actually thinking about it now its prolly not worth it.
Both file sizes are gonna be about the same (uncompressed)
The win with png is you compress them, but unlike a regular image the image is just gonna look like random noise, thus will have terrible compression

pre-initialised JavaScript structures
Yes I think this is a better method (+ will use it in the final version), better method cause you know exactly when the mesh has been loaded unlike JSON . Though oddly Im using JSON cause its easier when developing (not need to change your code)