Chapter 11. Filters and Effects

When applied with care, filters and effects can enhance your applications quite a lot. Think of adding not only blurs and glows, but also creating fire and smooth vapor-like trails. There are several ways to apply all sorts of effects in Papervision3D, which will be discussed comprehensively.

This chapter covers the following topics:

• Applying Flash filters to 3D objects

• Setting transparency and blend modes of 3D objects

• Applying Flash filters to the entire viewport

• Applying built-in Papervision3D effects to 3D objects

• Adding fog to your scene

• Adding reflection to 3D objects

• Creating the illusion of depth by applying different levels of blur

First, we will look at Flash filters, along with how to add them to viewport layers that contain objects. We will then examine the built-in Papervision3D effects. Next, we will discuss some extra classes that allow you to create a fog-like effect and add reflections. At the end of the chapter, a basic example will demonstrate how...

What are filters and effects?

While discussing effects in Papervision3D, they are usually mentioned in the same breath with filters. But how do they relate to one another? They seem to be somewhat semantically blended, so let's start by clarifying what we mean when we speak of filters and effects.

Filters refer to the Flash filter classes that reside in the flash.filters package such as BlurFilter, which applies a blur effect on a display object. Basically, filters are hidden calculations that you use to create visual effects.

In addition to the Flash filters that we can apply, Papervision3D has a set of classes that make it easy for you to create some special effects. For instance, they allow you to set an object "on fire". Most of the built-in effects make use of Flash filters. Therefore, in Papervision3D, effects can refer to effects in general and also to the built-in effects, which are located in a package named org.papervision3d.core.effects.

Using Flash filters to create effects

If you have worked with Flash filters before, you probably have added them to 2D objects such as sprites and movie clips. In Papervision3D, applying filters to a do3D goes pretty much the same. However, not all filters may be appropriate for all sorts of 3D objects.

Imagine for instance, a sphere that has real-time shading and at the same time a bevel filter applied to it. Bevel filters add a three-dimensional look to objects by adding a "light and shadow" effect. But the sphere is already three-dimensional and shaded, so adding a bevel may lead to undesired results. Of course, this is a matter of taste and as all filters can be applied to all 3D objects, you may find pretty exciting results by experimenting. In this section, we limit ourselves to three of the most used filters:

• BlurFilter: Applies a blur

• DropShadowFilter: Applies a drop shadow

• GlowFilter: Applies a glow

To demonstrate filters in Papervision3D, we create an example with three cubes...

Setting the transparency and blend mode of a viewport layer

In Chapter 4, we saw how you can set the transparency of a do3D's wireframe material and color material, resulting in an object that looks transparent. Similar results can be achieved by adding the do3D to a viewport layer and adding transparency to that layer. When working with layers, you can also change its blend mode.

Similar to filters, blend mode and transparency are Flash features, which we can set as soon as we put a do3D in a viewport layer. As you undoubtedly know, the transparency of a sprite is defined by its alpha property, but let's take a closer look at what blend mode does.

The Flash BlendMode class provides a number of constant values such as BlendMode.LIGHTEN and BlendMode.SCREEN. The blend mode affects the appearance of a sprite or movie clip when it is in a layer above another object. Therefore, when we put a 3D object in a layer, we can set the blend mode for that object and affect how it looks when it...

Applying filters on viewport level

So far we have discussed applying filters on viewport layers. You can also apply a filter to the entire viewport. This can be done in two ways:

• Directly applying a filter to the viewport, resulting in basic filter effects.

• Using the BitmapViewport3D class to create a bitmap viewport of the rendered scene and apply filters to the data (pixels) of this bitmap. This allows you to create more advanced filter effects, for instance effects that can be best described as "trails".

For example, a trail is the illusion of vapor or smoke, as demonstrated in the following screenshot. It shows a particle moving upward, leaving a vapor or comet trail behind:

BitmapViewportExample

Directly apply filters to the entire viewport

Applying a filter directly to the entire viewport is easy and goes as follows:

var blur:BlurFilter = new BlurFilter(8,8,BitmapFilterQuality.LOW);
viewport.filters = [blur];

