I just started trying to learn myself some basic WebGL coding and so far it has been going great, until I tried rendering a simple 2D texture...
This is the first time I'm really doing anything related to computer graphics and especially WebGL/OpenGL. So if there are anything in my code that is blatantly stupid I sincerely apologize for that, please be gentle.
So what I'm trying to do is to draw a simple texture which I fetch from a html img element. I'm a little bit lost on how to correctly tell the shaders where on the viewpoint I want them to render my texture. I tried a few different ways and googled for similar problems but without results. The concept of how the different buffers are supposed to transfer data simultaneously to the shaders is a bit hard for me to understand.
When only drawing points/lines using gl.drawArrays(gl.POINTS...) everything works fine. But when I try to implement drawing of triangles using gl.drawElements everything goes to hell.
My code(Updated with suggestion from comment) can be found at http://pastebin.com/T0iBfbcA
So what I'm doing wrong here?
Ok, so I found the problem. First of I didn't add a pointer for the texture coordinates as said by ratchet freak(Thank you!).
After that however, the screen was still black and nothing worked. It turned out the issue originated from the image data. It didn't fire any errors or exception it just didn't work. But instead of getting the data from a img element I first drew it on a canvas then I used the canvas as input for the texture. This worked and everything is now fine and dandy.
I've updated the pastebin aswell to delete some minor issues that appeared when I could actually see the texture.