Hello, everybody! Today’s post is going to be about how to achieve the pattern we saw in the other post and try to understand it. This pattern allows the visualization in 3D of an 8 view autostereoscopic 3DTV.

Do you remember the pattern?

As can be seen in the image, the pattern consists of a rearrangement of the information provided by some pixels of the 2×4 image. This rearrangement follows the order indicated by the sequences of triplets in the pattern, as can be seen in the right-most image in the figure above. The information of each triplet means where is the information taken from, each number represents an image of the 2×4. The rearrangement stores each RGB value of a pixel of the 2×4 image along 3 rows. It is safe to say that each 3 rows of the interleaved image the complete information about one row of each image belonging to the 2×4 image is completed.

For instance, the numbers 076 in the first pixel, means that we will obtain the R value from the pixel 0 of the image 0 ([255,0,0]), the G value from the pixel 0 of the image 7([255,255,255]) and the B value of the pixel 0 of the image 6([0,0,0]). This combination gives us the color (255,255,0) which translates to yellow.

If we continue reading the pattern, we see that the same image is accessed multiple times(the image 0 is accessed in pixel 0,2,5, interleaveetc..), What we should do when we access the same image again? Which pixel of that image should we extract the R G or B? Should we read the same pixel as the previous access, or should we move on with the next pixel?

Well since we said that the information of row of an image of the 2×4 is contained in three rointerleaved image, what we should do is access the next pixel.

For example in pixel o ([0,76] we get the value R from pixel 0 of the image 0, however, on pixel 2 [210] we get the blue value from pixel 1 of camera 0. This way, when we finish traversing x row of the pattern (interleaved image) we have at least 1/3 of the information of each x row of the images that create the 2×4 image. This formulation has a problem. If some one realizes drop a comment!

So what do we know about the image/camera access pattern until now?

- The pattern descends in the direction of the columns forming triplets of numbers corresponding to the RGB values
- Each new row the pattern begins with 1 less than it started in the previous row.
- Each 3 rows the pattern begins with the same number as the previous row.
- The pattern is composed of 8 images(views) that must be rearranged.
- The pattern happens in an image of aspect ratio 16:9.

So basically what we need now is a which gives the starting value of the pattern at that pixel. For instance, we need to know that at pixel (0,0) or top-left corner, the starting value of the pattern will be 0, on the pixel (0,1) the pattern will start at 5, etc.

The problem statement is the following: given the characteristics of the pattern shown above, can you find a formula that given the position of the pixel(row and column) gets the value of the pattern in that pixel?

to solve this, we are going to break the problem into chunks.

First of all, let’s change dimensions. We are dealing with a 2D Matrix, but we could treat it as it was an array of values.

For that, we are going to use a simple formula.

where P, in this case, is the position in a 1D array of a pixel given its row(r) and column(c) and the width(w) of the row.

Now, we need a way of limit our 1D positions to a range [0,7] or the 8 views. This way each pixel will have a number to start the pattern.

We know, that each pixel has 3 RGB values, meaning that the next pixel should start in n+3 , not in n+1.

We also know that our pattern starts with 1 less than it started the last row. This means that each w (width) values the pattern will receed a whole set of views. 8 views are contained in 3 pixels, so we only need to substract 3 pixels per row to our equation.

We have also seen, that each 3 rows, the row repeats the number in which it started. So theoretically each 3 rows we are going to substract one row, it is important that only the whole part is substracted and not the decimal part. This translates to . Also we need to fix the previous step to avoid substract one pattern length each 3 rows.

With that formula we achieve the pattern to be descending row-wise, however, column wise, it is still ascending. One quick shortcut to fix this is to traverse our columns from right to left. Also, that very same formula can be reduced to a simpler expression.

The simplified version:

With this formula, we have the foundation to start building our shader. This formula is ideal because it relays only in information about the position of the pixel: row and column. So per each pixel, we obtain the number in which the pattern starts for the pixel. Fragment shaders work just like this, per pixel (fragment, sorry puritans) and we can extract the information about the row and column we are looking if we know the final resolution of our image.

UPDATE:

Here you have a visualization of the pattern along with that of a Full-Screen Quad. The pattern is the one produced by the formula, however, pixels can only display RGB values in the range of [0,1] so the values that appear here, are the numbers of the pattern divided by 7. So For example the pattern [0,7,6] now becomes [0.0,1,6/7] which in range [0,255] becomes [0,255,219] which is the cyan color you can see in the demo below. Press the button that says “PatternShader” to preview the pattern in the fashion mentioned above.

Full Screen Quad and pattern WebGL Demo