Can't see error: Assigning texture to 2 triangles

One of the more basic things to do in WebGL.

I’m creating an animation on my site by a simple shader on a single static full-canvas rectangle of two polygons with a single texture. (Technically 3 greyscale textures packed on a single texture which are unpacked via the shader)

I think I have 2-3 problems: I am either unable to assign UV coordinates to the rectangle… I am unable to properly assign the texture to it… and I don’t know how to properly assign “time” to the shader.

You could check it out at

If I made any other mistakes (except sloppy/clean-up suggestions… I’ll save those for after I get it working – very little experience with OpenGL so I don’t want to get more confused until I get this figured out) please tell me.

Like so many people… I just ended up using Three.js… theme works now.

((it needs to be tweaked, and is kinda meaningless without the rest of the site to go atop it, but yeah.))

I like the demo. I don’t know how you’ve made it with three.js but good job.


You could look at the source, I didn’t obfuscate it in any way.

Basically it’s a polygon that takes up the whole camera that I apply the shader (in the html file) to. The shader takes the single texture and pulls the Red, Green, and Blue channels out as three greyscale textures… pans them in different directions and adds them together.

I then just take that greyscale animation and tint it a bunch of ways… from a gradient that goes across the screen in the X direction

red channel is cos^2(3.0gl_FragCoord{horizontal}/Resolution{horizontal})
green channel is cos^2(3.0
blue channel is cos(3.0*gl_FragCoord{horizontal}/Resolution{horizontal} + 180deg) – not squared to make it a bit lighter at the tail.

I then tint THAT by a lighter blue.

I might make the higher values tint orange to make them shimmer… but that’s later.