Planar YUV420 data layout

Question

In my project I use OpenH264 codec, which is said to output data in the YUV 4:2:0 planar format. After decoding I get one array with width * height * 1.5 elements, which, when displaying, looks like this image:

http://o3d.googlecode.com/svn/trunk/samples_webgl/assets/shaving_cream.png

Why there are four areas below the main one (which contains Y - responsible for grayscale - elements ), instead of two, like on my second picture? Is that mean that the format is different or am I wrong and my world just collapsed?

I thought that the resoult should have looked like this:

Answer 1

The accepted answer is totally correct, I'm just adding more information about the conversion to YUV values:

size.total = size.width * size.height;
y = yuv[position.y * size.width + position.x];
u = yuv[(position.y / 2) * (size.width / 2) + (position.x / 2) + size.total];
v = yuv[(position.y / 2) * (size.width / 2) + (position.x / 2) + size.total + (size.total / 4)];

Reference: https://en.wikipedia.org/wiki/YUV

Answer 2

It is exactly the way you assume. You are just overlooking that there are half as many U and V pixels across the width of the image. So the even numbered lines of U data are on the left, the odd numbered ones on the right. Followed by the V data.

To get it arranged the way you want to look at it, the decoder would have to interleave the U and V data. It doesn't do that. Just don't start looking at the image until you converted to RGB :)

Answer 3

The diagram from thiagolr is very accurate. An accurate diagram that looks more like yours would be

The reason yours looks like it has 4 pictures is as explained by Hans Passant.