Date: 2020-06-07
Demo: main.html
View main.html and main.js on GitHub.
Check the demo. You should see a prominent ring of colors surrounding 2 grey squares. Blank rows separate those colors, and you may notice some rather feint colors to the left of the prominent ones. Every time you click, the prominent colors rotate clockwise around the greys.
The 6x8 texture being displayed is actually a 3x4 grid of point sprites, where each sprite is 2x2 pixels. The feint color at the bottom left of each sprite encodes the texture coordinates of its next color. Upon clicking, each sprite’s bottom right color is updated accordingly. Since we can’t read and write the same texture, there are 2 copies of the 6x8 texture, and rendering “ping-pongs” from one to the other.
A separate rendering pass displays the texture. Each sprite’s texture data is mapped onto a separate quad, so it would be fairly simple to manipulate those quads using the sprite data. For example, we could move a quads over time while drawing frames of a “walking” animation.