Getting image-based textures to work in GL is tricky – there’s the conceptual part (getting the texture coordinates, undertanding sampling, how to have you shaders access texture memory, …) and the mechanical part (how to feed texture coordinates as attributes, how to set up the shaders and get them access to textures, setting all the parameters, …). And then there’s the issue of actually getting the image into you program.
In theory, getting an image into a WebGL program is easy: web browsers are really good at loading images (to show them on web pages).
But, while it’s easy to get an image into a web browser, it’s much harder to get it to give your program access to it because of security concerns. So, the obvious methods for getting textures into your program won’t work. The issue is that your image files and the program that access them must come from the same place. And for some reason, some web browsers don’t consider the local disk the “same place.” This has nothing to do with graphics, it has to do with the subtleties of web security.
Just like with shaders, there are 3 options. None are great for class.
- Turn off security. Or use a web browser with different security policies. We don’t recommend turning off security (even for your own programs) because you might forget to turn it back on. While some browsers (Firefox) allow locally read textures to be accessed, there’s no guarantee that they won’t change their mind in the future.
- Use a web server. If you put everything on CS.WISC.EDU (like in your handin directory), everything comes from the same place, and all works fine. This is inconvenient for development (since you want to work locally, we assume). Most web developers run a local server. While this is the “right” choice, it is hard for class since we can’t help everyone set up a web server on their own machine. Plus you need to make sure things will also work on the CS web server when you hand things in.
- Put the image into a string in your program. This was a yucky option for shaders, since it made them hard to edit. For images it’s hard because you somehow have to pack the image into a string in the format that the browser will unpack. Fortunately, a former student (Yusef Sohail) made a handy utility that will do this for you. You upload an image (or a bunch) and it gives you back a JavaScript program that you can load in and it will have your images in strings. (it will even make the Image objects for you).
http://graphics.cs.wisc.edu/Courses/559-f2015/Services/imagebundler/bundler.html
For your assignments in class, we recommend using option 3 because it’s easiest. If you use option 2, make sure that you test your program on the CS web server in your handin directory.
