bling Wiki & Documentation Rss Feed

Updated Wiki: Home

mcdirmid — Mon, 26 Oct 2009 06:22:40 GMT

Tutorial Manual | FAQ

Bling is a C#-based library for easily programming images, animations, interactions, and visualizations on Microsoft's WPF/.NET. Bling is oriented towards design technologists, i.e., designers who sometimes program, to aid in the rapid prototyping of rich UI design ideas. Students, artists, researchers, and hobbyists will also find Bling useful as a tool for quickly expressing ideas or visualizations. Bling's APIs and constructs are optimized for the fast programming of throw away code as opposed to the careful programming of production code.

Bling as the following features that aid in the rapid prototyping of rich UIs:

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Bling is an open source project created by Sean McDirmid and friends to aid in design rapid prototyping. We used Bling to enhance our productivity and would like to share it with other WPF UI design prototypers.

Getting Started

Requirments: Visual Studio 2008 full or Express, .NET 3.5 and .NET 3.5 SP1, Visual Studio 2008 SP1 (may not be necessary, comes with VS 2008 Express). To support WPF pixel shaders, the DirectX August 2008 runtime is sometimes required, although this is often already installed on your machine.

As of Bling 3, DirectX 10 is also supported for Windows Vista and Windows 7 (sorry XP users!). If you want to use DirectX 10, you'll have to install the latest redistrutable; e.g., the web installer. Bling also depends on the Windows API Code Pack and the DLR, but both DLLs are included in the distribution.

Download the source release from the web page. An example comes with the release. To include in your own project for WPF development, simply add the Bling.Core and Bling.WPF projects to your solution, and then add a reference to the Bling project from your own project. For DirectX 10 development, add and refer to the Bling.Core, Bling.WPF, and Bling.D3D10 projects.

Example

The code used in this getting started example is located in the GettingStarted.cs file of the GettingStarted project in the release. We start of this example by creating a thumb and label on a canvas:

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

The first statement creates a red thumb that can be dragged (CanDrag = true). The initial location of the thumb is in the right hand bottom corner of the canvas,
while its Z index is set to one. The second statement creates a label whose content is bound to "Hello World" prepended to the current location of the thumb. By default,
assignments to properties in Bling are contraints where the bound to property will change as the bound-to expression changes. In our example, the label's content will change
to always reflect the location of the thumb, which you can experience this by moving the thumb. Likewise, the center position of the label is bound to the center of its containing canvas. As the window that contains the canvas is resized, the label is repositioned so that it always remains in the center.

Constraints are ubiquitous and incredibly expressive in Bling. Consider another constraint:

