The effect of using Flash to realize bump mapping

Source: Internet
Author: User
Tags final
1. The following is a simple introduction to what is called bump Mapping.
Bump mapping is also called bump mapping, in the current graphics processing and games are very popular (we should have played Halflife-2 or doom it? )。 The biggest difference between a bump map and a normal map is that each pixel in the bump map represents not only the color of the dots, but also the degree to which the point is concave and convex. So the bump map (Bump Mapping) is often used to render some of the more complex materials, such as rugged pavement, rusty iron cans, human skin and peeling walls, and so on. Here is an effect graph of a bump map, which consists of a bump map (bump) and a plain texture (texture) plus a little light.
[Texture of bump map]

[Height map of bump map]

[Bump Map Effect Chart]

The height map in the bump map represents the extent of each pixel prominence in a bump map (Bump Mapping), typically represented by the brightness of the height map pixel, which is typically 0-255. The texture in the bump map represents why the pixel itself is color.
2. Then in a little talk about the effect of such a mysterious is roughly how to calculate.
Let's take a look at a common bump map (bump chart), which is represented by brightness. If you ask for the color of this point to first find its normal vector, and then after the lighting and material operations, the point of the final color to find out.
X_gradient = Pixel (x-1, y)-pixel (x+1, y)
Y_gradient = Pixel (x, y-1)-pixel (x, y+1)



Use this formula can easily find out the slope of each point, and then use the slope and the position of the light can be used to find the point of the tone, and then the calculation of the intensity and the material after the operation can be the final color! At last we will show each point, and our effect will appear!

3. Below we start with the Flash 8.0 ActionScript 2.0来 To achieve this effect of the Operation Bar.
There are two files in my Code bag, one is bumpmapper.as and the other is bumpingclip.as. The main thing is to implement a bumpmapping filter, basically the code is bumpmapper.as here. Bumpingclip.as is a movieclip subclass used to move bump mapping to the top of the table.

This time we will use the new two filter (filter) in Flash 8.0.
Flash.filters.convolutionfilter;flash.filters.displacementmapfilter.
The first convolutionfilter uses a 3x3 matrix to write to the pixel the 8 pixels around each pixel of the image and the values that are weighted and then added to it. His formula is as follows:
DST (x, y) = (src (x-1, y-1) * a0 + src (x, y-1) * A1 ... src (x, y+1) * A7 + src (x+1,y+1) * A8)/divisor) + BIAS
We are familiar with the fuzzy effect is so out of the ~ ~ Of course, we are not going to take it as a blur effect today. Instead, it enables the use of adjacent pixel operations to compute the slope of each pixel.
The second displacementmapfilter uses a mapbitmap to insinuate pixels from a source bitmap to the target bitmap, usually to distort the effect, which we will use today to map the lights after the bump map (Bump map).

Let's hand-make a bump mapping effect.
0. Download the source code first and place the unpacked org directory in the same directory as the file you created, or flash may not be able to find the location of the action script that you want to use externally.
1. Will you like the picture is texture drag up, and then convert it into components and named Texturemap (in the bitmap into the components remember to put the bitmap in the upper left corner, that is, 0,0 position, otherwise there will be unexpected things happen).
2. The component on the stage is also named texture and then converted into a component named Bumpped Map.
3. Locate the bumpped map right in the library and click the link to enter Org.guRuSoft.Bumper.BumpingClip in the Action 2.0 class to determine.

4. Import your favorite light bitmap into the library, then create a new component and name it light, then place the light bitmap in the middle of the component.
5 The bitmap you want to use as a bump map into the library and name the bitmap bumpmap.
7. Enter the bumpped map element and write in the first frame:
Import Flash.display.BitmapData;

This.texturemap=texturemap; Tell this bumppingclip we use the texture on the stage as the texture of this bump map.
This.bumpmap = Bitmapdata.loadbitmap ("BumpMap"); Read the BumpMap bitmap in the library and teach Bumppingclip as the height Map
This.lightmap = "Light"; Tell bumpping clip We use the MovieClip in the library named Light as the light.
This.startrender (); Tell bumpping clip are all set up and ready to start rendering.
All is well, if you want to use the mouse on the stage to control the lights, you can add the following script:
function Onenterframe () {
The This.lightclip._x=texturemap._xmouse;//lightclip property can read the lighting element in use (MovieClip) from the bumpping clip
This.lightclip._y=texturemap._ymouse;
}


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.