本 教程适用于电脑3D图形新手。教程中将介绍常用术语并解释如何在Flash中实现3D。如果你不知道什么是网格(mesh)，贴图(texture)或都 着色引擎(shader)(译者注：参见什么是shader? – 文章未完成) ，那么本文可以在你准备使用Papervision3D, Away3D 和 Sandy这些引擎制作3D Flash之前，为你讲解一些必要的基础知识。因为本教程只涉及一般电脑3D基础知识，所以不需要编程基础。
本教程是为刚刚入门的新手编写的，不过你也可以在教程中找到其他一些信息。所有示例都是使用Away3D实 现的，你也可以随意下载示例源代码。直接研究代码是学习Flash 3D的最好办法。在这里(文章未完成)有如果使用这些代码的说明。最后提醒一下，每个例子都需要用鼠标指向才会运行。如果所有Flash文件都一起运行， 你的浏览器马上就会挂掉。下面也会讲到这是为什么。
好了，进入主题。3D很简单。就象你每天用双眼看到的一样，是你非常习惯的东西。因此你的大脑对3D世界很了解。在电脑中的3D与在现实中十分类似。区别只是在电脑中，你看到的一切是某些人设计出来的，而且只显示在平面的显示器上。(译者注，现实世界也不是凭空变出来的)
作者：Jens C Brynildsen (May 08th 2008)
翻译：Sonic (正在翻译中)
第三维度
你还记得数学课上画的坐标吗？你在X轴和Y轴中画上线，看起来那些线除了应付老师没有其他任何意思。在2D平面图型中，我们使用X Y坐标，在其中绘制线段。而在3D图型中，我们使用X，Y，Z这三个坐标。
源代码: Triaxe.as
点击并拖动鼠标。本例中，我们在场景中绘制了一个三维坐标和三个球体。通过球体更容易理解坐标轴的移动。如果没有球体，就很难观察到旋转的真实感。如果不去移动一个3D物体，那么它就和一个2D图型没什么两样。
顶点
在3D空间中的点称为顶点。定义顶点，需要描述它在三个坐标轴上的位置。3D空间坐标的描述顺序总是X, Y, Z这样。就象一个3D的点一样，坐标值是以原点为基础来计算数值。当你在Flash中绘制图型，坐标是以舞台左上角为原点开始计算。而在3D空间中
Coordinates in 3D space are always in the order X, Y, Z. Just like a 2D point, the values are made in reference to a “point of origin”. When you draw graphics in Flash, the position of the graphic is given as X and Y, relative to the upper left corner of the stage. A 3D world has a similar point of origin, so the X, Y and Z values can relate to this common reference.
Triangles
A triangle is the smallest possible 3D object you can draw. To create a triangle, you need three vertices. By changing the position of these three vertices, we can make the triangle face any direction along the three axes. This makes triangles very flexible and that is why they are the basic building block in most 3D software.
3D software often refer to these triangles as a “Face” (short for surface). There is another good reason for the name – these triangles usually face only a single direction, meaning that they are only visible from one side. Only the faces that face the virtual camera are displayed to the user.
Most 3D engines offer the possibility to flip what side is visible or to make the faces double-sided so they can be seen from both sides. If a face is set to be visible from both sides, it requires a little extra processing power. This may not seem as a problem, but to make something look good you will need a lot of these triangles.
movie: Triangles.as
Hover to play the sample above. Here we have 500 random triangles that you can toggle as single or double sided. Notice how making them double sided introduces a severe drop in framerate (framerate is measured as fps = frames per second). To make matters worse – the processing power for every computer varies, so Real-time 3D in Flash may require a lot of testing on different hardware to make it right.
3D models
By drawing a lot of triangles in 3D space and placing them next to each other, you can construct pretty much any kind of model. The resulting model is usually referred to as a Mesh or a wireframe. Drawing a curved surface is impossible with triangles, but by adding many triangles, a seemingly pointed surface will appear round.
movie: SphereTri.as
Click the plus and minus buttons to increase/decrease the triangle density of the Sphere above. The more you increase the resolution the Sphere, the less you can see that it’s based on triangles. You’ll also notice that as you add triangles, the animation slows down. The more triangles there is to render, the slower your animation will run.
This Sphere is one of the many Primitives you usually find in 3D engines. Other common primitives are Planes, Boxes, Cylinders and Cones. The primitives can take you far and you can also create your 3D models from scratch by drawing triangles. However, it’s much easier to use a specialized software for creating models.
3D Modeling software
3D is a big industry and various programs suit different tasks. There’s Swift3D, Blender, Strata, Maya, 3DS Max, Lightwave 3D, Softimage, Electric Image, Cinema4D, FormZ, Rhino, SketchUp and many more. These all vary immensely in terms of capabilities and price. Some are used to create simple effects and other are used in Hollywood.
Personally, I’ve used 3DS Max (expensive) and SketchUp (free), but I know that many in the Flash community use the Open Source tool Blender. The price point is hard to beat (free) and Blender exports to a variety of formats that works with Actionscript based 3D engines (thanks to Dennis Ippel). No matter what tool you choose, expect to spend some time to learn the tool. Creating 3D models can be a tedious task and the various software packages can be complex. Use tutorials you find online or get a good book to ease the process. As you get proficient at modeling, keep in mind what you just learned about the complexity of models as well. Something that looks good in the modeling software may easily be too complex to display in Real-time using Flash.
Views and Cameras
3D on a screen really isn’t 3D at all. Real 3D requires that your two eyes see different things and that just isn’t possible without specialized hardware. To solve this, we have to “translate” the 3D space into 2D. We do this by using a virtual camera connected to a View. The view is a rectangle that we make a projection of the 3D space onto. By setting the width and height of the view, you decide the aspect of the resulting image. Classic television has an aspect ratio of 4:3 (width:height). New High Definition TVs use the 16:9 aspect ratio.
How the 3D model is drawn is decided by the properties of the Camera. Experiment with the example below.
movie: Camera.as
In this example, the camera position is fixed but you can vary the Zoom by moving up/down and the Focus width (often referred to as Field Of View or FOV) by moving sideways. Just as on an ordinary camera lens, a lower Focus value will see a wider area and a lower will see a more narrow area as illustrated in the “As seen from above” box. This sample is not 100% technically correct, but you should get the general idea. By moving the mouse cursor to the upper left corner, you’ll get the “hyperdrive”-effect as seen in movies like Star Wars. If you move to the upper right corner, the 3D model will appear more “flat”. Move down and you’ll zoom in on the big red sphere.
The process of converting a virtual 3D scene to 2D is called 3D Projection. You view the triangles through a virtual Camera and project the onto a plane. The two main kinds of projection for 3D graphics called Perspective Projection and Orthographic Projection. Briefly said, the first considers the camera “optics” and the other does not. How the triangles position are translated are decided by the settings of the camera.
This is done using Matrix math and it’s beyond the scope of this tutorial. If you know your math and want to learn more, click here. The average Flash user does not need to know anything about this unless you want to create your own 3D engine.
Textures
A wireframe model is kind of informative, but add a texture to the surface of the model and you’ll get something that looks much more real. The process of adding textures is fairly complex since every triangle will need to show a small part of a larger image. Every one of these triangles may have rotation along the X, Y or Z axis so the texture must be skewed to compensate for this perspective.
If there is too few triangles, you will see distortions in the texture. By refining the underlying geometry by adding more triangles, we can make the texture look much better. Click the buttons to test this yourself.
movie: Textures.as
The textures are applied to the triangles according to a set of rules referred to as UV coordinates. These coordinates tell what part of the image goes on what triangle. Since the UV coordinates just point to various parts of a bitmap, you can easily skin an entire airplane with just one bitmap.
Different parts of the image are mapped onto the wings, body, wheels, interior and all other parts of the plane. The standard primitives contain UV coordinate presets. To create the UV coordinates for a complex model like an airplane, you would use a 3D modeling software.
There are several kinds of textures you can map onto the 3D model:
- color mapping – single or multi colored surfaces
- bitmap mapping – wraps a bitmap around your model
- bump mapping – like bitmap maps, but uses an extra greyscale image to add “bumps” in the texture surface. Can greatly enhance a model without making the geometry more complex. (example)
- environment mapping – like bitmap maps, but creates a “reflection” based on another bitmap that changes depending on object rotation (example)
- normal mapping – smoothes the surface of the model making it appear to be much higher resolution. can be used to create bump map effects. (example)
The current 3D engines have differing capabilities in this area, so you’ll need to do some research if you have special needs. Briefly said, Papervision3D supports color, bitmap, bump, environment and Away3D supports color, bitmap, environment, normal.
Remember that using the right texture will make your model stand out. There’s a lot of high quality textures on the web, and you can get really far if you are willing to search around. However, if you have a budget there’s much more available from commercial vendors. These are typically of better quality and higher resolution than what you can find online and by buying commercially, you’ll also get a license for the use. This can save you from headaches later.
Image from our Heaven and Earth tutorial based on freely available textures
Light and shadow
For realism, nothing beats light and shadows. We are so used to this in the real world that we instantly notice if it’s missing. It is common to have different kinds of lights like omni lights, directional lights and ambient lights. None of the current 3D engines in Flash offer very solid support for lighting and shadows and the reason is simple – this requires a lot of processing. Small demos have been done with the various engines, but these are more or less experiments.
Flash Player 10 and it’s new Pixel Bender shader engine is what could bring about light and shadow to Flash, but for now these features are more or less novelty.
Shaders
While a plain textures sphere looks good and obviously can be used for a lot of purposes, it looks kind of flat. Shaders are what adds depth and richness to a 3D model. There are many kinds of shaders: Flat, Goraud, Phong, Bump, Cel/Cartoon and more. These add shadow, detail, highlights, reflections and refraction to the basic texture of a model. To see how lights combine with shaders affect 3D objects in Away3D, check this fine example by Ralph Brooker.
Ralph Hauwert, one of the Papervision3D contributors has done some experimental work on shaders that might make it into a future release. For now, most of the shaders available for use with Flash are simple Phong shaders. Expect that to change as Flash Player 10’s 3D and Pixel Bender features are implemented.
Rendering
Rendering is the process of combining all of the above and outputting the projected image. We usually divide 3D into two kinds: Real-time and Pre Rendered. For use in Flash, Real-time is usually what we are after though Pre Rendered is fully possible. The current breed of 3D engines are all Real-time.
Most 3D software offers different kinds of renderers. Some offer advanced rendering of glass and refraction of light, but that’s not possible in Real-time. In Real-time rendering, everything is about tradeoffs and tricks to make the playback smoother.A common trick is to not render the triangles that are not visible to the virtual camera. This process is called Culling. Another trick is that you may not need everything to be technically perfect at all times, so you can “cheat” by not sorting every triangle perfectly.
The various engines offer different renderers targeted at different scenarios. If you need precision and use less complex geometry, you can get some pretty good looking results. If you have complex geometry, you’ll want to build your models so you can use the fastest renderer. Away3D offers 3 renderers: Basic (fast), Correct Z order (forces sorting of triangles) and Intersecting Objects (automatically subdivides objects into more triangles to display correctly). The GreatWhite branch of Papervision3D offers a Basic renderer as well as a Lazy renderer. The Sandy 3D engine has a different approach and offers four different sort methods. Future versions of each engine will add more renderers.
To illustrate how different renderers impacts the framerate, lets return to our Triangles example earlier in this article. Click the “renderer” button to change rendering method.
movie: Renderers.as
As you can see from this example, the Intersection Objects renderer is quite CPU intensive. The more objects that intersect, the lower fps. If you want to learn more about 3D rendering check this Wikipedia article.
Flash 3D engines
We have already mentioned some of the available 3D engines. The following is part of a list (compiled by Carlos Pinho) showing the currently available engines:
- Papervision 3D (Open Source)
- Sandy 3D (Open Source)
- Away 3D (Open Source)
- Wire Engine 3D (Open Source)
- Electric 3D (Commercial)
- Alternativa Platform (Commercial / free for non-commercial)
Carlos list also highlights other related engines, so if you’re looking for physics engines or ways to create 3D games, check it out.
Of the ones listed, the first three are probably the most interesting and versatile. Sandy was the first 3D engine for Flash. It was fairly slow and based on AS2. It is now being converted to AS3 and it shows great progress. There’s a lot of Papervision3D tutorials online so Flashmagazine has chosen to focus on Away3D to help bring this great engine to peoples attention. Away3D was originally based on Papervision3D so there are many familiarities, but Away3D offers several features not available in the current version of Papervision3D. Visit our Tutorials section to learn how to use Away3D with Flash or Flex. To read more about the other alternatives, check out this great summary by Nicolas Antille
Flash Player 10 is now in Beta and it has several features that will increase speed for 3D operations (example). It also features a Pixel Shader that can increase the speed and fidelity of graphics a lot. It will still be far from the quality of dedicated 3D plugins such as Unity so don’t expect wonders.
Running the sample files
To learn how to use the downloaded files, check this tutorial on setting up Away3D. The examples require that you download and install the source code for Away3D and MinimalComps (The UI components used in the example files). MinimalComps is a set of compact and easy to use interface components created by Keith Peters. You can find the latest version at http://code.google.com/p/minimalcomps/ You’ll also need this file (Cover.as).
If you are using Flash and can’t see the labels on the MinimalComps components, you need to install the font they use. Browse to the folder where you extracted the MinimalComps and in the assets subfolder, you’ll find the “pf_ronda_seven.ttf” file. Install the font on your system and restart Flash. Next, open your library and select “New Font” from the dropdown menu. Select “PF Ronda Seven” and after making sure none of the Style checkboxes are checked, click OK. Lastly, Right click the font in the library, select Linkage, check the “Export for Actionscript” checkbox and press OK. Now the labels should show up as intended.
A final word of warning
Keep in mind when you start creating 3D content that you should have a good reason as to why you are using that third dimension. 3D is cool, but 3D for 3D’s sake really isn’t interesting. Make sure you utilize the extra possibilities 3D gives you and don’t use it for something you could do better with plain 2D or even HTML / images. Your users and clients will thank you.
Notes
If this article is too “untechnical for you”, check this great tutorial series by Caleb Johnston. It’s based on Papervision3D, but most of it applies to any 3D engine. The tutorials explain some of the same things as this article, but in a more technical manner. The Wikipedia image on Perspective Projection is used under the GNU Free Documentation license. The 3D models used in this article were found on the web and are believed to be in the “public domain” due to their simplistic nature.
Tutorial by Jens C Brynildsen (August 08th 2008)
http://flash3d.esojourn.org/cn/Flash-3D-Basics
微信赞赏
支付宝赞赏