View Full Version : Can't see error: Assigning texture to 2 triangles

03-18-2012, 01:15 AM
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.

03-18-2012, 10:35 PM
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.))

03-19-2012, 03:57 PM
I like the demo. I don't know how you've made it with three.js but good job.

03-19-2012, 05:09 PM

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.0*gl_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.