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 http://www.loosescrew.ca/themetest/

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.

Thanks.

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 http://www.loosescrew.ca/themetest/webglBGHigh.png 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
gl_FragCoord{horizontal}/Resolution{horizontal}+90deg)
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.