By now you should have received an invitation to provide a course evaluation. If you have not received an invitation, or have technical difficulty accessing the link, I encourage you to contact askit@nyu.edu. General questions can be sent to ce.cas@nyu.edu.

NOTE: When you fill out the course evaluation, remember that the "text" of this course is the set of on-line course notes.

Today we mostly focused on texture mapping, but first we finished the work on sliders. Where we had left things off in our previous lecture, the sliders neglected to update properly when the user switched to a different object.

We made sure that the slider values for the selected object are kept up to date even when the user selects a different object. We did this by adding the following code at the end of the animate function:

   if (selectedObject) {
      rotateXSlider.value = 50 * selectedObject.rotate[0] + 50;
      rotateYSlider.value = 50 * selectedObject.rotate[1] + 50;
      rotateZSlider.value = 50 * selectedObject.rotate[2] + 50;

      scaleXSlider.value = 25 * selectedObject.scale[0];
      scaleYSlider.value = 25 * selectedObject.scale[1];
      scaleZSlider.value = 25 * selectedObject.scale[2];
   }

For the remainder of the class we focused on texture mapping. This involved a number of steps:

We added code that paralleled the code for creating shapes. This provided a set of buttons, one for each choice of texture, to describe what texture to use when creating a new object.

The first (default) button in the set specifies no texture.

I provided just brick.png as an example. In the attached code I have added a second example, polkadots.png.

Remember that both the width and the height of your texture image file need to be powers of two. The Mipmapping step needs that to work properly.

We browsers do not normally allow you to access local files on your computer, for security reasons. Therefore in order to do development on your own computer that involves loading texture images, you need to make the browser think it is talking to a Web server.

One way to do this is to start a simple HTTP server. Python already has a built in way to do this. In the downloadable zipfile, I have provided you with a simple script to start such a server (and also to stop any similar servers that you may already have started, just to avoid confusion).

You run it by typing:

   startserver

This will start a local server on port 80. So after starting the server, to run your project you type the following into the address bar of your browser:

   localhost:80

When the grader runs your uploaded project from your NYU website, none of this will be an issue, because then you will already be running from a Web server.

In the places in ,,canvas1.onRelease();; where we create a new object or modify the color of ane existing object, we added code to also attach the currently specified texture to the object.

To review how we did that, you can look at the code within canvas1.onRelease() in the downloadable zipfile.

I described how Mipmapping works. In the coming days I will put more detail about that into these course notes.

We added the following code to the place in the library where a triangle mesh shape is actually rendered:

   // INDICATE TO THE FRAGMENT SHADER THAT WE WILL BE TEXTURING THIS OBJECT

   setUniform('1f', 'uTexture', this.textureSrc ? 1 : 0);

   if (this.textureSrc)
      if (! this.texture) {

         // INITIALIZATION: ASYNCHRONOUSLY LOAD THE IMAGE FILE AND BUILD THE TEXTURE.

         let image = new Image();
         image.onload = function() {
            gl.bindTexture   (gl.TEXTURE_2D, this.obj.texture = gl.createTexture());
            gl.texImage2D    (gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this);
            gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
            gl.texParameteri (gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
            gl.generateMipmap(gl.TEXTURE_2D);
            gl.bindTexture(gl.TEXTURE_2D, null);
         };
         image.obj = this;
         image.src = this.textureSrc;
      }
      else {

         // ONCE THE TEXTURE HAS BEEN INITIALIZED: TELL THE FRAGMENT SHADER TO USE IT.

         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this.texture);
         setUniform('1i', 'uSampler', 0);
      }

In order for all of this to work, we needed to declare the following uniform variables in the fragment shader:

   uniform float uTexture;      // DO WE SHOW THE TEXTURE?
   uniform sampler2D uSampler;  // SAMPLE THE TEXTURE USING vUV.

Then in main() we use the texture to modify the color:

   vec4 texture = texture2D(uSampler, vUV);
   color *= mix(vec3(1.,1.,1.), texture.rgb, texture.a * uTexture);

The code for all of this is in hw10.zip.

By the end of this coming weekend, please put up onto your website your proposal for a final project. You can do anything reasonable for this project. Think of the "expected amount of work" as around the same as two weekly assignments.

This is your chance to focus on some aspect of computer graphics that particularly interests you, whether it be rendering, modeling, animation, the user interface, or something else.

The "topic" can be anything that you find interesting, whether creating a game, building a musical instrument, creating a physics demonstration, building a drawing or sculpting tool, creating a 3D puzzle, or exploring a topic in architecture, chemistry, physics or anything else. Feel free to think outside the box.

The most important thing is that you post something by this weekend, so that I can have enough time to review what you posted before our Tuesday class.