'3d'에 해당되는 글 3건
- 2007/09/07 UIElement3D extensibility - 3D Video Carousel
- 2007/09/07 What’s new in WPF 3.5
- 2007/09/07 Real-Time Cell-Shading in WPF 3D
UIElement3D extensibility - 3D Video Carousel
Recently I've been working on a screencast, which goes over some advanced aspects of working with Element3D. In the meantime, this sample demonstrates WPF's Orcas Beta 2 UIElement 3D technology, covering the essentials for how you can make your own reusable UIElement3D controls for 3D. I have two in here:
- A "KeepCaseUIElement3D", a representation of a real world DVD case, with the added twist of playing video on the inside. It's API consumes Uri's for cover images and a media source, rather than traditional models, meshes, and materials in 3D .
- A "MovieCarousel" - a simple 3D carousel layout control which re-orients itself to position the object which was last clicked towards the user.
You will need to operate with the WPF V3.5(Orcas) Beta 2 Bits. You can get the Visual Studio Orcas Beta 2 installation with WPF from here.
Concepts you can see in practice with this sample include:
- Creating interactive 3D controls as interactive containers on non-interactive 3D models (Hint - Leverage existing 3D Xaml with little effort)
- Creating a Custom Visual3D container type
- Use of StaticResources from Application.Resources to separate mesh details from overall structure
- Databinding a mesh texture to consume a local DP exposed as a URI, via a data binding type converter
- 3D Layout - Cylinder Layout Helper class
- Playing Video as a material on 3D
If you have any questions on the details of this sample, feel free to send me a message, or leave a relevant comment- odds are fair other folks have similar questions, which could make for interesting future blog postings!
What’s new in WPF 3.5
With the release of WPF 3.5 beta 2 (download here: http://www.microsoft.com/downloads/details.aspx?FamilyId=D2F74873-C796-4E60-91C8-F0EF809B09EE&displaylang=en), we’ve added some exciting new features to WPF 3D. At a very high level these can be grouped in to two main additions: UIElement3D and Viewport2DVisual3D. Over the next couple of weeks we’ll be adding examples and tips and tricks to the blog on these new additions, but for now we’ll start with a quick overview of what both of these provide.
UIElement3D
In the 2D world, UIElement adds layout, input, focus and eventing on to Visual. UIElement3D brings these same things (except no layout) to 3D. What this means is that the standard events and means of adding event handlers that you’re used to with UIElements now applies in the 3D world with UIElement3D.
UIElement3D itself is an abstract class that derives from Visual3D. To make it useable out of the box without having to derive from UIElement3D yourself, we’ve provided two new classes: ModelUIElement3D and ContainerUIElement3D.
ContainerUIElement3D does exactly what its name says. It is a container for other Visual3Ds. It has one main property, Children, which is used to add and remove 3D children. The ContainerUIElement3D doesn’t have a visual representation itself, but rather is just a collection of other 3D objects.
ModelUIElement3D has one property, Model, which is the Model3D that should be displayed to represent the UIElement3D. It has no children itself, and in some ways you can think of ModelUIElement3D like a Shape in the 2D world.
If you’re familiar with ModelVisual3D, then ContainerUIElement3D and ModelUIElement3D should look very familiar. The difference is we’ve gone and split the functionality of ModelVisual3D (i.e. a model and children) in to two separate classes, one with a model and the other with children.
With these then, making use of layout, focus and eventing is very easy. For instance, say you want to create a 3D object that responds to mouse events, you can just do:
<ModelUIElement3D MouseDown="OnMouseDown"/>
And then in the code behind have:
protected void OnMouseDown(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("Hello");
}
If you have experience adding event handlers in the 2D world, then this should look immediately familiar. In fact it’s exactly the same, and UIElement3D is going to handle the same routed events that a UIElement deals with. With the addition of UIElement3D you now get all the great functionality that UIElement provided to 2D, but now in the 3D world!
Viewport2DVisual3D
The second main addition is Viewport2DVisual3D which enables you to put interactive 2D on 3D in WPF. If you’ve used the 3DTools work that was released shortly after the 3.0 release of WPF, Viewport2DVisual3D will look very familiar to you. With 3.5 though we’ve fully integrated 2D on 3D in to WPF rather than requiring a separate DLL to have this feature. The 2D and 3D trees are also integrated now, so if you walk up to a 2D visual on 3D and ask it for its parent, it will tell you the 3D object it is on.
Viewport2DVisual3D derives from Visual3D and has three main dependency properties: Visual, Geometry and Material.
Visual – This is the 2D Visual that will be placed on the 3D object.
Geometry – The 3D geometry for the Viewport2DVisual3D
Material – This describes the look of the 3D object. You can use any material you want. For the material that you want to have the Visual be placed on, you simply need to set the Viewport2DVisual3D.IsVisualHostMaterial attached property to true.
Below is a XAML example using Viewport2DVisual3D
<Viewport2DVisual3D Geometry="{StaticResource plane}">
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="true" />
</Viewport2DVisual3D.Material>
<Button>3.5!</Button>
</Viewport2DVisual3D>
The above is a very quick overview of what is added in 3.5, so expect more posts on more specific details as well as some code samples on how to use it.
-Kurt Berglund
Of course I couldn't mention a technique of possible real-time cell-shading yesterday without actually trying it out. No, I didn't attempt to derive from BitmapEffect. (I'd love to take a crack at BitmapEffect but I simply cannot justify the expenditure of time.)
Instead, I tried the RenderTargetBitmap approach. Here's a rough outline:
- Lay out your Page or Window normally but instead of defining a Viewport3D element, use a Border instead. The Border is perhaps the simplest FrameworkElement derivative that has a Background property. Give the Background property an object of type ImageBrush.
- Whatever you would have put into your Viewport3D put into a Viewport3DVisual instead. Set the Viewport property of the Viewport3DVisual to the actual size of the Border element. You'll need a handler for the SizeChanged event of the Border to keep this Viewport property updated when the Border size changes.
- In that same SizeChanged event handler for the Border, create an object of type RenderTargetBitmap the same size as the Border and the Viewport3DVisual. You'll be recreating this bitmap whenever the size of the Border changes.
- Insteall event handlers for anything else (such as scrollbars) that affect the 3D scene defined within the Viewport3DVisual.
- Whenever anything happens that affects the appearance of the Viewport3DVisual perform the following actions:
- Clear the RenderTargetBitmap by calling the Clear method.
- Render the Viewport3DVisual on the bitmap by calling the Render method.
- Dump the pixel bits of the RenderTargetBitmap into an array by calling CopyPixels.
- Do whatever processing you want on the pixel bits. (For cell-shading, I just AND-ed each 32-bit ARGB pixel with 0xFFC0C0C0.)
- Create a new bitmap based on the altered pixel bits by calling BitmapSource.Create.
- Set that new bitmap to the ImageSource property of the ImageBrush object set to the Background property of the Border.
Here's the RealTimeCellShading source code. Sorry I can't give you an XBAP, but apparently Clear and CopyPixels are prohibited methods for partial trust. (But Render and BitmapSource.Create are mysteriously OK. Hey — I don't make up the XBAP rules!)
I've used an AmbientLight at 1/4 white and DirectionalLight of 3/4 white with a direction of (2, –3 –1). I've provided a pair of scrollbars to rotate the camera relative to the teapot, and a pair of sliders to rotate the teapot relative to the camera and light sources. Here's a view with the teapot slightly rotated:
Prev
Rss Feed