More on Textures and WebGL, Advanced uses of Texture Mapping

 Today we want to continue our discussion on texture mapping. The typical use of texture mapping is to simply wallpaper an image on top of certain objects. 

We  initially attempted to build some intuition behind texture coordinates, and how to define them. This is a texture image that is wallpapered. The methodology that we see is taking an image that is through an online resource and map it.

We create a WebGL Texture Object and specified to a texture mapping unit, associated directly to the texture memory, which lookups into images for the purposes of texturing. All modern GPUs are required to have at least 8 texture mapping units. We bind the texture into a 2D mapping. Then we initialize a blank image, and subsequently do the same thing with the second texture, then write the code that loads up the image. For both of these textures, do a cross origin option and allow a web resource to be loaded up from a web server different from the one that is actually loaded up in the application. Then get a source of the image. Call the loadTexture() function, and this would take care of transferring from the CPU memory to the GPU memory. 

var texture1 = gl.createTexture();

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_2D, texture1);

gl.texImage2D(gl.TEXTURE1);

var image1 = new Image();

var texture2 = gl.createTexture();

gl.activeTexture(gl.TEXTURE1);

gl.bindTexture(gl.TEXTURE_2D, texture2);

gl.texImage2D(gl.TEXTURE_2D, texture2); 

var image2 = new Image(); 

function initTextureThenDraw() {

image1.onload = function(){loadTexture(image1, texture1);};

image1.crossOrigin = "anonymous";

image1.src = "https://upload.wikimedia.org/wikipedia/commons/e/e3/Cochranella_susatamai03.jpg";

image2.onload = function(loadTexture(image2, texture2);};

image2.crossOrigin = "anonymous";

image2.src = "https://media.nationalgeographic.org/assets/photos/000/109/10962.jpg";

window.setTimeout(draw, 200);

}

the normal draw function is called after 200ms just to give the algorithm time to draw that given image from the web. 

We used a technique called mip-mapping to avoid aliasing. 

Suppose we want to map a puppy to a checkerboard pattern. 

Having a text parameter as NEAREST has jagged corners.

Changing this to LINEAR makes it significantly more aesthetically pleasing. 

 For every center of a rasterized pixel, we need to know what color we are going to display. 

We take the values of the points around the specific point and average them. It's blacker as it goes towards the center of a black pixel and whiter when it goes towards the center of a white pixel. 

Using "nearest" texture image pixels leads to jaggles. Linear interpolation alleitates some of these artifacts, by using interpolated colors. 

The second source of the problem is looking at the side facets of the cube. 

When we see somehting at a far enough distance, a pixel should take the average of all of the fractional pixels. Typically we see something that looks like a gray image. 

If we go back to a mipmap, and we create a rotation or a grazing angle, the entire thing will dim into something that looks soft of gray, and a stronger angle will get it to be almost completely gray. Usually a mipmap is actually much more aesthetically agreeable. 

gl.generateMipmap(gl.TEXTURE_2D);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); This is to prevent overrepresentation on the sides. 

If I have fewer pixels or a tighter density, then I should be displaying a smoothed-down version that depends on the ratio of the screen pixels to the texture image pixels. Smoothing by a factor of 2 averages the pixel by a 2x2 cluster. 

An image on the highest level is on the bottom of a pyramid, and pixel is created  by averaging every 2x2 pixels. 

We can select once again once we pick a specific image. We can interpolate between many individual levels. 

We can have a pattern and subsequently do bilinear interpolation in order to average them. 

gl.generateMipmap(gl.TEXTURE_2D);

gl.texParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

We also use a linear interpolation to create an average value. Using textures take whatever texture image you want, and resize it to a square in photoshop or something like that.

The following represents a seamless transition between images. 

I can use to gl.CLAMP_TO_EDGE if you want to clamp to the nearest edge.  Do MIRRORED_REPEAT if you actually want to mirror the image. 

These are options you can use with your pleasure. The final technicalities is you need to buffer and bind the WebGL texture objects to the appropriate texture binding units. 

gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);

gl.vertexAttribPointer(shaderProgram.texcoordAttribute, textureBuffer.itemSize, gl.FLOAT, false, 0, 0); 

gl.activeTexture(gl.TEXTURE0);

gl.bindTexture(gl.TEXTURE_2D, texture1);

gl.activeTexture(gl.TEXTURE1); 

gl.bindTexture(gl.TEXTURE_2D, texture2);

gl.drawElements(gl.TRIANGLES, triangleIndices.length, gl.UNSIGNED_BYTE, 0);

We get an assimilation between the names of the shaders. 

I want to make aware of the spirit that occurs, and implement something and use both advanced machinery and texturing for shadows and reflections. There is also bumpiness in objects and color of environmental settings as well. 

To have things be in the opposite direction, switch the greater than sign to a less than sign.

  A skybox is a texture applied to the far reaches of my environment, imagining I live inside of a box.. We can flatten out edges into a cube, and then "stich" the images to a panorama. When those are done nicely, it's actually difficult to see these discontinuites. I can even use something to create the illusion of reflectivity.