label.RenderTransform.Rotate = 
  (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

This code rotates the label according to the position of the thumb with respect to the center of the label. A vector from the center of the label is first computed using subtraction, where the vector is then converted into a radian angle (via Angle), which itself is turned into a degree angle (ToDegrees). The result is that the label rotates as the thumb is moved in a circle around its center. This example demonstrates the power of Bling constraints: properties can be bound to many kinds of expressions including those that operate over angles.

The next piece of code demonstrates how a UI widget can easily undergo custom pixel shading:

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.
   Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb
    ((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

We want to shade the label with respect to the position of thumbB. However, pixel shader effects are applied before render transforms, so we have to transform the position of thumbB with respect to label's inverse transform, which happens on the first line of the shader (below (input,uv) => {). Since transforms are relative to the widgets they are applied, we also subtract label's left top position from thumbB's center position. uv identifies the position of the pixel being shaded in term of a percentage rather than in pixels. So that we can compare uv to the position of thumbB, we multiple it by the size of the label (line two) and then we can find the distance between the two points (line three). Line four specifies that the circle we care about is 500 pixels in radius, which we then invert so that closer distances are higher in value. Line five uses the result d to interpolate between black and blue colors, which is then used on line six to create the color of the pixel with some modifications to its alpha.

The resulting pixel shader executes on the GPU with performance similar to a DirectX pixel shader, and in fact, it is a DirectX pixel shader. Pixel shaders can refer to many UI objects and properties directly, such as positions, although there are limitations. For example, a pixel shader can refer to a point property but not an enum property, and can refer to an image brush but not a solid color brush (due to limitations enforced by WPF).

Updated Wiki: Home

mcdirmid — Mon, 26 Oct 2009 06:22:15 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = 
  (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.
   Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return 
    ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: Home

mcdirmid — Mon, 26 Oct 2009 06:21:44 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = 
  (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = 
    label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return 
    ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: Home

mcdirmid — Mon, 26 Oct 2009 06:21:00 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = 
  (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: Home

mcdirmid — Fri, 23 Oct 2009 00:38:57 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: lighting

mcdirmid — Fri, 23 Oct 2009 00:37:04 GMT

Light Sources

As we know, without light, we can't see any color. One of the light source we used in Bling is point light, like the light bulb. The class “SpotLight” defines the point light, it has properties like position, direction, color, and inner and outer cone angles. The higher the light is, the bigger range it can illuminate, but the brightness would be weaker. We consider the diffuse color and the specular color of light are the same which is realistic for the most, which is defined by the. Usually we set the color of light to be white. In fact, the spot light also has the property called "attenuation quotient", but we set it as the parameter of the lighting shader to adjust the lighting effect more freely. Another kind of the light source is direction light like the sunshine. usually this means the light source is very very far from all the object, so the directions from any object to source are the same, that's why one of the property of direction light that lacks a position and only relies on direction for its effect.

Simple lighting of paper

First, we can implement the simplest lighting only with diffuse color of the flat surface, like a piece of paper, the surface of desk, etc. We just need to add sentences in the pixel shader like this:

DiffuseMaterialCl diffMaterial = new DiffuseMaterialCl();
SplotLightCl light = new SpotLightCl() {
  Position = new Point3DBl(thumbB.CenterPosition - UseImage.LeftTop, 170),
  Direction = new Point3DBl(1, 0, -0.8).Normalize,
  InnerConeAngle = 5.ToDegrees(), OuterConeAngle = 15.ToDegrees(),
};
Point3DBl eyePosition = new Point3DBl(eyeThumb.CenterPosition - UseImage.LeftTop, 100);
MyCanvas.Background = Colors.CornflowerBlue;
MyCanvas.Effect.Custom = (input, uv) => diffMaterial.Apply(light)
  [new Point3DBl(uv * MyCanvas.Size, 0), new Point3DBl(0, 0, 1), eyePosition][input, uv];

The

All the shaders to calculate lighting is in the class LightingTechniques, including this one. You can find these codes in light.cs, the function LightTest_Paper() in the class LightTest.
Here CornflowerBlue means the color of the paper or anything you think it is. LightSource0 is the lightsource to brighten the world. We use the lefttop position and the size of the current object you’re drawing in the shader to do some transformation. Because usually many objects share one light source, we should uniform their coordinate systems and also the light source’s. Finally the point3DBl(X, Y, Z) gives the setting of attenuation Quotient, which is described as a quadratic equation like "1.0/(X * d^2 Y * d Z), where d is the distance between the lightSource and the point". The numbers are bigger, the attenuation goes bigger with the distance, so the darker the object is. Usually the number X,Y,Z are between 0 and 1, but you can adjust them as you wish to get a good vision effect.

Here, with this simplest case, you can see how two kinds of light source effect the different results:

On the left is a spot light with the color white, on the right is a direction light with the color Ivory, and the color of paper itself is CornflowerBlue. Because the normal of the paper is only straight up, so the color is the same. Relatively, different attenuation and different direcion from point to light source make the lighting effct has a obvious change on the paper.

The diffuse color of object is set similar to the paper, just add more inrfomation like normal, height and so on.

Specular color
Specular color comes from the reflection of the light on the smooth surface like mirror, glass, some kind of metal, etc. Or you will more familiar with the word “highlight”. In fact little object only has the specular color, but we still implement this interface to simplify some calculation in UI but with effect as good. For example, we made the 2.5D bubble wrap on some image just with specular color:

We use these codes to finish it:

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.SpecularColor(uv, normalMap, heightMap, 20.0, LightSource0, 
    eyePos, newCanvas.LeftTop, newCanvas.Size, 10, 1.0) + baseMap[uv];
};

Here, the normalMap defines the normal of every pixel point, in the lase case, the normal of paper is thought to be (0, 0, 1), a default value. In the 2D window, all the object have the same height:0, but with Heightmap, you can define the height of pixel in a fake 3D space. As the height saved in HeightMap must be between 0 and 1(from black to white), use the next parameter to scale the height as you want, here we enlarge the height to 20 times. You can see the normalMap and HeightMap above. These two maps help to calculate the lighting more realistic. The next parameter , a double value 20, is the reflective index,usually from 1 to 2000. The higher this number is, the surface looks more smoother, so that the highlight spot smaller and brighter. The last one is often between 0 ans 1, is called specularity factor which can control the entire strength of the specular color. And you’ll find that the specular color just relative to the light source’s color, so we add baseMapuv to adjust the whole effect.

Both diffuse and Specular color
Most things in real world have both diffuse and specular color, so we provide the function to get the both, just like this:

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.DiffuseSpecularColor(uv, baseMap, normalMap, LightSource0, eyePos, newCanvas.LeftTop, 
              newCanvas.Size, new Point3DBl(4e-6, 2e-3, 0.5), 2, 0.8);
};

It’s just the combination of the above two functions. Here we omit heightmap and heightScale with the overloaded function. We can also use some color to instead of the image baseMap. Below is the effect of this funciton of a brick wall, compare with the ordinary texture on the right.

Simulate the glass
The glass only has specular color because of its smooth surface. And it also generates refraction as its transparency. So we add a background behind our glass to show these effects.
Here is the code of pixel shader:

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.GlassColor(uv, Colors.LightBlue, backgroundMap, normalMap, LightSource0, eyePos, 
     newCanvas.LeftTop, newCanvas.Size, 1.0, 0.9, 1.5, 2.5,  newBackgound.LeftTop, newBackgound.Size, slider.Value);
 };

The second parameter defines the color of glass itself. The next one describes the background image behind the glass. Then a series of similar parameters we’ve ever seen. After the reflective index (1.0) and the specularity factor(0.9), there are some new things: 1.5 is the relative refractive index (RI). “Relative” means this one equals to RI of refracting medium / RI of incident medium, here 1.5 is a value we often used to describe glass’s relative RI, means: RI of glass(1.5~1.9,generally) / RI of air(1.0). The nest one is the thickness of glass, usually between 1 and 100, it determine the level of refraction. The thicker the glass is, the effect of refraction is more obvious. The next two parameter give us the location of background image. The last one defines the transparency of glass, usually from 0.0 to 1.0, the bigger transparency means the more light can across the glass and brighten the background. If the transparency is 0, you can only see the color of glass. Here are pictures with different transparency(0.2 → 0.6 → 1.0):

Simulate the diffraction of CD surface
For surfaces with small-scale detail such as a CD, the small-scale surface detail causes the reflected waves to interfere with one another. This phenomenon is known as diffraction. Diffraction causes the reflected light from these surfaces to exhibit many colorful patterns, as you can see in the subtle reflections from a CD. We simulate it using the method in the book GPU Gems.

In the calculation of diffraction, the tangent vectors are needed to supply the local direction of the narrow bands on the surface. For a CD, they are in the direction of the tracks, so we can get them in the pixel shader. If you want more complicated tangent vectors, more calculation or a texture should be helpful.
Here is our code:

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.DiffractionCD(uv, input, rainbow, LightSource0, eyePos, 
    newCanvas.LeftTop, newCanvas.Size);
};

If you just want to render a CD only with diffraction, just call the function in shader like this simple way. We just meet two strange parameters: the second one ”input” supplies the basic image of a piece of CD, and the “rainbow” is a 1D texture in which we can map the color corresponding to a given wavelength, we use a simple approximation of a rainbow map that range from violet to red and include most colors in the rainbow. And we assume that the normal of surface is (0, 0.5, 0.866) with a little lean to show the diffraction better.

Updated Wiki: lighting

mcdirmid — Fri, 23 Oct 2009 00:26:32 GMT

The code for the UI lighting tutorial is located in the LightingTutorial project of the distribution. You can find different materials with their own lighting effects.

Bling's support for lighting is based on simple or local lighting model in computer graphics. Here we implement the diffuse reflection, the specular reflection, the one-time refraction and the simple diffraction. Basically, we use normal mapping to make the 2D object looks like in a 3D environment with more realistic lighting effect.

As we know, without light, we can't see any color. One of the light source we used in Bling is point light, like the light bulb. The class “SpotLight” defines the point light, it has 3 properties: Position, Height, and Color. Position shows the 2D position of the light, and the property Height help to locate the light in 3D space. The higher the light is, the bigger range it can illuminate, but the brightness would be weaker. We consider the diffuse color and the specular color of light are the same which is realistic for the most. So the property Color defines this. Usually we set the color of light to be white. In fact, the spot light also has the property called "attenuation quotient", but we set it as the parameter of the lighting shader to adjust the lighting effect more freely.

Another kind of the light source is direction light like the sunshine. usually this means the light source is very very far from all the object, so the directions from any object to source are the same, that's why one of the property of "DirectionLight" is Direction instead of the Position and height. The other one is also the Color. When in the calculation of lighting, it is similar to spot light, just change the parameter "SpotLight" to "DirectionLight", and without "attenuation quotient". Certainly it is realistic, for example, the color of everything in the sunshine are the same degree of attenuation, cause the difference of thier distances to the sun are nearly the same. So when you choose the direction light, the difference between color of things is smaller than point light.

Simple lighting of paper
First, we can implement the simplest lighting only with diffuse color of the flat surface, like a piece of paper, the surface of desk, etc. We just need to add sentences in the pixel shader like this:

Point3DBl eyePosition = new Point3DBl(eyeThumb.CenterPosition - UseImage.LeftTop, 100);
DiffuseMaterialCl diffMaterial = new DiffuseMaterialCl();
PointLightBl light = new PointLightBl() { 
  Position = new Point3DBl(thumbA.CenterPosition - MyCanvas.LeftTop, 170)
};
MyCanvas.Background = Colors.CornflowerBlue;
MyCanvas.Effect.Custom = (input, uv) => diffMaterial.Apply(light)
  [new Point3DBl(uv * MyCanvas.Size, 0), new Point3DBl(0, 0, 1), eyePosition][input, uv];

All the shaders to calculate lighting is in the class LightingTechniques, including this one. You can find these codes in light.cs, the function LightTest_Paper() in the class LightTest.
Here CornflowerBlue means the color of the paper or anything you think it is. LightSource0 is the lightsource to brighten the world. We use the lefttop position and the size of the current object you’re drawing in the shader to do some transformation. Because usually many objects share one light source, we should uniform their coordinate systems and also the light source’s. Finally the point3DBl(X, Y, Z) gives the setting of attenuation Quotient, which is described as a quadratic equation like "1.0/(X * d^2 Y * d Z), where d is the distance between the lightSource and the point". The numbers are bigger, the attenuation goes bigger with the distance, so the darker the object is. Usually the number X,Y,Z are between 0 and 1, but you can adjust them as you wish to get a good vision effect.

Here, with this simplest case, you can see how two kinds of light source effect the different results:

On the left is a spot light with the color white, on the right is a direction light with the color Ivory, and the color of paper itself is CornflowerBlue. Because the normal of the paper is only straight up, so the color is the same. Relatively, different attenuation and different direcion from point to light source make the lighting effct has a obvious change on the paper.

The diffuse color of object is set similar to the paper, just add more inrfomation like normal, height and so on.

Specular color
Specular color comes from the reflection of the light on the smooth surface like mirror, glass, some kind of metal, etc. Or you will more familiar with the word “highlight”. In fact little object only has the specular color, but we still implement this interface to simplify some calculation in UI but with effect as good. For example, we made the 2.5D bubble wrap on some image just with specular color:

We use these codes to finish it:

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.SpecularColor(uv, normalMap, heightMap, 20.0, LightSource0, 
    eyePos, newCanvas.LeftTop, newCanvas.Size, 10, 1.0) + baseMap[uv];
};

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.DiffuseSpecularColor(uv, baseMap, normalMap, LightSource0, eyePos, newCanvas.LeftTop, 
              newCanvas.Size, new Point3DBl(4e-6, 2e-3, 0.5), 2, 0.8);
};

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.GlassColor(uv, Colors.LightBlue, backgroundMap, normalMap, LightSource0, eyePos, 
     newCanvas.LeftTop, newCanvas.Size, 1.0, 0.9, 1.5, 2.5,  newBackgound.LeftTop, newBackgound.Size, slider.Value);
 };

