Texturing
2
3
Some words on textures Texturing = mapping 2D image to a model (*You will hear more on other texturing- methods in the course.) Not a trivial task! 4
Texturing how it works 5
UV coordinates Enable unambiguous applicaoon of texture to model Are applied for each vertex And interpolated for each fragment Run from 0 1 6
UV coordinates Generate UV s in 3D sowware with the model 7
Problem: ArOfacts We see textured objects from near and far 1 px of model on screen == 1 px of texture OK! 8
Problem: ArOfacts We see textured objects from near and far 1 px of model on screen == 1 px of texture OK! 1 px on screen smaller/bigger OH OH! ArOfacts! Undersampling, texture info is lost 9
SoluOon: Texture filtering More than one texture- pixel can influence the resulong screen- pixel color InterpolaOon (at runome or in preprocess) Magnifica3on Minifica3on 10
MagnificaOon Super sampling of textures Nearest neighbour Bilinear 11
Bilinear interpolaoon 12
Bilinear interpolaoon 13
Bilinear interpolaoon 14
MinificaOon via Mipmpas Idea: Pre- filter image to avoid arofacts Filter and downsample by factor 2 in each step Creates Mip- Map image pyramid from level 0 down to 1x1 image Level 4 Level 3 Level 2 Level 0 Level 1 15
Mipmaps Use suitable level Or: Trilinear interpola3on between two levels Determine two mipmaps that fit Bilinear interpolaoon in each level Now interpolate the two results! 16
Anisotropic Filtering Triliniear filtering not always sufficient: For steep angles 17
Texture wrapping Different wrapping modes can be set for each dimension of the texture GL_REPEAT GL_MIRRORED_REPEAT GL_CLAMP_TO_EDGE repeat mirror clamp edge 18
1. Create Texture Texture creaoon var texture = gl.createtexture(); 2. Ini3alize/Bind Texture gl.bindtexture(gl.texture_2d, texture); (In WebGL: either gl.texture_2d or gl.texture_cube_map) 19
Texture creaoon 3. Set filtering parameters gl.texparameteri( GLenum target, GLenum pname, GLint param ); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear_mipmap_linear); 20
Filter parameters gl.texparameteri(glenum target, GLenum pname, GLint param); GL_TEXTURE_MAG_FILTER GL_TEXTURE_MIN_FILTER GL_TEXTURE_WRAP_S GL_TEXTURE_WRAP_T MagnificaOon filter MinificaOon filter Wrapping mode Wrapping mode 21
Filter parameters gl.texparameteri(glenum target, GLenum pname, GLint param); GL_NEAREST GL_LINEAR GL_NEAREST_MIPMAP_NEAREST GL_LINEAR_MIPMAP_NEAREST GL_NEAREST_MIPMAP_LINEAR GL_LINEAR_MIPMAP_LINEAR Nearest neighbour Bilinear interpolaoon Best fimng mipmap w nearest neighbour Best fimng mipmap w bilinear interpolaoon Generate values from 2 Mipmaps with nearest neighbour and interpolate the two results Generate values from 2 Mipmaps with bilinear interpolaoon and interpolate the two results ( = trilinear) 22
Texture creaoon Anisotropic filter via Extension gl.getextension('ext_texture_filter_anisotropic') var max = gl.getparameter(ext.max_texture_max_anisotropy_ext); gl.texparameterf(gl.texture_2d, ext.texture_max_anisotropy_ext, max); 23
Texture creaoon 4. Upload image data gl.teximage2d( GLenum target, GLint level, //mipmap level GLenum internalformat, //must match format GLenum format, GLenum type, //type of pixel data HTMLImageElement image ) 24
Texture creaoon 4. Upload image data var image = new Image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); //Upload imagedata to bond texture object: gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, image); } image.src = 'texture.png'; 25
Texture creaoon 5. Create Mipmaps gl.generatemipmap(glenum target); gl.generatemipmap(gl.texture_2d); Restric3ons in WebGL! Texture must be a power of two size! (If not, there s only limited support: no repeaong, no mipmapping ) 26
Texture creaoon 6. Use texture //bind texture gl.bindtexture(gl.texture_2d, my_texture); //set as uniform var samplerlocation = gl.getuniformlocation(program, "texture"); gl.uniform1i(samplerlocation, 0); //TextureUnit0 //Fragmentshader uniform sampler2d texture; gl_fragcolor = texture2d(texture, fragmentuv); 27
Texture Units Allow to use more than one texture Bind each Texture to a TextureUnit 28
Texture Units Tell WebGL which Unit is acove (Default: Unit 0) Upload data to bound unit Set uniforms in shader with index of unit gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, my_1st_texture); glteximage2d( ) //upload data gl.uniform1i(1st_uniform_location, 0); //Unit0 gl.activetexture(gl.texture1); gl.bindtexture(gl.texture_2d, my_2nd_texture); glteximage2d( ) //upload data gl.uniform1i(2nd_uniform_location, 1); //Unit1 29
DEMO 30