How to control render result pixel by pixel?

I have created a custom shader in the BabylonJS playground, and I would like to control each individual pixel. Specifically, I want to separate the pixels in odd-numbered columns from those in even-numbered columns, by setting the color red for odd-numbered columns and blue for even-numbered columns.
However, my attempts to do so have not been successful in the playground. In fact, the resulting image shows that there is uneven spacing between odd and even rows.
Here is the playground: custom shader | Babylon.js Playground (

How to make the spacing between red and blue cols seems even?


You can try something like this:

You can change the values 8 and 4 of line 74 to change the thickness of the lines (the second value must be half of the first one so that the red and blue lines have the same thickness).