2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced...
-
Upload
michael-webb -
Category
Documents
-
view
224 -
download
0
description
Transcript of 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced...
![Page 1: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/1.jpg)
2010.4.8
![Page 2: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/2.jpg)
Overview
Basic requirements of implementation
Image resource Texture mapping Advanced requirements of
implementation KGL sprite class & example Demo
![Page 3: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/3.jpg)
Basic requirements of implementation ( 1/2 ) Load image files that you need ,
transform their data into OpenGL and bind them in a proper way
Image color keying for background removal
background to remove
character to draworiginal image
background removal
zoom in color keying
![Page 4: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/4.jpg)
Basic requirements of implementation ( 2/2 ) Hold the position and size of the
sprite , and so we can move it or span it freely
By controlling the texture coordinates , we can play a sequence of animation frames in a same image
Time t0
Time t0+1
![Page 5: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/5.jpg)
Image resource
Multiple images or Texture AtlasFour Image with difference Texture ID
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timer
![Page 6: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/6.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 7: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/7.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 8: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/8.jpg)
Image resource
Multiple images or Texture Atlas
Packing all texture in one atlasSwap Texture ID in timer
Swap Texture coord. in timerFour Image with difference Texture ID
![Page 9: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/9.jpg)
Texture mapping
(0, 1)
(0, 0)
(1, 1)
(1, 0)
texture
The coordinate of a texture is normalized into an 2d unit square
(0.36, 0)
(0, 0.45)
(0.36, 0.45)
![Page 10: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/10.jpg)
Advanced requirements of implementation ( 1/2 ) ( In this section , we take more from
OpenGL ) Taking advantage of alpha buffer
and depth buffer , we can happily create the effect of transparency with little effort This effect alpha
blending is a standard function in OpenGL
To use it , it is necessary to set frame color buffer as RGBA
The value of alpha to form different level of transparency can be set both in image data and in color4 value
![Page 11: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/11.jpg)
Another things…
Again , we control the texture coordinates to add the function of scrolling the image
It is convenient and useful to perform some small sprite automatic action if we add a frame ( or time ) counter into it In this example , a sprite of
spotlight is drawn over a spriteof wall texture , and the spot light is controlled to scroll again and again
![Page 12: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/12.jpg)
KGL sprite class
![Page 13: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/13.jpg)
KGL sprite example(1/2)
KFLoadText() will return the index of the texture we load
![Page 14: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/14.jpg)
KGL sprite example(2/2)
mapping the texture onto a quad
![Page 15: 2010.4.8. Overview Basic requirements of implementation Image resource Texture mapping Advanced requirements of implementation KGL sprite class.](https://reader035.fdocuments.us/reader035/viewer/2022062306/5a4d1b387f8b9ab05999d8b2/html5/thumbnails/15.jpg)
DemoDemo
Sequentially load the textures below, then it will become an animation