Use Drawing As Texture

The file textures.html currently does not do anything at all with textures. You will implement texturing of the 3D objects by adding code to the functions doTextureMenu(), drawPrism(), and display(). You shouldn't have to modify any of the other existing functions. You can also add new global variables and other subroutines if you need them.

OpenGL will attempt to apply a 2D image texture to a primitive if GL_TEXTURE_2D is enabled when the primitive is drawn. For drawing a primitive with no texture, GL_TEXTURE_2D must be disabled. 2D textures can be enabled and disabled by calling

glEnable( GL_TEXTURE_2D );

glDisable( GL_TEXTURE_2D );

This is similar to lighting: When texturing is disabled, all texture settings and texture coordinates are simply ignored. When the item selected in the Texture menu is "none", you just need to make sure that textures are disabled.

Your first task is to use the image from the paint canvas as a texture. This should be done if the value of tex in the doTextureImage() function is "paint". You can store the texture in texture object number 0. Recall that texture object 0 is the default texture object that is bound if you have not bound a different one. But since you will be working with several texture objects in this program, you should make sure that you are actually working with texture object zero by calling

glBindTexture(GL_TEXTURE_2D, 0);

before doing anything with the texture. The currently bound texture object is also the one that is used for texturing objects in the display() method, if texturing is enabled.

In this case, the data for the texture has to come from the canvas where the painting is stored. In the program, that canvas is OSC. You can use this canvas as the last parameter in glTexImage2D(). Since the canvas is 512-by-512 pixels, the command becomes

glTexImage2D( GL_TEXTURE_2D, 0, GL_RGBA, 512, 512, 0, GL_RGBA, GL_UNSIGNED_BYTE, OSC);

But remember that, because we don't have mipmaps for the texture, the texture won't work unless you change the minification filter to GL_LINEAR using glTexParameteri(). (Look up the command in Subsection 4.3.3 if you need to.)

You should be able to get texturing working with the image from the paint program. Make sure that you can also turn texturing off by selecting "None" from the Texture menu.

Image Textures

As discussed in class, the function glTexImage2D can be used to load a texture from an HTML Image object. But you have to deal with two problems. First, there is the problem that in JavaScriot, images are loaded asynchronously, and you can't do anything with the image until it has finished loading. The solution to that is to use a callback function. The other problem comes up when you try to load the image from the local file system. Most browsers won't let you do that directly. You need to either configure your browser to allow it, or you need to run a local web server and access the web page through that. To do the latter on the computers in the lab, open a terminal window, cd into the directory that contains the file textures.html, and give the command

python3 -m http.server

Then, to access the page, enter localhost:8000/textures.html in the address bar of your web server.

In the doTextureMenu() function, when tex is not "none" or "paint", then it is a number that tells which texture to use. The number is an index into the global array textureURLs. That is, the URL that you need to use when you load the image is textureURLs[tex].

There is another global array, textureObjectIDs, which is filled with −1's. The idea is that a given texture image should only have to be loaded once, when it is first used. Wen it is loaded, you can create a texture object for it, bind that texture object while you are loading and configuring the texture, and store the texture object ID in the textureObjectIDs array. When the user selects a texture from the menu, if the corresponding value in textureObjectIDs is −1, then you have to load the texture. But if the value in textureObjectIDs is not −1, then all that you need to do is bind the texture object (and make sure texturing is enabled).

In the case where you have to load the texture, you have to deal with the asynchronous nature of image loading. In general outline, the code for loading the texture image, and using it the first time, can look like this:

let img = new Image();  // Create an HTML Image object
img.onload = function() { // Callback function to be called after loading.
    // Create a texture object and bind it  (and save the ID)
    // Load the image into the texture with glTexImage2D.
    //     (NOTE: image width and height are given by img.width and img.height)
    // Configure the texture (including the minification filter).
};
img.onerror = function() { // To be called if an error occurs while loading.
    // Respond to error.  For example:  alert("Texture could not be loaded.");
};
try {
   img.src = URL;  // Set img.src to the URL for the image.
} catch (e) {
    // some browsers throw a security exception when loading from file system.
    // Respond to error.  For example:  alert("Texture could not be loaded.");
}
// Might want to set up an appropriate state during image loading, such
// as showing a message that texture is being loaded, but then you have to
// remember to get rid of the message later.

In a serious web app, it can be difficult to decide exactly what to do while waiting for the image to load, but for this little program, you don't need to do anything fancy.

let horizontalScale = Number( document.getElementById("hscale").value );
let verticalScale = Number( document.getElementById("vscale").value );