The previous two lines of code will blur the whole viewport, so every...

Built-in Papervision3D effects

So far we have used the generic Flash filters and applied them to objects and to the entire viewport. However, Papervision3D also offers a set of classes that make it easy for developers to apply more advanced effects. Internally, most of these classes make use of Flash filters.

This enables you to create the following built-in Papervision3D effects:

• BitmapColorEffect

• BitmapFireEffect

• BitmapMotionEffect

• BitmapPixelateEffect

The org.papervision3d.core.effects package that stores these classes also includes a BitmapLayerEffect class (not to be confused with BitmapEffectLayer!), which offers another way to apply Flash filters to objects. We will see how that works after we have examined the effects listed previously.

All the effects will be demonstrated within one class. We will create a simple scene containing one cube. Let's take the next class as a starting point:

package
{
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.display...

Adding a Flash filter as an effect with BitmapLayerEffect

The final effect is one that takes a generic Flash filter. You first instantiate a filter, which you then simply pass to the constructor of BitmapLayerEffect:

var blur:BlurFilter = new BlurFilter(7,7);
Flash filteradding, BitmapLayerEffect usedbmLayerEffect = new BitmapLayerEffect(blur);
bitmapEffectLayer.addEffect(bmLayerEffect);

Note that not passing the quality parameter to the filter defaults to low quality. Uncomment the line with the setScroll() method. The following screenshot shows the result with the blur filter:

Combining effects

You can add multiple effects to an effect layer—for instance, if you want a more subtle result. To add the color effect and the bitmap layer effect that we just discussed, simply use the following code:

bitmapEffectLayer.addEffect(bmColorEffect);
bitmapEffectLayer.addEffect(bmLayerEffect);

The next screenshot shows the cube with both the effects applied to it, which results in a blurred, blue trail...

Adding fog with FogFilter

The fog filter allows you to create the illusion of objects disappearing gradually in a fog when the distance between the objects and the camera increases. This is a common effect in 3D games, preventing objects from suddenly disappearing behind the far plane, usually somewhere on the horizon. The filter generates a number of viewport layers with alpha transparency distributed over a region that you specify. The transparency of the layers is based on the number of layers you define.

Instantiating the filter is easy:

renderer.filter = new FogFilter(new FogMaterial(0xFFFFFF), 16,800,2000);

It takes the following parameters:

Adding reflection with ReflectionView

Another class included in Papervision3D is ReflectionView, which lets you add basic reflections to your scene. The download section of this chapter includes an example in which a carousel of planes is created. The example demonstrates how to work with ReflectionView. We will briefly run through the process of adding the reflections:

• Import the ReflectionView class. It is located in the org.papervision3d.core.effects.view package.

• Extend your document class with ReflectionView instead of BasicView.

The ReflectionView class does not override the onRenderTick() method that we have used in all our examples, so we need to change the way we call the rendering process. Replace the startRendering() method with the following line:

addEventListener(Event.ENTER_FRAME, render);

And replace the onRenderTick() method with the following:

public function render(e:Event):void
{
singleRender();
}

To position the reflection of an object you set the surfaceHeight property...

Example—creating depth of field

In film and photography depth of field is the region in the image that is sharp or in focus. A common trick in portrait photography is to focus on the subject and make the background blurred, drawing the viewer's attention to the subject. A similar effect can be achieved in Papervision3D.

Suppose you have a number of objects in your scene and you want them more in focus the closer they are to the camera. When you put each particle in a viewport layer, you can add a blur filter to each layer. Based on the screen depth of the layer, you can update the strength of the blur at every frame, which will suggest depth of field. Let's apply this idea in a simple example. We create 200 particles with a movie asset particle material and give them a random position. We also add some mouse interaction that makes the camera move. This example assumes that you have an assets folder inside your src folder with the glassBall.png in it, which can be found in the code download...

Summary

This chapter discussed filters and effects. By filters we mean the Flash filters such as drop shadow, blur, and glow. The built-in Papervision3D effects allow us to create specific effects such as fire.

You don't apply a filter directly to an object, but to the viewport layer that contains the object. Viewport layers are extended sprites, so you can set their transparency and blend mode.

You can also apply a filter on viewport level, which can be approached in two ways:

• Directly applying a filter to the viewport

• Using the BitmapViewport3D class creates a bitmap viewport of the rendered scene. You can then apply filters to this bitmap image

Applying a filter directly to the viewport results in basic Flash filter effects, whereas working with BitmapViewport3D allows you to create more advanced filter effects.

Papervision3D has a set of built-in effects:

• A color effect

• A fire effect

• A pixelating effect

• A motion effect

• A layer effect that takes Flash filters

An example has been given for each of...

The rest of the chapter is locked

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Renews at $15.99/month. Cancel anytime

Start free trial

Previous Chapter

Chapter 1 of 18

Next Chapter

You have been reading a chapter from

Papervision3D Essentials

Published in: Sep 2009 Publisher: Packt ISBN-13: 9781847195722

© 2009 Packt Publishing Limited All Rights Reserved

Register for a free Packt account to unlock a world of extra content!

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Sign up now

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime}