newCanvas.CustomEffect = (input, uv) => {
  return LightingTechniques.DiffractionCD(uv, input, rainbow, LightSource0, eyePos, 
    newCanvas.LeftTop, newCanvas.Size);
};

Updated Wiki: Home

mcdirmid — Fri, 23 Oct 2009 00:15:13 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 surfaces that are defined by pixel, vertex, and geometry shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(1d - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: Pixel effect

mcdirmid — Tue, 21 Jul 2009 03:38:42 GMT

A pixel effect is a texture to texture transformation that defines a pixel shader. Example of a pixel effect is a ripple:

public static PixelEffect Ripple(this PointBl Center, DoubleBl Amplitude, 
                                            DoubleBl Frequency, DoubleBl Phase) {
 return new PixelEffect(Input => new Texture(UV => {
  PointBl ToPoint = UV - Center;
  DoubleBl Distance = ToPoint.Length;
  PointBl Direction = ToPoint / Distance;
  PointBl Wave = new Angle2DBl(Frequency * Distance + Phase).ToPoint;
  DoubleBl Falloff = (1d - Distance).Saturate.Square;
  DoubleBl Lighting = (Wave.Y * Falloff).Saturate * 0.2 + 0.8;
  PointBl Distance2 = Distance + Amplitude * Wave.X * Falloff;
  ColorBl Color = Input[Center + Distance2 * Direction];
  return ColorBl.FromScRGB(Color.ScA, Color.ScRGB * Amplitude.Lerp(1d, Lighting));
 }));
}

The effect is self contained, and leads to the following result:

As with textures, pixel effects can be composed via basic arithmetic operators such as addition or multiplication, or through interpolation (lerp), clamping, and so on. Pixel effects can also be composed using a circle operator of sorts via array indexing notation where e₀[e₁] is equivalent to input => e₀[e₁[input]].

Transitions yield pixel effects when their progress, random seed, and next texture arguments are provided.
Lighting results yield pixel effects when normal maps or height fields (normals are approximated) are provided. This forms the basis for bump mapping in pixel shaders.

Updated Wiki: shader

mcdirmid — Tue, 21 Jul 2009 03:37:37 GMT

All examples in this section are located in Shaders.cs of the Tutorial project.

A pixel shader is installed on a UI object by assigning function to the Effect.Custom defined by its bling object. The type of a pixel shader is Func<Texture, PointBl, ColorBl>, where the first argument is the input texture, the second argument is the pixel being shaded, and the return value is the resulting color of the pixel. A pixel effect is automatically coercible into a pixel shader.

As an example consider the following code:

ImageBl image = new ImageBl(canvas) { 
  Source = new BitmapImage("Resources/Autumn.jpg".MakePackUri(typeof(Shaders))),
};
image.Effect.Custom = (input,uv) => input[uv];

This custom effect merely returns the original color of the pixel, leading to no change in the pixel.
The current pixel, uv, represents the pixel's coordinate as a percentage offset in the input texture; e.g., the coordinate (.25,.75) represents a pixel whose X pixel value is 25% the texture's width and whose Y pixel value is 75% the texture's height. We can mirror flip the image horizontally by reversing the accessed pixel's X coordinate:

image.Effect.Custom = (input,uv) => input[new PointBl(1 - uv.X, uv.Y)];

The expression 1 - n addresses an opposing percent of n; e.g., if n is .33, 1 - n is .66. We can also flip the image vertically by reversing the accessed pixel's Y coordinate:

image.Effect.Custom = (input,uv) =>  input[new PointBl(uv.X, 1 - uv.Y)];

The following is the result of the last shaders. The first image has no effect applied, the second one flips horizontally, the last one flips vertically.

For more fun, we can distort the image according to a draggable thumb. Consider:

ThumbBl thumb = new ThumbBl(canvas) {
  CenterPosition = canvas.CenterSize, ZIndex = 1,
  CanDrag = true, Background = Brushes.Red
};
image.Effect.Custom = (input,uv) => {
  PointBl v = ((uv * image.Size) - (thumb - image.LeftTop));
  DoubleBl l = (v.Length / 100);
  l = l.Pow(3);
  l = (l >= 1).Condition(0, l);
  return input[uv + l * v.Normal * .1];
};

This code draws a lense around the current position of the thumb. Because we want to compare the current pixel being shaded (uv) to the thumb's position, we multiply uv by the size of the image and subtract the image's position from thumb (coerced to a position). This gives us a vector that we can then used to find the pixel distance between the current pixel and the thumb, which we divide by 100 so the lense's radius is 100 pixels. We take this length, raise it to the third power (so that the lense looks curvy) and use a condition to filter any length at one or greater to zero to create a clear border for the length. This value is then used to displace pixels in the lense according to l and the normal vector of the pixel from the thumb thumb. Result:

The pixel shaders shown so far operate by displacing pixels. Pixel shaders can also manipulate colors. Taking our last example, we can interpolate gray into the distorted part of the lense for a more realistic effect:

image.Effect.Custom = (input,uv) => {
  PointBl v = ((uv * image.Size) - (thumb - image.LeftTop));
  DoubleBl l = (v.Length / 100);
  l = l.Pow(3);
  l = (l >= 1).Condition(0, l);
  ColorBl clr = input[uv + l * v.Normal * .1];
  return l.Lerp(clr, Colors.Gray);
};

The last line interpolates ("lerp") between the computed color and gray based on the l value. Result:

MetaBalls

Pixel shaders that compute colors based on distances are very powerful. One example application of such a shader is to create MetaBalls, which are used to simulate organic objects. The MetaBall example in the tutorial is located in MetaBalls.cs. First, we create a second canvas in the main canvas to hold the meta-ball effect; we'll add thumbs in the main canvas on top of this second canvas to control the positions of the metaballs:

new CanvasBl(canvas) {
  Size = canvas.Size, LeftTop = new Point(0, 0),
  Background = Brushes.Black,
}.Effect.Custom = (input, uv) => {

We don't bother assigning the canvas to a variable as we don't need to refer to it again (its just there to hold the effect). The rest of the metaball code takes place inside the custom effect function. Each metaball has its own primary color, which we store in a colors array. Each pixel has a color that depends on how close the pixel is collectively to the metaball centers, which we express as metaball. Code:

Random r = new Random();
ColorBl[] colors = new ColorBl[] {
  Colors.Red, Colors.Blue,
  Colors.Green, Colors.Cyan,
  Colors.Orange, Colors.Yellow,
};
ColorBl color = Colors.Black;
DoubleBl metaball = 0;

Now, the metaball algorithm measures the distance and color of each pixel through a basic loop. We also create the WPF thumbs in this loop, as the loop will only be executed once when the pixel shader is generated. This behavior sounds a bit weird as the loop is only building an abstract value that is compiled into the pixel shader; even if it directly appears to be computing the pixel's color. Here is the loop:

foreach (Color primary in colors) {
  PointBl point = new ThumbBl(canvas) {
    Background = primary,
    ZIndex = 1,
    CenterPosition = canvas.CenterSize - new PointBl(150, 150) +
                              r.NextPoint() * new PointBl(300, 300),
    CanDrag = true,
  }.CenterPosition;
  var v = (uv * canvas.Size - point);
  v = v * v;
  var at = 3d / (v.X + v.Y);
  color += primary * at;
  metaball += at;
}

The first statement creates the thumb at a random location (r.NextPoint()) in the canvas with a z-index of one so that the thumb appears above the effect. The current location of the thumb is then compared to the pixel using a tuned metaball distance function. The resulting at value is then used to accumulate the pixel's color (weighted) and metaball values. Finally, we compute and return the color:

var useColor = color / metaball;
return (metaball > .0016).Condition(useColor, Colors.White);

We use a threshholding value of .0016 found via tuning, leading to a ball-like organization of the meta-balls. The result looks like this:

Limitations

A pixel shader in Bling is translated into a conventional WPF pixel shader. As a result, they run on the GPU and are subject to various restrictions. Pixel shaders must be simple: they can only contain around 96 instructions and use 32 registers, where instruction and register are defined according to the {url:HLSL|http://en.wikipedia.org/wiki/High_Level_Shader_Language} specification. If you try to build a shader that is too complicated, Bling will throw an exception. Bling will attempt to optimize your pixel shaders (basic common sub-expression elimination), and the HLSL compiler will optimize more, but there are many cases where you'll have to hand tune your shader to make it fit.

Only simple computations that touch textures or the coordinate of the current pixel will occur in the pixel shader. All other computations occur outside the pixel shader and their results are brought in via registers. To save instructions, you can try to re-arrange your pixel shader so that as many computations occur as possible before textures and the current pixel coordinate is touched. Additionally, many computations cannot occur in shaders; e.g., if it involves creating a widget (as in the metaball example) or if it involves a transform matrix. In these cases, a NotSupportedOperationException is thrown.

A pixel shader does not support real looping. Instead, loops are unrolled so must be fixed in length. For example, the loop in the meta-ball example is only of size six. Unrolling is an important consideration since it will cause instructions to be consumed faster. Likewise, "if" is not supported in a pixel shader, and you must use Condition instead ({url:constraints|Constraints} share this limitation).

Updated Wiki: Home

mcdirmid — Tue, 21 Jul 2009 03:35:29 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 pixel/vertex shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input, uv) => new ColorBl(new Point3DBl(1,1,1) - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Requirments: Visual Studio 2008 full or Express, .NET 3.5 and .NET 3.5 SP1, Visual Studio 2008 SP1 (may not be necessary, comes with VS 2008 Express). To support WPF pixel shaders, the DirectX August 2008 runtime is sometimes required, although this is often already installed on your machine.

As of Bling 3, DirectX 10 is also supported for Windows Vista and Windows 7 (sorry XP users!). If you want to use DirectX 10, you'll have to install the latest redistrutable; e.g., the web installer. Bling also depends on the WindowsAPICodePack and the DLR, but both DLLs are included in the distribution.

Download the source release from the web page. An example comes with the release. To include in your own project for WPF development, simply add the Bling.Core and Bling.WPF projects to your solution, and then add a reference to the Bling project from your own project. For DirectX 10 development, add and refer to the Bling.Core, Bling.WPF, and Bling.D3D10 projects.

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input, uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: transition

mcdirmid — Mon, 20 Jul 2009 15:18:17 GMT

A transition is a function from a progress value (R¹), random seed (R¹) and next texture to a pixel effect that implements the transition. Transitions encapsulate pixel-level slide transitions that you might see in presentation programs such as PowerPoint. Example encoding of a crumple transition:

public static readonly Transition Crumple = new Transition((Progress, RandomSeed, NextInput) =>
 new PixelEffect(Input => {
   DoubleBl p = Progress * 2d;
   p = (p > 1.0).Condition(1.0 - (p - 1.0), p);
   ColorBl t1 = CloudPoint(Input, 10, RandomSeed, p);
   ColorBl t2 = CloudPoint(NextInput, 10, RandomSeed, p);
   return Progress.Lerp(t1, t2);
}));

CloudPoint is a method that distorts based on a cloud texture, implemented in three one line methods:

public static Texture CloudPointT(DoubleBl Div, DoubleBl RandomSeed) {
 return Driver.CloudImage.Distort((uv => (uv / Div).MapY(y => (y + 0.9.Bl().Min(RandomSeed)).Frac)));
}
public static PointBl CloudPoint(PointBl uv, DoubleBl div, DoubleBl RandomSeed) {
 return CloudPointT(div, RandomSeed)[uv].XY() * 2.0 - 1.0.Bl();
}
public static Texture CloudPoint(this Texture Input, DoubleBl Div, DoubleBl RandomSeed, PointBl Progress) {
 return Input.Distort(uv =>  (uv + CloudPoint(uv, Div, RandomSeed) * Progress).Frac);
}

Result of an intermediate crumple:

As with pixel effects, transitions can be composed, where Max and Min and Lerp are the most useful composition functions.

Updated Wiki: transition

mcdirmid — Mon, 20 Jul 2009 15:16:46 GMT

public static readonly Transition Crumple = new Transition((Progress, RandomSeed, NextInput) =>
 new PixelEffect(Input => {
   DoubleBl p = Progress * 2d;
   p = (p > 1.0).Condition(1.0 - (p - 1.0), p);
   ColorBl t1 = CloudPoint(Input, 10, RandomSeed, p);
   ColorBl t2 = CloudPoint(NextInput, 10, RandomSeed, p);
   return Progress.Lerp(t1, t2);
}));

CloudPoint is a method that distorts based on a cloud texture, implemented in three one line methods:

public static Texture CloudPointT(DoubleBl Div, DoubleBl RandomSeed) {
 return Driver.CloudImage.Distort((uv => (uv / Div).MapY(y => (y + 0.9.Bl().Min(RandomSeed)).Frac)));
}
public static PointBl CloudPoint(PointBl uv, DoubleBl div, DoubleBl RandomSeed) {
 return CloudPointT(div, RandomSeed)[uv].XY() * 2.0 - 1.0.Bl();
}
public static Texture CloudPoint(this Texture Input, DoubleBl Div, DoubleBl RandomSeed, PointBl Progress) {
 return Input.Distort(uv =>  (uv + CloudPoint(uv, Div, RandomSeed) * Progress).Frac);
}

Result of an intermediate crumple:

Updated Wiki: Pixel effect

mcdirmid — Mon, 20 Jul 2009 15:07:43 GMT

A pixel effect is a texture to texture transformation that defines a pixel shader. Example of a pixel effect is a ripple:

public static PixelEffect Ripple(this PointBl Center, DoubleBl Amplitude, 
                                            DoubleBl Frequency, DoubleBl Phase) {
 return new PixelEffect(Input => new Texture(UV => {
  PointBl ToPoint = UV - Center;
  DoubleBl Distance = ToPoint.Length;
  PointBl Direction = ToPoint / Distance;
  PointBl Wave = new Angle2DBl(Frequency * Distance + Phase).ToPoint;
  DoubleBl Falloff = (1d - Distance).Saturate.Square;
  DoubleBl Lighting = (Wave.Y * Falloff).Saturate * 0.2 + 0.8;
  PointBl Distance2 = Distance + Amplitude * Wave.X * Falloff;
  ColorBl Color = Input[Center + Distance2 * Direction];
  return ColorBl.FromScRGB(Color.ScA, Color.ScRGB * Amplitude.Lerp(1d, Lighting));
 }));
}

The effect is self contained, and leads to the following result:

As with textures, pixel effects can be composed via basic arithmetic operators such as addition or multiplication, or through interpolation (lerp), clamping, and so on. Pixel effects can also be composed using a circle operator of sorts via array indexing notation where e₀e,,1,, is equivalent to input => e₀e,,1,,[input].

Transitions yield pixel effects when their progress, random seed, and next texture arguments are provided.
Lighting results yield pixel effects when normal maps or height fields (normals are approximated) are provided. This forms the basis for bump mapping in pixel shaders.

Updated Wiki: Pixel effect

mcdirmid — Mon, 20 Jul 2009 14:54:22 GMT

A pixel effect is a texture to texture transformation that defines a pixel shader. Example of a pixel effect is a ripple:

public static PixelEffect Ripple(this PointBl Center, DoubleBl Amplitude, 
                                            DoubleBl Frequency, DoubleBl Phase) {
 return new PixelEffect(Input => new Texture(UV => {
  PointBl ToPoint = UV - Center;
  DoubleBl Distance = ToPoint.Length;
  PointBl Direction = ToPoint / Distance;
  PointBl Wave = new Angle2DBl(Frequency * Distance + Phase).ToPoint;
  DoubleBl Falloff = (1d - Distance).Saturate.Square;
  DoubleBl Lighting = (Wave.Y * Falloff).Saturate * 0.2 + 0.8;
  PointBl Distance2 = Distance + Amplitude * Wave.X * Falloff;
  ColorBl Color = Input[Center + Distance2 * Direction];
  var Color2 = ColorBl.FromScRGB(Color.ScA, Color.ScRGB * Amplitude.Lerp(1d, Lighting));
  return Color2;
 }));
}

The above pixel effect is self contained and creates a ripple, as

Updated Wiki: Pixel effect

mcdirmid — Mon, 20 Jul 2009 14:45:39 GMT

page exists.

Updated Wiki: Home

mcdirmid — Mon, 20 Jul 2009 14:45:10 GMT

Declarative constraints that maintain dynamic relationships in the UI without the need for complex event handling. For example, button.Width = 100 - slider.Value causes button to shrink as the slider thumb is moved to the right, or grow as it is moved to the left. Constraints have many benefits: they allow rich custom layouts to be expressed with very little code, they are easy animate, and they support UIs with lots of dynamic behavior.
Simplified animation with one line of code. For example, button.Left.Animate().Duration(500).To = label.Right will cause button to move to the right of label in 500 milliseconds.
High-level functional programming constructs for graphics programming including abstractions for textures, pixel effects, transitions, curves, surfaces, height fields, normal maps, and 3D/2.5D lighting.
Experimental support for Direct3D 10 pixel/vertex shaders.
Pixel shader effects without the need to write HLSL code or boilerplate code! For example, canvas.Effect.Custom = (input) => (uv) => new ColorBl(new Point3DBl(1,1,1) - input[uv].ScRGB, input[uv].ScA); defines and installs a pixel shader on a canvas that inverts the canvas's colors. Pixel shading in Bling takes advantage of your graphics card to create rich, pixel-level effects.
An experimental UI physics engine for integrating physics into user interfaces! The physics supported by Bling is flexible, controllable, and easy to program.
A rich library of geometry routines; e.g., finding where two lines intersect, the base of a triangle, the area of triangle, or a point on Bezier curve. These routines are compatible with all of Bling's features; e.g., they can be used in express constraints, pixel shaders, or physical constraints. Bling also provides a rich API for manipulating angles in both degrees and radians.
And many smaller things; e.g., a frame-based background animation manager and slide presentation system.
As a lightweight wrapper around WPF, Bling code is completely compatible with conventional WPF code written in C#, XAML, or other .NET languages.

Getting Started

Requirments: Visual Studio 2008 full or Express, .NET 3.5 and .NET 3.5 SP1, Visual Studio 2008 SP1 (may not be necessary, comes with VS 2008 Express). To support WPF pixel shaders, the DirectX August 2008 runtime is sometimes required, although this is often already installed on your machine.

As of Bling 3, DirectX 10 is also supported for Windows Vista and Windows 7 (sorry XP users!). If you want to use DirectX 10, you'll have to install the latest redistrutable; e.g., the web installer. Bling also depends on the WindowsAPICodePack and the DLR, but both DLLs are included in the distribution.

Download the source release from the web page. An example comes with the release. To include in your own project for WPF development, simply add the Bling.Core and Bling.WPF projects to your solution, and then add a reference to the Bling project from your own project. For DirectX 10 development, add and refer to the Bling.Core, Bling.WPF, and Bling.D3D10 projects.

Example

ThumbBl thumb = new ThumbBl(canvas) {
  Background = Brushes.Red,
  CanDrag = true,
  CenterPosition = canvas.Size - new PointBl(20,20),
  ZIndex = 1,
};
LabelBl label = new LabelBl(canvas) {
  Content = "Hello World: ".Bl() + thumb.CenterPosition.ToStringBl(),
  Font = { Weight = FontWeights.SemiBold, Size = 80, },
  CenterPosition = canvas.CenterSize,
};

label.RenderTransform.Rotate = (thumb.CenterPosition - label.CenterPosition).Angle.ToDegrees();

ThumbBl thumbB = new ThumbBl(canvas) {
  Background = Brushes.Blue, LeftTop = new PointBl(0,0), CanDrag = true 
};
label.Effect.Custom = (input) => (uv) => {
  /*L1*/ PointBl p = label.RenderTransform.Inverse.Transform(thumbB.CenterPosition - label.LeftTop);
  /*L2*/ PointBl q = uv * label.Size;
  /*L3*/ DoubleBl d = (p - q).Length;
  /*L4*/ d = 1 - (d / 500).Min(1);
  /*L5*/ ColorBl clr = (d).Lerp(Colors.Black, Colors.Blue);
  /*L6*/ return ColorBl.FromScRgb((input[uv].ScA).Min((1 - (d * d)).Max(.4)), clr.ScRGB);
};

Updated Wiki: Texture

mcdirmid — Mon, 20 Jul 2009 14:43:48 GMT

A texture is a function from a 2D texture coordinate in (0,0) - (1,1) space to a color. Textures are often created from images; consider any image brush in WPF:

Texture Normals0 = new ImageBrushBl("Resources/3977-normal0.jpg".ImageFor(typeof(Shaders)));
Texture Heights0 = new ImageBrushBl("Resources/3977-height0.jpg".ImageFor(typeof(Shaders)));
Texture Autumn = new ImageBrushBl("Resources/Autumn.jpg".ImageFor(typeof(TransitionsTest)));
Texture ImageBrushBl Dock = new ImageBrushBl("Resources/Dock.jpg".ImageFor(typeof(TransitionsTest)));

Image textures in DirectX are created a bit differently via a rendering device:

Texture Autumn = Device.TextureFromUri("Resources/Autumn.jpg".MakePackUri(typeof(D3DTest)));

A texture can also be formed directly from a in-code function, e.g., consider the following method that creates a meta-ball texture:

public Texture MetaBalls(IListBl<PointBl> Points, IListBl<ColorBl> BallColors) {
 return new Texture(UV => {
  ColorBl color = Colors.Black;
  DoubleBl metaball = 0;
  for (int i = 0; i < Points.Count; i++) {
   PointBl p = Points[i];
   PointBl v = (UV - Points[i]);
   v = v * v;
   DoubleBl at = 3d / (v.X + v.Y);
   color += BallColors[i] * at;
   metaball += at;
  }
  ColorBl useColor = color / metaball;
  return (metaball > .0016).Condition(useColor, Colors.White);
 });
}

The texture abstraction itself supports color-based operations and combinations. Consider lerping between two textures t₀ and t₁ as slider.Value.Lerp(t₀ , t₁), which forms a texture that implements a basic fade transition from t₀ to t₁. As with other Bling graphic functions, operations on textures are merely syntactic sugar for expanding out the functions and applying the operation directly to the resulting colors; e.g., the lerp above can be written out as:

new Texture(p => slider.Value.Lerp(t0(p), t1(p)))

Other useful texture operations include max, min, clamp, multiplication, and so on, and are often referred to as filtering. Textures also support distortions re-arrange its pixels by texture coordinate transformations. Example:

input.Distort(UV => UV + (UV - 0.5).Perpendicular.Normalize * 0.1)

This distort will cause a 10% swirl about the center of the texture.

Textures can be explicitly converted into normal maps or height fields by explicit casts. These conversions are based on standard normal map and height field texture encodings produced by popular bump mapping tools, and are meant as a bump mapping convenience.
Pixel effects map textures to new textures and are basically the core of a pixel shader.

Updated Wiki: Texture

mcdirmid — Mon, 20 Jul 2009 14:42:03 GMT

A texture is a function from a 2D texture coordinate in (0,0) - (1,1) space to a color. Textures are often created from images; consider any image brush in WPF:

Texture Normals0 = new ImageBrushBl("Resources/3977-normal0.jpg".ImageFor(typeof(Shaders)));
Texture Heights0 = new ImageBrushBl("Resources/3977-height0.jpg".ImageFor(typeof(Shaders)));
Texture Autumn = new ImageBrushBl("Resources/Autumn.jpg".ImageFor(typeof(TransitionsTest)));
Texture ImageBrushBl Dock = new ImageBrushBl("Resources/Dock.jpg".ImageFor(typeof(TransitionsTest)));

Image textures in DirectX are created a bit differently via a rendering device:

Texture Autumn = Device.TextureFromUri("Resources/Autumn.jpg".MakePackUri(typeof(D3DTest)));

A texture can also be formed directly from a in-code function, e.g., consider the following method that creates a meta-ball texture:

public Texture MetaBalls(IListBl<PointBl> Points, IListBl<ColorBl> BallColors) {
 return new Texture(UV => {
  ColorBl color = Colors.Black;
  DoubleBl metaball = 0;
  for (int i = 0; i < Points.Count; i++) {
   PointBl p = Points[i];
   PointBl v = (UV - Points[i]);
   v = v * v;
   DoubleBl at = 3d / (v.X + v.Y);
   color += BallColors[i] * at;
   metaball += at;
  }
  ColorBl useColor = color / metaball;
  return (metaball > .0016).Condition(useColor, Colors.White);
 });
}

new Texture(p => slider.Value.Lerp(t0(p), t1(p)))

input.Distort(UV => UV + (UV - 0.5).Perpendicular.Normalize * 0.1)

This distort will cause a 10% swirl about the center of the texture.

Textures can be explicitly converted into normal maps or height fields by explicit casts. These conversions are based on standard normal map and height field texture encodings produced by popular bump mapping tools, and are meant as a bump mapping convenience.
Pixel effects

Updated Wiki: Texture

mcdirmid — Mon, 20 Jul 2009 14:28:37 GMT

A texture is a function from a 2D point in 0,0 - 1,1 space to a color. Textures are often created from images; consider any image brush in WPF:

Texture Normals0 = new ImageBrushBl("Resources/3977-normal0.jpg".ImageFor(typeof(Shaders)));
Texture Heights0 = new ImageBrushBl("Resources/3977-height0.jpg".ImageFor(typeof(Shaders)));
Texture Autumn = new ImageBrushBl("Resources/Autumn.jpg".ImageFor(typeof(TransitionsTest)));
Texture ImageBrushBl Dock = new ImageBrushBl("Resources/Dock.jpg".ImageFor(typeof(TransitionsTest)));

Image textures in DirectX are created a bit differently via a rendering device:

Texture Autumn = Device.TextureFromUri("Resources/Autumn.jpg".MakePackUri(typeof(D3DTest)));

A texture can also be formed directly from a in-code function, e.g., consider the following method that creates a meta-ball texture:

public Texture MetaBalls(IListBl<PointBl> Points, IListBl<ColorBl> BallColors) {
 return new Texture(UV => {
  ColorBl color = Colors.Black;
  DoubleBl metaball = 0;
  for (int i = 0; i < Points.Count; i++) {
   PointBl p = Points[i];
   PointBl v = (UV - Points[i]);
   v = v * v;
   DoubleBl at = 3d / (v.X + v.Y);
   color += BallColors[i] * at;
   metaball += at;
  }
  ColorBl useColor = color / metaball;
  return (metaball > .0016).Condition(useColor, Colors.White);
 });
}

new Texture(p => slider.Value.Lerp(t,,0,,(p), t,,1,,(p)))

Other useful texture operations include max, min, clamp, multiplication, and so on.

bling Wiki & Documentation Rss Feed

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Home

Getting Started

Example

Updated Wiki: lighting

Light Sources

Simple lighting of paper

Updated Wiki: lighting

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Pixel effect

Related

Updated Wiki: shader

MetaBalls

Limitations

Updated Wiki: Home

Getting Started

Example

Updated Wiki: transition

Updated Wiki: transition

Updated Wiki: Pixel effect

Related

Updated Wiki: Pixel effect

Updated Wiki: Pixel effect

Updated Wiki: Home

Getting Started

Example

Updated Wiki: Texture

Related

Updated Wiki: Texture

Related

Updated Wiki: Texture