2.5 Billboarding
We will look at a technique called billboarding this tutorial. billboarding is a technique of rendering, such that a flat object always faces the viewer no matter viewed from which direction. it has application in games to show meta information, such as the health bar, or in visualizations to show labels. or in games to show grass and vegetation.
Launch Playground - 2_05_billboardin the first two use cases, billboard is used to show 2D meta information, we want the information they show be always visible regardless of scene rotation. hence we want them to always face the viewer. in the last use case, rendering geometry accurate grass and vegetation is almost impossible due to complexity, hence we want to fake it by rendering screen facing 2D grass images. but as we rotate the scene, we don't want the viewer to discover that the grass is actually a 2D plane, hence we need to adjust the 2D plane's rotation to let it face the view at all time.
in this tutorial, we will render a rotating scene by rotating the camera. with a texture rendered in the background that doesn't rotate with the scene. The background is a billboard. The key aspect of this tutorial is to learn how to keep the background face the camera. This is an opportunity to test our understanding of the transformation and projection matrices.
the key idea of this demo is simple. we render everything else other than the billboard using a normal model view matrix, and then we modify the model view matrix, keep the translation part, and remove the rotation and scaling part.
the key line of the code is the following, let's explain.
let modelViewMatrixBillboard = glMatrix.mat4.fromValues(1, 0, 0, modelViewMatrix[3],
+ width="32" fill="#dadadb" viewBox="0 -960 960 960">in the first two use cases, billboard is used to show 2D meta information, we want the information they show be always visible regardless of scene rotation. hence we want them to always face the viewer. in the last use case, rendering geometry accurate grass and vegetation is almost impossible due to complexity, hence we want to fake it by rendering screen facing 2D grass images. but as we rotate the scene, we don't want the viewer to discover that the grass is actually a 2D plane, hence we need to adjust the 2D plane's rotation to let it face the view at all time.
in this tutorial, we will render a rotating scene by rotating the camera. with a texture rendered in the background that doesn't rotate with the scene. The background is a billboard. The key aspect of this tutorial is to learn how to keep the background face the camera. This is an opportunity to test our understanding of the transformation and projection matrices.
the key idea of this demo is simple. we render everything else other than the billboard using a normal model view matrix, and then we modify the model view matrix, keep the translation part, and remove the rotation and scaling part.
the key line of the code is the following, let's explain.
let modelViewMatrixBillboard = glMatrix.mat4.fromValues(1, 0, 0, modelViewMatrix[3],
0, 1, 0, modelViewMatrix[7],
0, 0, 1, modelViewMatrix[11],
modelViewMatrix[12], modelViewMatrix[13], modelViewMatrix[14], modelViewMatrix[15]);
diff --git a/code/2_04_text/index.html b/code/2_04_text/index.html
index 583ecf4..ddaf2a3 100644
--- a/code/2_04_text/index.html
+++ b/code/2_04_text/index.html
@@ -142,10 +142,10 @@
0.0,
1.0,
- 1.0,
+ texture.w,
0.0,
- 1.0,
+ texture.w,
1.0
]);
@@ -241,7 +241,7 @@
},
{
binding: 2,
- resource: texture.createView()
+ resource: texture.texture.createView()
},
{
binding: 3,