Personalised recommendations for you

Based on your interests and search pattern

The Essential Guide to Creating Multiplayer Games with Godot 4.0

This Essential Guide to Creating Multiplayer Games with Godot 4.0 teaches you how to use the high-level network API with concrete use cases. You’ll learn the fundamentals of multiplayer games and advanced techniques to improve players’ experience.

Dec 2023 10 hours 52 minutes

Creating an RTS Game in Unity 2023

A practical guide packed with essential concepts and techniques of game development, best coding practices for C# programming language, the most used design patterns to build high-quality projects, and techniques on implementing gameplay features to develop an RTS game using Unity

Oct 2023 18 hours 16 minutes

Unity Cookbook

Unlock the limitless potential of Unity 2023 game development with this new edition. Dive into over 140 expertly crafted recipes that empower you to pioneer VR and AR experiences, conquer mobile game development, and master audio techniques, all while building a strong foundation in Unity's latest tools and features. Elevate your skills, captivate your audience, and craft your gaming masterpiece with this essential resource.

Nov 2023 26 hours 0 minutes

Enhancing Virtual Reality Experiences with Unity 2022

Enhancing Virtual Reality Experiences with Unity 2022 guides you through the latest features of Unity. Starting with the basics of understanding virtual reality, you’ll systematically build the technical skills for building VR experiences in Unity, and finally implement everything you’ve learned in real-world projects.

Nov 2023 18 hours 52 minutes

Photorealistic Materials and Textures in Blender Cycles

This comprehensive, beginner-friendly, AI-assisted, step-by-step guide is carefully tailored to guide you through the journey of progressing from a beginner to an expert artist. The book helps you to master materials, procedural textures, lighting, and rendering in Blender’s powerful Cycles render engine.

Oct 2023 13 hours 8 minutes

XR Development with Unity

This practical guide helps you create immersive VR, AR, and MR experiences using Unity 2021.3 or later versions. You’ll learn to add physics, animations, teleportation, sound, effects, and hand-tracking to XR scenes and deploy them on VR headsets, simulators, and mobile devices—all that you need to create interactive XR projects in Unity is here.

Nov 2023 9 hours 28 minutes

Unreal Engine 5 - The Intermediate Course

Elevate your game design journey with "Unreal Engine 5: The Intermediate Course." Dive into detailed studies of Materials and Textures, Landscapes and Open Worlds, Skeletal Meshes and Animations, and advanced Blueprint techniques. Transform your basic knowledge into professional-level expertise in Unreal Engine 5.

Dec 2023 18 hours 55 minutes

Learn Unity Game Development - Build Six Games with Unity 2023

Get ready to dive into the exciting world of Unity game development and C# scripting! With a hands-on approach, you will craft a variety of thrilling 2D and 3D games using Unity and C#. Uncover the art of building and exporting games to the Android mobile platform. This course is tailor-made for someone who wants to learn Unity and C# through real-world projects.

Sep 2023 12 hours 3 minutes

