Telerik blogs

Last time I wrote about Labels in 3D, but it turned out to be more of a Step-By-Step How-To. This time the blog will be short and up to the point - our RadChart for WPF has a new shiny primitive, which is ... ta-daaaaa ... a 3-Dimensional Rounded Bar/Box.


Well, we are not the first to introduce such a primitive. It is, of course, easy to create rounded box model in 3D Studio Max, Maya or any other 3D-modeling tool (as other component vendors did for you), but that approach does not allow easy customization - each time you need some change, you have to create/modify and export the model. We thought it will be much better to create a primitive that generates the mesh of the box based on a couple of parameters to simplify customization is much as possible, and of course all that can to be done on the fly, while your application runs. The model is generated based on Radius, Tessellation and smoothness (Smooth):


As with the 2-Dimensional Rounded corners of the box, the Radius property determines the radius of the rounding in each of the eight corners of the 3-dimensional box.

Here, however, the radius is relative to the size of the box (as the concept of pixel does not exist in 3D). To be more precise, the radius is a portion of the smallest of the three parameters defining the size of the box. Those are Width, Height and Depth. The image below depicts the rounded bar for different values of the Radius property (0.06, 0.2 and 1.0).

Radius = 0.06, 0.2 and 1


The Tessellation property determines the level of detail used to generate the mesh. The higher the level (0, 3 and 5 in the following case), the smoother the model is:

Tessellation = 0, 3 and 4

Note, that the higher the tessellation, the higher number of vertices and faces we have (greater complexity of the mesh). On a slower machine that could lead to a notable performance hit. Here you can turn to the


Smooth boolean property, which determines how the normal vectors are calculated. Set it to false and each face will have its own normal vector, making it look flat (as in the above picture). Setting the value to true makes the primitive to evaluate a normal vector for each vertex, which affects the way lightning is applied, making the primitive look smooth (the Tessellation values are the same as those on the previous image):

Smooth = true, same Tessellation as on the above picture

Well, that's it. That's all about the 3-D Rounded Box and that is the end of the blog post.


// P.S. - If you have an idea for interesting (or simple, but useful) primitives, that you would like to see available in our chart, just drop us a line or two (as a comment to this post or as a Feature Request in the support area).


Comments are disabled in preview mode.