Texturing in WebGL

Surprisingly to me, getting texturing working in WebGL was actually fairly easy. I didn't have any major hiccups while working on the main project and the only real problems I encountered where during the extra credit portion of the assignment. I don't think the spring break did any good for my familiarity with WebGL though. Coming back to coding it felt like almost like working in a foreign language again. I'm so thankful documentation exists.

The biggest problem I did have on the main portion of the project was getting my sorting for the painters algorithm to work, although it turned out in the end that the issue was with how I was getting the objects position not with how I was sorting. Even so it was fun finally reading up on how javascript array sorting actually works. I've seen the method a lot but I've never had to use it to make my own sorting function so that was fun. The algorithm itself was actually surprisingly simple. I feel like I always get this sense of dread when I hear the word algorithm so it was nice to know that all I really had to was sort the objects by distance.

The part I spent the most time on was getting mipmaps to work, but as usual this was mostly because of my own mistake rather than anything actually being very complicated. Initially I had the

gl.generateMipmap

method running before I was running

gl.texImage2D

This was causing WebGL to throw an error saying that my texture format was not a valid format that could be made into a mipmap. I had placed the code in that order because the comment above texImage2D said that it was sending the image off the WebGL to be processed, and obviously I wanted to make the mipmaps and apply filtering before the texture was sent to be rendered. After digging through the WebGL spec and asking ChatGPT what the heck was going on I eventually took a hard enough look at my code to realize that texImage2D wasn't removing my texture from the buffer it was just creating it and putting it in the right place. Obviously you can't make a mipmap out of a texture that hasn't been created yet.

As I mentioned above I did end up going through the WebGL spec and I used the mdn docs quite a bit throughout this project. My partner had also finished his work before me and so I was able to compare what we had done when I was really stuck. Luckily, as this was a pretty simple assignment neither of us had too many problems as far as I'm aware and so we didn't need too much help from each other. I think a lot of this module was just reinforcing stuff that we had learned before. Applying textures isn't all that different from how we did colors or anything like that. It was really neat to learn the actual meaning behind a lof the terms I've seen so many times in video game settings. Also now I get how to pronounce anisotropic haha!