Textures in Web GL For Further Reading

Зарегистрируйтесь, чтобы просмотреть полный документ!

Textures in Web. GL

For Further Reading • Angel 7 th Ed: – Section 7. 5: Texture Mapping in Web. GL. • Beginning Web. GL: – Chapter 3 • Learning Web. GL, Lesson 5: http: //learningwebgl. com/blog/? p=507 2

Textured Cube

Summary (1/2) • Open. GL setup (house keeping) for textures: – gl. create. Texture() – gl. bind. Texture() – gl. pixel. Storei() – gl. tex. Image 2 D() – gl. tex. Parameter() 4

Summary (2/2) • Creating image in JS. – Assuming the image file is at the same folder on the server. – Cross-Origin Resource Sharing (CORS) is discussed in P. 60 of the “Beginning Web. GL” e. Book. • Adding texture coordinates to vertex attributes. • Texture lookup in GLSL shaders. 5

Cross-Origin Resource Sharing • Cross-Origin Resource Sharing (CORS) prohibits loading textures from local files. • To solve this, please invoke Chrome with --allow-file-access-from-files • Or use Firefox instead! • More detail in: http: //www. realtimerendering. com/blog/setting-up-a-windows-server-for-webgl/

Textured Cube (HTML code) <script id="vertex-shader" type="x-shader/x-vertex">. . . attribute vec 2 v. Tex. Coord; . . . varying vec 2 f. Tex. Coord; . . . void main() {. . . f. Color = (ambient + diffuse) * v. Color; f. Tex. Coord = v. Tex. Coord; passing to fragment gl_Position = projection. Matrix *. . . } </script> shader

Textured Cube (Java. Script code) var var points. Array = []; colors. Array = []; normals. Array = []; tex. Coords. Array = []; var texture; var tex. Coord = [ vec 2(0, 0), vec 2(0, 1), vec 2(1, 0) ];

function configure. Texture( image ) { texture = gl. create. Texture(); gl. bind. Texture( gl. TEXTURE_2 D, texture ); gl. pixel. Storei(gl. UNPACK_FLIP_Y_WEBGL, true); gl. tex. Image 2 D( gl. TEXTURE_2 D, 0, gl. RGB, gl. UNSIGNED_BYTE, image ); gl. generate. Mipmap( gl. TEXTURE_2 D ); gl. tex. Parameteri( gl. TEXTURE_2 D, gl. TEXTURE_MIN_FILTER, gl. NEAREST_MIPMAP_LINEAR ); gl. tex. Parameteri( gl. TEXTURE_2 D, gl. TEXTURE_MAG_FILTER, gl. NEAREST ); gl. uniform 1 i(gl. get. Uniform. Location(program, "texture"), 0); } function quad(a, b, c, d) {. . . points. Array. push(vertices[a]); colors. Array. push(vertex. Colors[a]); normals. Array. push(normal); tex. Coords. Array. push(tex. Coord[0]); . . .

window. onload = function init() {. . . var t. Buffer = gl. create. Buffer(); gl. bind. Buffer( gl. ARRAY_BUFFER, t. Buffer ); gl. buffer. Data( gl. ARRAY_BUFFER, flatten(tex. Coords. Array), gl. STATIC_DRAW ); var v. Tex. Coord = gl. get. Attrib. Location( program, "v. Tex. Coord" ); gl. vertex. Attrib. Pointer( v. Tex. Coord, 2, gl. FLOAT, false, 0, 0 ); gl. enable. Vertex. Attrib. Array( v. Tex. Coord ); // // Initialize a texture // var image = new Image(); image. onload = function() { configure. Texture( image ); } image. src = "SA 2011_black. gif"; . . . }

Lab Time! • Use MS Paint (小畫家) to draw something and save it to a GIF file. • Use it as the texture for the above “Textured Cube” example. • You may need to create a short cut to Chrome and add --allow-fileaccess-from-files to the target command.

Скачать презентацию Textures in Web GL For Further Reading

fc9cdab34596f9f808c5c0b763f026a4.ppt

Количество слайдов: 13