Learn Intermediate C# Scripting for Unity Game Development

Prepare to immerse yourself in the thrilling realm of Unity game development and C# scripting! If you have already acquired the fundamentals of C# scripting with Unity and are eager to elevate your skills to the next tier, then you have found the ideal Intermediate C# Scripting Course. This course is custom-crafted for individuals seeking to master Unity and C# by working on practical, real-world projects.

Oct 2023 8 hours 6 minutes

Low Poly Modeling for Absolute Beginners

Immerse yourself in the mesmerizing realm of low poly modeling with Blender! Unleash your boundless creativity as you sculpt stunning 3D designs. Master Blender’s tools to create captivating low poly trees, rocks, and more. Elevate your artistry with powerful modifiers and bring your unique vision to life in the world of 3D.

Aug 2023 14 hours 37 minutes

Machine Learning Kubernetes React Python Cybersecurity Unity Game Development Power BI Azure Web Development

Legal

Terms and Conditions Privacy Policy Cookie Policy Shipping Policy Cancellation Policy Return Policy

Support

Help Contact Us

Business

Partnerships

Sponsored eBooks Custom eBooks

Careers Become an author

Packt+ Membership

Subscription DataPro SecPro TechLeaders

Japan

Company Address: Packt Publishing Ltd, Grosvenor House, 11 St Paul's Square, Birmingham, B3 1RB © 2024 Packt Publishing Limited All Rights Reserved

	Parameter	Data type	Default value	Description
1	material	FogMaterial	—	The fog material. The FogMaterial class only takes one parameter, which is a hexadecimal color value.
2	segments	uint	8	Sets the number of layers. The higher this value, the lower the alpha value of the layers will be...

Adding reflection with ReflectionView

Another class included in Papervision3D is ReflectionView, which lets you add basic reflections to your scene. The download section of this chapter includes an example in which a carousel of planes is created. The example demonstrates how to work with ReflectionView. We will briefly run through the process of adding the reflections:

• Import the ReflectionView class. It is located in the org.papervision3d.core.effects.view package.

• Extend your document class with ReflectionView instead of BasicView.

The ReflectionView class does not override the onRenderTick() method that we have used in all our examples, so we need to change the way we call the rendering process. Replace the startRendering() method with the following line:

addEventListener(Event.ENTER_FRAME, render);

And replace the onRenderTick() method with the following:

public function render(e:Event):void
{
singleRender();
}

To position the reflection of an object you set the surfaceHeight property...

Example—creating depth of field

In film and photography depth of field is the region in the image that is sharp or in focus. A common trick in portrait photography is to focus on the subject and make the background blurred, drawing the viewer's attention to the subject. A similar effect can be achieved in Papervision3D.

Suppose you have a number of objects in your scene and you want them more in focus the closer they are to the camera. When you put each particle in a viewport layer, you can add a blur filter to each layer. Based on the screen depth of the layer, you can update the strength of the blur at every frame, which will suggest depth of field. Let's apply this idea in a simple example. We create 200 particles with a movie asset particle material and give them a random position. We also add some mouse interaction that makes the camera move. This example assumes that you have an assets folder inside your src folder with the glassBall.png in it, which can be found in the code download...

Summary

This chapter discussed filters and effects. By filters we mean the Flash filters such as drop shadow, blur, and glow. The built-in Papervision3D effects allow us to create specific effects such as fire.

You don't apply a filter directly to an object, but to the viewport layer that contains the object. Viewport layers are extended sprites, so you can set their transparency and blend mode.

You can also apply a filter on viewport level, which can be approached in two ways:

• Directly applying a filter to the viewport

• Using the BitmapViewport3D class creates a bitmap viewport of the rendered scene. You can then apply filters to this bitmap image

Applying a filter directly to the viewport results in basic Flash filter effects, whereas working with BitmapViewport3D allows you to create more advanced filter effects.

Papervision3D has a set of built-in effects:

• A color effect

• A fire effect

• A pixelating effect

• A motion effect

• A layer effect that takes Flash filters

An example has been given for each of...