How To Create an Image for a Cylinder
Typical real-world objects are usually not perfect cylinders. Instead, the physical objects generally look like the following figures:
These example objects are not all perfect cylinders. However, at least a part of these objects are very close to being a cylindrical shape, around which you can build an augmented reality (AR) experience.
A label refers to the image that is found on a cylindrical object. This image may partially or fully cover the physical object. Some examples of labels are shown below:
You may already have access to the original imagery from the agency or the brand. If so, be aware that those images tend to have a lot of additional information clearly indicated, such as cutting edges, gluing areas, and overlapping areas. This additional information is critical because it tells you how the label is wrapped around the physical object. When you know this information, you can determine the cylindrical portion that is relevant for the AR experience.
In some cases, you do not have the label imagery or you want to design your own label image. In such cases you must manually measure the relevant dimensions of the physical object and use the dimensions in the Target Manager when you create a cylinder target.
Extract the relevant cylinder shape
To create a cylinder target, you must extract the correct dimensions of the actual physical object and of the label to use in the Target Manager.
This article describes how to extract the relevant cylinder shape from the following objects:
- Build a paper model for a can
- Build a paper model for a bottle with a front label
- Build a paper model for a bottle with a wrap-label
- Build a paper model for a cup
- Prepare the label image for cylindrical paper models (cans and bottles)
- Prepare the label image for conical paper models (cups)
- Determine the target parameters for conical paper models (cups)
- Determine the target parameters for cylindrical paper models (cans and bottles)
1-Build a paper model for a can
In most cases, the images of can labels tend to cover the whole can, for a full 360 wrap.
Prepare the paper model.
- If you have a label image, print the label image and cut out just the label part. Recognize that the label contains all the artwork plus some overlap area at the seam, where the print is stitched together, or where the edges are folded in or cut out when the label is actually placed on the can.
- If you do not have the label image, use an empty sheet of paper. Measure the label area height on the can. Then cut a rectangular strip from your paper to have the same height.
Note that your paper model (strip) can be the correct height, but it still can be too long.
Determine the correct size
- Wrap the paper model around the physical can and try to fit it as tightly as possible.
Crop it to the correct size
- Mark the overlap area with a pencil.
- Cut away the overlap area so that the paper model fits exactly and that it closes on the seam with no gap and no overlap.
2-Build a paper model for a bottle with a front label
At times, the bottle labels do not cover the whole bottle, in both height and circumference. Some labels are only on the front side of the bottle. Yet other labels can be a small band that wraps around the bottle but covers only a part of the bottle height. The following description covers the front label case.
Prepare the paper model
- Print the label image on a letter sized/A4 sized paper.
- If you do not have the label yet, use an empty sheet of paper (A4 or letter should fit in most cases).
Determine the correct size.
- Cut out the label as depicted below. The label extends as much as possible to both sides but is cut out tight on the bottom and top boundaries.
- Make sure that the strip is long enough to wrap around the bottle. If you do not have the label image yet, just crop your paper so that your paper has the same height that the label image will have.
Crop it to the correct size.
- Wrap your paper model around the physical bottle and fit it as tightly as possible.
- Mark the overlap area with a pencil.
- Cut away the overlap area, so that the paper model fits exactly and closes on the seam with no gap and no overlap.
3-Build a paper model for a bottle with a wrap-label
Bottle labels do not usually cover the whole bottle. Some labels are only on the front side of the bottle, while other labels wrap around the full 360 but cover only a part of the bottle height. The following description covers the case where a band label wraps 360 around a bottle.
Prepare the paper model.
- If you have the label image, print the label image and cut out the label part. Recognize that the label contains all the artwork plus some overlap area at the seam where the print is stitched together.
- If you do not have a label image, use an empty sheet of paper. Measure the height of the label area on the bottle. Then cut a rectangular strip from your paper to have the same height.
Note: Your paper model (strip) can be the correct height, but can still be too long.
Determine the correct size
- Wrap your paper model around the physical bottle and try to fit it as tight as possible.
Crop it to the correct size.
- Mark the overlap area with a pencil.
- Cut away the overlap area, so that the paper model fits exactly and that it closes on the seam with no gap and no overlap.
4-Build a paper model for a cup
A cup-shape in this section is not a uniform cylinder. The bottom of a cup usually has a smaller diameter than the top of the cup, resulting in a somewhat conical shape, similar to the shape of a coffee cup. In most of these cases, the label images for these cups tend to cover the whole cup, with a full 360 wrap.
Prepare the paper model material
- Print the label image and cut out the label portion. Recognize that the label contains all the artwork plus some overlap area at the seams where the print is stitched together. If you do not have the label image, use a plain sheet of paper
Determine the correct size
- Wrap the paper around the physical cup and try to fit it as tight as possible.
Crop it to the correct size. This is the tricky part.
- Mark the overlap areas with a pencil.
- Cut away the overlap area, so that the paper model fits exactly and that it closes on the seam with no gap and no overlap.
NOTE: Another way of to get the paper model is to actually cut the cup open and unroll it.
5-Prepare the label image for cylindrical paper models (cans and bottles)
Unroll the paper model and measure the size of the label, which is the length and breadth of the rectangle. The dimensions are circumference x side.
Use the guidelines below to create a digital image of the label. Design your own label or adjust an existing label image to fit the required aspect ratio (circumference: side).
Design your own label image
- Use your favorite image tool to create an image that has the same aspect ratio as your paper model rectangle circumference: side.
- Choose the resolution so that you have at least 240 pixels for the smaller side (in most of the cases this is the height).
- Design your new label and save the image to be your target image.
Use existing label image
- Use your favorite image tool and crop, or resize, your original label image exactly to this measured size.
- Make sure that you are cutting away the same overlapping area that you have cut away on your paper model.
- Make sure that the image aspect ratio is equal to the aspect ratio of your measurements - circumference : side. The image should look the same as your paper model.
- Save this image as your target image.
Adjustment Option 1 Add top/bottom white bands
Increase the canvas size of the image if the image aspect ratio is larger than the required one. Just add white areas, or white bands, at the top and/or bottom of the original image so that the overall canvas matches the required aspect ratio.
The following figure is an example of this option.
Tthe following figure illustrates the technique described above:
Adjustment Option 2 Crop an image with aspect ratio smaller than required one
If the source image aspect ratio is smaller than the required one, crop the original image so that the resulting (cropped) dimensions match the required aspect ratio. The following figure is an example of this option.
The obvious side effect of this crop option is that you can lose parts of the original image. However, this detail may be acceptable if the removed parts do not include any significant graphical details.
Adjustment Option 3 Add side bands
If the source image aspect ratio is smaller than the required one, add some side bands at the left or right borders of the image. The following figure is an example of this option.
A side effect of this option is that the portion of the cylinder covered by the side bands does not contain any detectable features. Therefore, the cylinder target may be trackable on a limited range (< 360 degrees). The following figure is an example of this option.
Adjustment Option 4 Resize the image non-uniformly (stretching)
This option can be applied in all cases, in either an aspect ratio smaller or larger than the required one. The non-uniform rescaling makes the image match the required aspect ratio. However, an obvious side effect of a non-uniform rescaling is that the resulting image appears stretched with respect to the original image. The following figure is an example of this option.
Prepare the label image for conical paper models (cups)
Unroll the label image and measure the rectangle that contains the paper model. The size will be width and height. See the example below to understand where to measure.
Create a digital image of the conical label. Either design your own label or adjust an existing label image to fit the required aspect ratio (width : height), using the following guidelines.
Use existing label image
- Use your favorite image editing tool and crop your original label image exactly to the measured size.
- Make sure that you cut away the same overlapping area that you cut away on your paper model.
- Make sure that the image aspect ratio is equal to the aspect ratio of your measurements width : height.
- Save this image for use as your target image.
Design your own label image
- Use your favorite image editing tool to create an image that has the same aspect ratio width : height.
- Choose the resolution so that you have at least 240 pixels for the smaller side. In most of the cases, this is the height.
- Design the new label and save the image to be the target image. Although you may want to use the full image for your design, be aware that only the area that is covered by the paper model is considered for recognition and tracking.
- When adjusting the graphic to make it fit into the given area (to correspond to the unrolled surface), you can consider a few other options that are similar to the cylinder case.
Adjustment Option 1 Add top and bottom bands
Adding top and/or bottom bands can ensure that the image correctly wraps the conic object. However, the actual trackable details will only partially cover the available height. The following figure is an example of this option.
Adjustment Option 2 Add side bands
Adding side bands can ensure that the image correctly wraps your conic object. However, the actual trackable details will only partially cover the available surface, restricting the trackable area to a range < 360 degrees. The following figure is an example of this option.
Adjustment Option 3 Resize the image non-uniformly (stretching)
You can adjust the size of the image in a non-uniform way, without keeping the original image proportions, to force the image to fit into the required cone outline. The following figure is an example of this option.
The side effect of this approach is that the image can look stretched with respect to the original image.
7-Determine the Target Parameters For Cylindrical Paper Models (cans and bottles)
Unroll the paper model and measure the rectangular size of the label. The size will be circumference x side. Divide the circumference by 3.14 to get the diameter of the cylinder.
Use the Target Manager to specify the cylinder object, as follows:
- Create a device database
- Add a new target of cylinder type.
- Set the Top Diameter to the cylinder diameter.
- Set the Side Length to the cylinder height ().
- Set the Bottom Diameter to the cylinder diameter.
- Upload the target image.
- Download a device database that contains a cylinder trackable that works with your can.
8-Determine the target parameters for conical paper models (cups)
Unroll the paper model and measure the side length. The following figure illustrates this action.
Fold the paper model again and glue it together with transparent tape. Measure the top and bottom diameter of the paper model.
Use the Target Manager to specify the cylinder object, as follows:
- Create a device database.
- Add a new target of cylinder type.
- Set the Top Diameter to the measured top diameter of the paper model.
- Set the Side Length to the measured side length of the paper model.
- Set the Bottom Diameter to the measured bottom diameter of the paper model.
- Upload the target image.
- Download a device database that contains a cylinder trackable that works with your cup.
How to Calculate the Dimensions of Conical and Cylindrical Cylinder Targets
When you upload the side image of a Cylinder target to the Target Manager, you must consider the actual shape of the object. Make sure that the uploaded images correctly encapsulate the flat body of the real physical object. The flat body represents the side surface of a cylinder or cone object if it were unrolled into a planar surface. The mathematics involved are particularly relevant when the shape of the object is a cone or a conic frustum.
The following image shows a generic conic frustum shape, which represents the most general case for cylinder targets, and its key geometric parameters.
where d and D are the diameters of the conical object (with d < D) and sL is the side length of the object.
Note: For the general case, the side length must not be confused with the cylinder height. However, for the special case of a true cylinder, where the top and bottom diameters are identical and the side surface is aligned vertically, the side length equals the height .
Construction of the flat cylinder body general case
The following figure shows two different shapes for the flat side surface. All other instances (cones, for example) are variations on these shapes. The following sections are divided into Case 1 and Case 2, which describe two methods of computing the width and height of the enclosed image.
Case 1
In the following case, the difference between the top and bottom diameters is smaller than the side length
(that is, D - d < sL).
The flat body can be constructed easily using the given parameters, by applying the following formulas to compute the radii of the two constructing circles:
- Inner circle radius: r' = (d ? sL) / (D - d)
- Outer circle radius: R' = r' + sL
For further calculations, use the diameter of the outer circle, which is as follows:
The shape can now be constructed by doing the following:
- Draw two concentric circles with radii r' and R'
- Mark the dashed vertical center line as shown in the figure above
- Measure the arclength of ?D/2 on the outer circle on both sides, from the intersection of the circle with the vertical center line
- Draw the rays from the two resulting points to the center of the circle
The shape enclosed between the two circles and the rays is the unrolled surface of the truncated conical shape.
- The circular segment must be oriented in the target image so that it is symmetric on the vertical image axis (the dashed line). The segment borders must touch all four sides of the image.
Case 2
In this case, the difference between the top and bottom diameters is larger than the cylinder side length (that is, D d >= sL).
The construction of the flat image is similar to Case 1, but uses this figure as a reference.
Width and height of the cylinder s side image
The width and height of the image for the cylinder s side surface can be computed from the given parameters and from the computed values for the constructing circles.
In the case where D d < sL, the width and height of the image are represented by the following equations:
width = D' sin ( ?D / D' )
height = sL + r' ? (1 cos ( ?D / D' ) )
while in the case where D d >= sL, the following equations apply:
width = D'
height = (D' / 2) ? (1 + sin ( (?/2) ? (2D - D') / D' ) )
Aspect ratio of the cylinder s side image
The aspect ratio of the bitmap image can be computed using the following formula:
aspect ratio = bitmapWidth / bitmapHeight = w / h 2%
This formula defines that the actual bitmap aspect ratio can deviate by 2% from the required computed ratio. This deviation can be helpful when existing objects are used by cutting, unrolling, and scanning.
Special Case the Cylinder
The cylinder is a special case of the generic conical shape since the cylinder has straight edges as shown in the following figure.
The top and bottom diameters (d, D) are identical, and the side length simply corresponds to the cylinder height.
Because r' is not defined here, the cylinder s body layout is a rectangle, where:
w = ?D
h = sL
Note: The flat body must be orTiented so that the vertical image axis (dashed line) is parallel to the object vertical axis and it fills the image area.
Special Case the Cone
A cone is another special case of a generic conical shape. The cone is characterized by a sharp tip on either the top or the bottom, so that one of the diameters (top or bottom, D, or d) is zero. See the cone example in the following figure.
Since one of the diameters of a cone is zero, the formulas can be simplified, as follows:
r' = 0
R' = sL
D' = 2sL
In the case where d < sL, the width of the image is equal to the chord-length of the section:
w = 2sL ? sin ( ?d / (2sL) )
while the height of the image is equal to the side length:
h = sL
In the case where d >= sL, the width of the image is twice the side length:
w = 2sL
while the image height is represented by the following formula:
h = sL ? (1 + sin ( (?/2) ? (d - sL) / sL) )
Note: The cone segment must be oriented such that the target image is symmetrical on the vertical image axis (the dashed line). The segment borders must touch all four sides of the image.
How To Use an Occlusion Model with a Cylinder Target
The Cylinder Target sample apps make use of an occlusion model. The model is meant to hide the virtual objects (the augmentation) whenever they are located behind the cylinder, as seen in the following figure. In the figure, the virtual ball (augmentation) appears hidden, or occluded, by the real cylinder.
If you followed the steps described in How To Create an Image for a Cylinder, you may have with a texture that covers only a part of the real cylinder object, such as a portion of your bottle s side surface. In this situation, your cylinder target may correspond to a subpart of the real geometry. This statement is illustrated in the following example.
In such a case, you must adjust the occlusion model used in the sample (or in your application).
From a computer graphics perspective, the occlusion model effect is realized by rendering the full cylinder object geometry to the depth buffer of the graphics card. This approach ensures that any object that has greater depth than the cylinder will not be rendered.
In the Vuforia samples, this effect is achieved in two ways, depending on the specific platform used:
- In Unity, a 3D model representing the full geometry of the real object is attached under the Cylinder Target game object, and a Depth Mask shader is applied to its Mesh Renderer.
- Using the native SDK (Android or iOS), the effect is obtained by rendering the whole geometry of the object to the depth buffer only, by disabling the color mask.