AB4D Forum

Full Version: How to Create Overlapping Rectangles
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I want to display two overlapping rectangles.  I have written a sample project that does this (MainWindow.xaml) and the result is screenshot1.   However, I want the windows to look like screenshot2 (for clarity, I added labels in screenshot2 that indicate the rectangles' positions.)  There are two differences in screenshot2: the rectangles are arranged slightly differently and we do not see the edges of the "bottom" rectangle that is overlapped.  How can I re-write MainWindow.xaml so that I get the result in screenshot2?  Thanks for any help you can give.
If I understand you correctly, then you do not want to see through the rectangles.

In this case I would recommend you to use PlaneVisual3D objects to create a rectangle with a border. To render a rectangle with a border you actually need 3 PlaneVisual3D:
- the biggest will use border material (for example black) - note that for this rectangle both Material and BackMaterial are set so it is visible from above and below.
- then you will also need 2 rectangles that will fill the interior of the rectangle - those two rectangles need to be rendered just slightly over and below the border rectangle to prevent z-fighting artifacts; the Normals for those two rectangles are flipped so one is visible from above and the other from below.

See example:

<visuals:PlaneVisual3D CenterPosition="-150,49.99,-50" Size="100 100" HeightDirection="0 0 -1" Normal="0 -1 0" Material="White" />
<visuals:PlaneVisual3D CenterPosition="-150,50,-50" Size="110 110" HeightDirection="0 0 -1" Normal="0 1 0" Material="Black" BackMaterial="Black" />
<visuals:PlaneVisual3D CenterPosition="-150,50.01,-50" Size="100 100" HeightDirection="0 0 -1" Normal="0 1 0" Material="White" />

<visuals:PlaneVisual3D CenterPosition="-150,64.99,-50" Size="100 100" HeightDirection="0 0 -1" Normal="0 -1 0" Material="White" />
<visuals:PlaneVisual3D CenterPosition="-150,65,-50" Size="110 110" HeightDirection="0 0 -1" Normal="0 1 0" Material="Black" BackMaterial="Black"/>
<visuals:PlaneVisual3D CenterPosition="-150,65.01,-50" Size="100 100" HeightDirection="0 0 -1" Normal="0 1 0" Material="White" />

It is not possible to use a PlaneVisual3D and a RectangleVisual3D because the LineThickness in RectangleVisual3D is specified in screen space units - so its actual thickness in 3D space varies depending on the distance of the camera.

If you do not want to offset two PlaneVisual3D objects slightly above and below the middle PlaneVisual3D and would like that all objects have the same y position, then you will need to manually construct the MeshGeometry3D for the rectangle border- define the positions and triangles that form the rectangle border. This is a more proper solution but requires much more work and understanding of how 3D objects are defined. If the above solution with 3 PlaneVisual3D works well for you, then there is no need to define the border MeshGeometry3D .
Thank you for your prompt reply.  Actually, I don't need rectangles with borders, just rectangles.  I have shown this in the new MainWindow.xaml.cs.   The program starts up as shown in the attached Screenshot3.  I then can move the mouse around so that it looks like screenshot4.  This is how i would like my rectangles arranged,with the orange rectangle on the bottom and the yellow on the top.

I have the following questions:

(1) When I move the mouse around, how do I get the most recent camera parameters that the mouse movement has created?

(2) Why does the color of the rectangles change in intensity as I move the mouse around?

(3) The layout of the rectangles that I really want is shown in screenshot2, which is similar to screenshot4.  Notice that the sides of the rectangles are not slanted.  Is it possible to achieve this by changing either the camera parameters or by using a different camera type?

(4) In screenshot5 I show two groups of rectangles.  Notice that both are displayed identically.  Is it possible to show multiple groups of rectangles with the identical perspective?  Or is this impossible due to the fact that a camera is a single point and different objects will have different perspective from that point?

Thanks again for your help.
1) You can get the values from the camera properties in code - you can subscribe to CameraChanged event to be notified about every change. For example you can get heading with Camera1.Heading.

2) Normally the 3D scene is rendered in such a way that the light is shader based on the angle between the light and the 3D surface - when the light is shining directly at the surface the color is 100% visible, when the light is at 90 degrees angle the surface is black. 

There are two ways to prevent that:
a) add an AmbientLight to the scene and set its Color to white - this will illuminate the scene from any angle (search for AmbientLight  in the samples project to see how to define one)
b) use EmissiveMaterial - this material is also not shaded by the angle from the light but always emits its color. Also search for that class to get an example.

3 and 4) By default the CameraType is set to PerspectiveCamera - this makes objects smaller when their distance from the camera increases - as in the real world. But you can set the CameraType to OrthographicCamera - this will make the objects with the same size rendered the same regardless of their distance to the camera.
Thanks again for your prompt reply.  This has helped my project immensely.

The orthographic camera type is clearly the the way to go.  I have one last question and then we can close this.  I replaced the CameraTypeSample.xaml in the "Orthographic Camera" sample project with the attached version of CameriaTypeSample.xaml.  When I now execute and move the mouse around a while with the left button held down, I get the display as shown in screenshot7.  Notice that the display planes are banked.  Then when I move the planes so that they are no longer banked, I get screenshot8.  In screenshot8, the 3D effect, i.e. the visual perspective is lost.  What I would like is no banking and yet still have the 3D effect as shown in screenshot9 (I artificially rotated screenshot9 using an image editor).  This must require some kind of camera setting but I can't figure out which one.
I think that you would achieve what you want with offseting the camera slightly to the right - if you are using SceneCamera you can change the x coordinate in the Offset property.
I tried setting the offset, first x, then y, then z and did not get a perspective shift (the entire image shifts).  I thought that LookDirection might work but unfortunately it is a read-only property.
You are right - Offset does not help. 

After some additional testing I think that with only changing the camera it is not possible to achieve the effect that you want.

So I would recommend you to fix the camera to look straight to the objects and then based on the object's y coordinate adjust the x any z position - so that object that are farther from the camera would have bigger x any z offsets from their initial position. But this would require to have a fixed camera. Actually, you could allow some smaller camera movements - you would need to manually handle the mouse events to do that and then based on the camera position change the direction into which the offset is set (offset based on the y value).
Thanks for you latest comment.  It looks like I will need to do some further research because what I am trying to do appears to be non-standard.  I think we can close this incident now.  You have gotten me much further than I was originally and I appreciate your excellent efforts.