Away3D Forum Outer glow, stroke or outline effect.

Hector, Sr. Member
Posted: 22 December 2011 08:00 PM Total Posts: 137

Hi all,
Is there a way to get an outer glow or stroke effect around an object to highlight it as selected?

mstaebler, Newbie
Posted: 29 December 2011 04:54 PM Total Posts: 4 [ # 1 ]

Hi Hector,

you should be able to apply the GlowFilter to your 3d object.
This is the code I used in an older version of away3d but it should still work this way:

function initEventListeners():void
{
 your3dobject.addOnMouseOver(onMouseOver);
 your3dobject.addOnMouseOut(onMouseOut); 
}

 function onMouseOver(event:MouseEvent3D) : void {
  (event.object as Mesh).filters = [new GlowFilter(0x666666, 1, 12, 12, 3, 3, false, false)];
 }
 
 function onMouseOut(event:MouseEvent3D) : void {
  (event.object as Mesh).filters = [];
 } 

Hector, Sr. Member
Posted: 29 December 2011 05:59 PM Total Posts: 137 [ # 2 ]

Thanks mstaebler,
It seems that due to Stage3D capabilities, it is not possible to add 2D flash filters to 3D objects like before.

I have seen this in the Hell Knight demo:
material.addMethod(new OutlineMethod(0xff0000, 2, false));
I will try it and post my results.

UPDATE: It creates a kind of drop shadow effect, only visible with the camera with a low angle, so not an outline, maybe a method for another effect.

view, Newbie
Posted: 12 March 2012 04:53 PM Total Posts: 12 [ # 3 ]

Hi hector did you resolve this issue, i am also stumped in creating a simple outline?

Qbrain, Member
Posted: 13 March 2012 12:06 AM Total Posts: 92 [ # 4 ]

whats the problem exactly? what do you want to do view? I had a problem earlier with outline but I fixed it thanks to Fabrice, maybe I can help you?

-Q

Hector, Sr. Member
Posted: 13 March 2012 09:44 AM Total Posts: 137 [ # 5 ]

Hi view, I haven’t had time to check all the new v4 beta capabilities yet. I’m still using v3.6 for the final application until I can solve the different issues I have with v4, but I’m still interested in getting this effect if possible.

In my case I need it for a plane (2D) extruded line added to a plane. What I did to get the highlight effect in v4 is create another extruded line a bit thicker (and different colour) and place it right under the main line. Then make it visible or invisible to simulate the ‘selected’ effect. This won’t work nice for 3D objects, though.

Qbrain, is it possible to get an outline effect in a 3D object using Away v4 beta?

view, Newbie
Posted: 13 March 2012 09:47 AM Total Posts: 12 [ # 6 ]

hi Qbrain.
I have applied a colour material and lights to my mesh, this works fine but want a 1 px outline on them. I have tried adding an outline method but cant see anything and there does not seem to be a wireframe material in broomstick. I think ther must be something i am missing? Also the bothSides=true does not seem to work?

primitiveMaterial = new ColorMaterial(colours[i]);
     primitiveMaterial.bothSides=true;
     primitiveMaterial.lightPicker=lightPicker;
     primitiveMaterial.diffuseLightSources = LightSources.LIGHTS;
     primitiveMaterial.ambientColor = colours[i];
     primitiveMaterial.ambient = 1;
     primitiveMaterial.specular = .2;
     primitiveMaterial.addMethod(new OutlineMethod(0xffffff, 10, false));
var obj:Mesh = mesh.clone() as Mesh;
     obj.castsShadows=true;
     obj.mouseEnabled=true;
obj.material=primitiveMaterial; 

view, Newbie
Posted: 13 March 2012 10:35 AM Total Posts: 12 [ # 7 ]

solution settings inner lines to true and dedicated meshed to true seems to do the trick


primitiveMaterial.addMethod(new OutlineMethod(0x88ee44, 10, true, true));

Dr Schizo, Newbie
Posted: 18 March 2012 07:58 PM Total Posts: 11 [ # 8 ]

Thanks a lot for telling us how to outline the mesh. Have you find yet a solution to make it glow? I can’t find any method that does such a thing.

I miss the old filters property!

Dr Schizo, Newbie
Posted: 20 March 2012 01:17 AM Total Posts: 11 [ # 9 ]

Does anyone know how to make an outer glow around a mesh?
Is it still possible on Away 3D 4.0?

Thanks a lot in advance!

happy3d, Newbie
Posted: 21 March 2012 02:00 PM Total Posts: 6 [ # 10 ]

This is my way..Maybe it’s stupied
import flash.filters.GlowFilter;

[Embed(source=”/../embeds/router.png”)]
private var RouterSkin : Class;

var routerBitmap:BitmapData = new RouterSkin().bitmapData;

routerBitmap.applyFilter(routerBitmap,routerBitmap.rect,new Point(),new GlowFilter(........));

routerSkin = new BitmapMaterial(routerBitmap);
routerSkin.alphaBlending = true;

Dr Schizo, Newbie
Posted: 21 March 2012 05:26 PM Total Posts: 11 [ # 11 ]

Thanks a lot for the answer. I tried to apply this solution, but it throw an error (the filter is not correct)

When I triy with a BlurFilter, it work, but not with a GlowFilter. Here is the code I use:

protected function applyTexture(data:BitmapData, mesh:Mesh):void {
 var filter:GlowFilter = new GlowFilter();
 //var filter:BlurFilter= new BlurFilter();
 data.applyFilter(data, data.rect, new Point(), filter);
 var texture:BitmapTexture = new BitmapTexture(data);
 var material:TextureMaterial = new TextureMaterial(texture);
 material.alphaBlending = true;
 mesh.material = material;
} 

Anyway, even if it’s work, it is only going to change the bitmapData, isn’t it? It will change something if it is an inner glow and notthing for an outer glow (the effect is “outside” the bitmapdata). In any case, it will make my mesh to glow like Earth in this example (except if it is a plane): http://bruno-simon.com/src/normal/img/articles/solarSystem3D.html

Am I right or wrong?

Mr Margaret Scratcher, Sr. Member
Posted: 21 March 2012 11:38 PM Total Posts: 344 [ # 12 ]

Replying so I get to hear of any solution to this…

John Brookes, Moderator
Posted: 22 March 2012 12:48 AM Total Posts: 732 [ # 13 ]

Well for planetry atmosphere type thing the easiest method is to use a plane facing the camera.
Your only concerned with bluring the edges.
So just use a simple radial gradient, blend and alpha treshold.
Not planets but you get the point
http://www.adamcousins.com/flashposts/trail/index.html
http://www.adamcousins.com/?p=49

As for other stuff no idea.

Dr Schizo, Newbie
Posted: 24 March 2012 02:22 AM Total Posts: 11 [ # 14 ]

Thanks you a lot for you answer, that was really useful. It is quitte complicated to set up compared to the away 3D 4 filter, but I guess it’s the only way.

I wanted to be able to modify dynamically the color of the atmosphere. I created a png image representing a red circle with a red outer glow and I appied a ColorMatrixFilter to change the color of the image (by replacing the red tint by another one).

var data:BitmapData = mybitmapdata;
// change the color of the image in blue
var rgb:Object = {red:0,green:0,blue:255};
var matrix:Array = new Array();
matrix = matrix.concat([rgb.red / 255, 0, 0, 0, 0]); // red
matrix = matrix.concat([rgb.green / 255, 0, 0, 0, 0]); // green
matrix = matrix.concat([rgb.blue / 255, 0, 0, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix);
data.applyFilter(data, data.rect, new Point(), filter);
//create the texture
var texture:BitmapTexture = new BitmapTexture(data);
var material:TextureMaterial = new TextureMaterial();
material.texture = texture;
material.alphaBlending = true;
//create the plane
var geometry:PlaneGeometry = new PlaneGeometry(256, 256, 8, 8);
mesh = new Mesh(plane,material);
addChild(mesh);
mesh.material = material; 

Then on everyframe, I made the plane to face the camera.

mesh.lookAt(camera.position);
mesh.rotationX += 90; 

Stephen Burgess, Newbie
Posted: 26 July 2012 10:10 PM Total Posts: 1 [ # 15 ]

Did anyone figure out how to add a simple glow like the planets have here: http://bruno-simon.com/src/normal/img/articles/solarSystem3D.html ?

Outer glow, stroke or outline effect. Software: Away3D 4.x

Hector, Sr. Member Posted: 22 December 2011 08:00 PM Total Posts: 137 Hi all, Is there a way to get an outer glow or stroke effect around an object to highlight it as selected?
mstaebler, Newbie Posted: 29 December 2011 04:54 PM Total Posts: 4 [ # 1 ] Hi Hector, you should be able to apply the GlowFilter to your 3d object. This is the code I used in an older version of away3d but it should still work this way: `function initEventListeners():void { your3dobject.addOnMouseOver(onMouseOver); your3dobject.addOnMouseOut(onMouseOut); } function onMouseOver(event:MouseEvent3D) : void { (event.object as Mesh).filters = [new GlowFilter(0x666666, 1, 12, 12, 3, 3, false, false)]; } function onMouseOut(event:MouseEvent3D) : void { (event.object as Mesh).filters = []; }`
Hector, Sr. Member Posted: 29 December 2011 05:59 PM Total Posts: 137 [ # 2 ] Thanks mstaebler, It seems that due to Stage3D capabilities, it is not possible to add 2D flash filters to 3D objects like before. I have seen this in the Hell Knight demo: material.addMethod(new OutlineMethod(0xff0000, 2, false)); I will try it and post my results. UPDATE: It creates a kind of drop shadow effect, only visible with the camera with a low angle, so not an outline, maybe a method for another effect.
view, Newbie Posted: 12 March 2012 04:53 PM Total Posts: 12 [ # 3 ] Hi hector did you resolve this issue, i am also stumped in creating a simple outline?
Qbrain, Member Posted: 13 March 2012 12:06 AM Total Posts: 92 [ # 4 ] whats the problem exactly? what do you want to do view? I had a problem earlier with outline but I fixed it thanks to Fabrice, maybe I can help you? -Q
Hector, Sr. Member Posted: 13 March 2012 09:44 AM Total Posts: 137 [ # 5 ] Hi view, I haven’t had time to check all the new v4 beta capabilities yet. I’m still using v3.6 for the final application until I can solve the different issues I have with v4, but I’m still interested in getting this effect if possible. In my case I need it for a plane (2D) extruded line added to a plane. What I did to get the highlight effect in v4 is create another extruded line a bit thicker (and different colour) and place it right under the main line. Then make it visible or invisible to simulate the ‘selected’ effect. This won’t work nice for 3D objects, though. Qbrain, is it possible to get an outline effect in a 3D object using Away v4 beta?
view, Newbie Posted: 13 March 2012 09:47 AM Total Posts: 12 [ # 6 ] hi Qbrain. I have applied a colour material and lights to my mesh, this works fine but want a 1 px outline on them. I have tried adding an outline method but cant see anything and there does not seem to be a wireframe material in broomstick. I think ther must be something i am missing? Also the bothSides=true does not seem to work? primitiveMaterial = new ColorMaterial(colours[i]); primitiveMaterial.bothSides=true; primitiveMaterial.lightPicker=lightPicker; primitiveMaterial.diffuseLightSources = LightSources.LIGHTS; primitiveMaterial.ambientColor = colours[i]; primitiveMaterial.ambient = 1; primitiveMaterial.specular = .2; primitiveMaterial.addMethod(new OutlineMethod(0xffffff, 10, false)); var obj:Mesh = mesh.clone() as Mesh; obj.castsShadows=true; obj.mouseEnabled=true; obj.material=primitiveMaterial;
view, Newbie Posted: 13 March 2012 10:35 AM Total Posts: 12 [ # 7 ] solution settings inner lines to true and dedicated meshed to true seems to do the trick `primitiveMaterial.addMethod(new OutlineMethod(0x88ee44, 10, true, true));`
Dr Schizo, Newbie Posted: 18 March 2012 07:58 PM Total Posts: 11 [ # 8 ] Thanks a lot for telling us how to outline the mesh. Have you find yet a solution to make it glow? I can’t find any method that does such a thing. I miss the old filters property!
Dr Schizo, Newbie Posted: 20 March 2012 01:17 AM Total Posts: 11 [ # 9 ] Does anyone know how to make an outer glow around a mesh? Is it still possible on Away 3D 4.0? Thanks a lot in advance!
happy3d, Newbie Posted: 21 March 2012 02:00 PM Total Posts: 6 [ # 10 ] This is my way..Maybe it’s stupied import flash.filters.GlowFilter; [Embed(source=”/../embeds/router.png”)] private var RouterSkin : Class; var routerBitmap:BitmapData = new RouterSkin().bitmapData; routerBitmap.applyFilter(routerBitmap,routerBitmap.rect,new Point(),new GlowFilter(........)); routerSkin = new BitmapMaterial(routerBitmap); routerSkin.alphaBlending = true;
Dr Schizo, Newbie Posted: 21 March 2012 05:26 PM Total Posts: 11 [ # 11 ] Thanks a lot for the answer. I tried to apply this solution, but it throw an error (the filter is not correct) When I triy with a BlurFilter, it work, but not with a GlowFilter. Here is the code I use: `protected function applyTexture(data:BitmapData, mesh:Mesh):void { var filter:GlowFilter = new GlowFilter(); //var filter:BlurFilter= new BlurFilter(); data.applyFilter(data, data.rect, new Point(), filter); var texture:BitmapTexture = new BitmapTexture(data); var material:TextureMaterial = new TextureMaterial(texture); material.alphaBlending = true; mesh.material = material; }` Anyway, even if it’s work, it is only going to change the bitmapData, isn’t it? It will change something if it is an inner glow and notthing for an outer glow (the effect is “outside” the bitmapdata). In any case, it will make my mesh to glow like Earth in this example (except if it is a plane): http://bruno-simon.com/src/normal/img/articles/solarSystem3D.html Am I right or wrong?
Mr Margaret Scratcher, Sr. Member Posted: 21 March 2012 11:38 PM Total Posts: 344 [ # 12 ] Replying so I get to hear of any solution to this…
John Brookes, Moderator Posted: 22 March 2012 12:48 AM Total Posts: 732 [ # 13 ] Well for planetry atmosphere type thing the easiest method is to use a plane facing the camera. Your only concerned with bluring the edges. So just use a simple radial gradient, blend and alpha treshold. Not planets but you get the point http://www.adamcousins.com/flashposts/trail/index.html http://www.adamcousins.com/?p=49 As for other stuff no idea.
Dr Schizo, Newbie Posted: 24 March 2012 02:22 AM Total Posts: 11 [ # 14 ] Thanks you a lot for you answer, that was really useful. It is quitte complicated to set up compared to the away 3D 4 filter, but I guess it’s the only way. I wanted to be able to modify dynamically the color of the atmosphere. I created a png image representing a red circle with a red outer glow and I appied a ColorMatrixFilter to change the color of the image (by replacing the red tint by another one). var data:BitmapData = mybitmapdata; // change the color of the image in blue var rgb:Object = {red:0,green:0,blue:255}; var matrix:Array = new Array(); matrix = matrix.concat([rgb.red / 255, 0, 0, 0, 0]); // red matrix = matrix.concat([rgb.green / 255, 0, 0, 0, 0]); // green matrix = matrix.concat([rgb.blue / 255, 0, 0, 0, 0]); // blue matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha var filter:ColorMatrixFilter = new ColorMatrixFilter(matrix); data.applyFilter(data, data.rect, new Point(), filter); //create the texture var texture:BitmapTexture = new BitmapTexture(data); var material:TextureMaterial = new TextureMaterial(); material.texture = texture; material.alphaBlending = true; //create the plane var geometry:PlaneGeometry = new PlaneGeometry(256, 256, 8, 8); mesh = new Mesh(plane,material); addChild(mesh); mesh.material = material; Then on everyframe, I made the plane to face the camera. `mesh.lookAt(camera.position); mesh.rotationX += 90;`
Stephen Burgess, Newbie Posted: 26 July 2012 10:10 PM Total Posts: 1 [ # 15 ] Did anyone figure out how to add a simple glow like the planets have here: http://bruno-simon.com/src/normal/img/articles/solarSystem3D.html ?

Outer glow, stroke or outline effect.

Login

Away3D Forum

Member Login