Billboards A texture mapped polygon, which always faces...
Transcript of Billboards A texture mapped polygon, which always faces...
![Page 1: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/1.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Billboards!!
A texture mapped polygon, which always faces the viewer
38(58)
38(58)
![Page 2: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/2.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Billboards!!
2D images placed on surfaces that are always facing the camera!
!“Sprites” in older action games!
!Advanced version: “impostors”!
!Often used for complex objects even today!
!Example: forests
39(58)39(58)
![Page 3: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/3.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Classic example: Doom!!
Big billboards. No 3D models.
40(58)40(58)
![Page 4: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/4.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Classic example: Dark Forces!!
Big billboards. Some 3D models.
41(58)41(58)
![Page 5: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/5.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Problem with too few views.
42(58)42(58)
![Page 6: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/6.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Implementing billboards!!
• Billboards generally need transparency!!!!!!!!!!
=> Special care is needed to avoid problems with Z-buffering!
43(58)43(58)
![Page 7: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/7.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Transparency!!
1) Sort by distance (Painter's algorithm)!!
• Perfect results!• Supports semi-transparency!
• Required sorting and a separate stage!!
2) Discard fragments!!
• No semi-transparency!• Some artifacts at edges!
•Very easy
44(58)44(58)
![Page 8: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/8.jpg)
Information Coding / Computer Graphics, ISY, LiTH
#version 150!!out vec4 outColor;!!in vec2 texCoord;!uniform sampler2D tex;!!void main(void)!{!!vec4 t = texture(tex, texCoord);!!if (t.a < 0.01) discard;!!else!!!outColor = t;!}
discard; as cheap!solution to transparency
45(58)45(58)
![Page 9: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/9.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Implementing billboards!!
• Texture files must support transparency!!!
File formats:!!
TGA!PNG!!
TGA: simple format, good for demos!!
Libraries for PNG:!libPNG!
PNGlite by Daniel Karling
46(58)46(58)
![Page 10: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/10.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Implementing billboards!!
Variants:!!
• World oriented billboard!• Viewpoint oriented billboard (face the
camera in full 3D)!• Axial (viewpoint) billboard!
• View plane oriented billboard!• View plane oriented axial billboard
47(58)47(58)
![Page 11: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/11.jpg)
Information Coding / Computer Graphics, ISY, LiTH
View plane oriented billboard!!
Easy! Zero out rotation!!!
Good - no overlaps!
View plane oriented
Viewpoint oriented
48(58)48(58)
![Page 12: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/12.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Axial billboard!!
Rotate around Y
Axial!Suitable for
trees etc
Non-axial
49(58)49(58)
![Page 13: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/13.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Full 3D viewpoint oriented billboard!!
Change of basis solution!!
Z vector from viewpoint, pick an up vector (usually Y axis), form basis with cross products
50(58)50(58)
![Page 14: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/14.jpg)
Information Coding / Computer Graphics, ISY, LiTH
World oriented billboard!!
No camera dependent rotation
Example: Tomb Raider 2 Terracotta warriors (Temple of Xian)
51(58)51(58)
![Page 15: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/15.jpg)
Information Coding / Computer Graphics, ISY, LiTH
A grid of billboards
Non-axial AxialViewpoint oriented
View plane oriented
World oriented billboard not in grid
Construct basis
Clear rotations
Construct axial rotation
Construct basis based on view
plane
52(58)52(58)
![Page 16: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/16.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Billboard variants1) Always facing the camera.!One triangle or quad is enough!
2) A few polygons.!Good for world oriented billboards.
3) Multiple billboards.!Simplify complex objects om moderate distance.
53(58)53(58)
![Page 17: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/17.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Temple of Xian!!
Statues behind first row are billboards!
54(58)54(58)
![Page 18: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/18.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Billboard variants!!
The objects on the plate are billboards - some 2-poly!
55(58)55(58)
![Page 19: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/19.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Application: Particle systems!!
Explosions, rain, fountains, smoke...!!
Excellent billboarding application!!
Many small objects - good opportunities to ”cheat” with transparency problems
More about this in the Animation part!
56(58)56(58)
![Page 20: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/20.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Impostors!!
”Live” billboards!!
Render to texture, update sometimes!!
Render as other billboards!!
Decide when to update
57(58)57(58)
![Page 21: Billboards A texture mapped polygon, which always faces ...computer-graphics.se/TSBK07/files/pdf18/9c billboards.pdf · Billboards!! A texture mapped polygon, which always faces the](https://reader034.fdocuments.us/reader034/viewer/2022050103/5f42344372d15459a578f7b1/html5/thumbnails/21.jpg)
Information Coding / Computer Graphics, ISY, LiTH
Large worlds, conclusions!!
HIgh-level VSD to limit processing to visible parts - start with frustum culling!
!Level-of-detail to reduce unneccessary processing of
detailed models!!
Use billboards for extreme simplification on large distance, particle effects etc!
!!
If we can’t see the difference, use the cheaper solution!
58(58)58(58)