Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016

Transcription

1 Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016

2 In brief Starting with a simple model

3 In brief Caveat : Issues with sampling & aliasing associate texture coordinates with primitives (can now do procedural textures)

4 In brief Caveat : Loading files, cross-origin issues load an actual image, use mipmap (and figure out how to use it from shaders)

5 In brief then combine texture with color

6 In brief then combine texture with color, or lighting

7 Add-ons Repeating/clamping Texture coordinates

8 Add-ons Multiple textures

9 Add-ons Bump mapping More effects next week

10 Texture coordinates jsbin.com/pitetahihu/edit.js start(){ initshaders(); senddata(); draw(); }

11 Texture coordinates jsbin.com/pitetahihu/edit.js start(){ initshaders(); senddata(); draw(); } vertexshader fragmentshader

12 Texture coordinates jsbin.com/pitetahihu/edit.js start(){ initshaders(); senddata(); draw(); }

13 Texture coordinates jsbin.com/pitetahihu/edit.js start(){ initshaders(); senddata(); draw(); }

14 Aliasing jsbin.com/pitetahihu/edit Mismatch between: Texture feature size (color tiles) Fragment size

15 Texturing with images jsbin.com/varefelatu/edit (texture image)

16 Applica'on Program The full fixed-function pipeline (1992) Graphics Driver Command Buffer (Triangle Queue) Vertex Queue Vertex Processing (TCL) Vertex Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests Vertex shading Geometry Shading Pixel Shading 8 TMU minimum (default : texture unit 0) Texture Memory Render to texture Frame Buffer

17 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() }

18 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() }

19 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() }

20 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() }

21 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() } Options gl.texture_2d gl.texture_cube_map

22 Texturing with images jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() } Options gl.linear_mipmap_linear gl.linear_mipmap_nearest gl.nearest_mipmap_linear

23 Texturing with images jsbin.com/varefelatu/edit fragmentshader.js start(){ initshaders(); senddata(); inittextures(); draw() } attach to TMU #0

24 Texturing with images jsbin.com/varefelatu/edit fragmentshader.js start(){ initshaders(); senddata(); inittextures(); draw() }

25 Texturing with images jsbin.com/varefelatu/edit fragmentshader.js start(){ initshaders(); senddata(); inittextures(); draw() } lookup returns vec4

26 Texturing with images (non-mipmap filters) jsbin.com/varefelatu/edit.js start(){ initshaders(); senddata(); inittextures(); draw() } Options gl.linear gl.nearest

27 jsbin.com/qoyudupoqe/edit Texturing with images (asynchrony issues).js start(){ initshaders(); senddata(); inittextures(); draw() }

28 Texturing with images (cross-origin issues) jsbin.com/qoyudupoqe/edit.js start(){ initshaders(); senddata(); inittextures(); draw() }

29 Texturing with images (cross-origin issues) jsbin.com/varefelatu/edit Cross-origin resource sharing disallowed More restrictive policy for Canvas drawing than viewing in web page (img tag) Some browsers even don t recognize file:// as a shared origin

30 Texturing with images jsbin.com/qoyudupoqe/edit (cross-origin issues) workarounds Must be CORS-approved

31

32 Texturing with images jsbin.com/gekavofimu/edit (cross-origin issues) workarounds

33

34 Texturing and lighting jsbin.com/kecizocura/edit jsbin.com/voyexukevi/edit fragmentshader

35 Multiple textures jsbin.com/popojatufi/edit fragmentshader.js start(){ initshaders(); senddata(); inittextures(); draw() }

36 jsbin.com/weluvebodu/edit Multiple textures.js start(){ initshaders(); senddata(); inittextures(); draw() }