You know I’m a fan of the Papervision BasicView, it’s just such a good entry point into Papervision – so easy to work with, and you can even extend it for your document class.
But how cool would it be if you could have something as simple as a BasicView, but that automatically created a reflection on the ground? Very cool! That’s how!
Which is exactly why I made a ReflectionView. You can pretty much just replace your BasicView with this new class.
At the moment it only works with reflections on an xz plane (ie the floor).
There are only two new things you need to consider :
surfaceHeight
This is the y position of the floor. You need to make sure none of your objects go underneath this or it’ll look weird!
setReflectionColor()
This function adjusts the color transform for the reflection by settings mutlipliers and offsets for red, green and blue, just like the colorTransform property of MovieClips.
By default this is set to darken the reflection but you can use it to lighten or even colorise it.
It’s very alpha, but very simple and very quick!
You can also add blur to the reflection by adding a filter to the reflection viewport :
viewportReflection.filters = [new BlurFilter(4,4,1)];
And if you want it to actually be transparent (if you’re using a floor plane for example) you can also add a ColorMatrixFilter to the viewportReflection filters.
I’m looking at improved effects to this with Andy’s help but I thought I’d at least get a basic version out there for you to play with.
Basic cube source code here :
package { import flash.events.Event; import org.papervision3d.cameras.Camera3D; import org.papervision3d.core.effects.view.ReflectionView; import org.papervision3d.materials.ColorMaterial; import org.papervision3d.materials.utils.MaterialsList; import org.papervision3d.objects.primitives.Cube; [SWF (width="640", height="480", backgroundColor="0x000000", frameRate="30")] public class ReflectionCubeSimple extends ReflectionView { private var cube : Cube; public function ReflectionCubeSimple() { super(640,480,false, false); //the height of the reflection plane surfaceHeight = -100; initCube(); camera.z = -400; addEventListener(Event.ENTER_FRAME, enterFrame); } public function initCube() : void { // create a materials list for the cube. var ml : MaterialsList = new MaterialsList(); ml.addMaterial(new ColorMaterial(0x880000), "all"); ml.addMaterial(new ColorMaterial(0x660000),"right"); ml.addMaterial(new ColorMaterial(0x440000),"bottom"); ml.addMaterial(new ColorMaterial(0xdd0000),"top"); ml.addMaterial(new ColorMaterial(0xdd0000),"left"); cube = new Cube(ml,100,100,100); // add the cube to the scene scene.addChild(cube); } public function enterFrame(e:Event) : void { // rotate the cube dependent on the mouse position cube.yaw((320-mouseX)*0.05); cube.y=(120-(mouseY/2)); if(cube.y<0) cube.y = 0; singleRender(); } } }
(Cue about a million CoverFlow type effects… 
)
Related posts:
Hi Vicente,
I’m sorry to hear that! Is your example using ReflectionView? Can I see the code? We just did some optimisations to interactivity.
http://www.nabble.com/LATEST-COMMIT-%3A-Interactivity-Optimisations-td18896154.html
Seb
Yes, I’m using reflection view, actually, I overload reflection view and “singleRender” function, which dos NOT call super; the reason is that I need to render things in a particular order ( I have a transparent floor and a landscape that are tricky to render ), so it’s just a series of renderer.renderScene. I also use ViewportLayers, so the whole thing is quite complex.
Currently the InteractiveSceneManager doesn’t work very well with multiple viewports. This is an ISM issue, not a ReflectionView issue. The interactivity seems to only work on the last viewport you render. We will look into this but in the meantime just experiment with the order that you render things.
Cheers!
Seb
Ok, I managed to make it work with the latest changes on PV3D. To make it work, I had to remove my own SingleRender… I lost a bit of the functionality, but nothing I can’t live with. Forgot to mention that I was also adding an extra viewport to the stage’s child list; I needed this one to render the landscape. ReflectionView renders everything two times, but I my scene, I needed to render the floor and the lanscape only once, so I created that extra viewport just for these.
hey this is a very cool feature, but how can i use your code in the FLA? i dont wanna user external .AS file. i´ve tried myself to do this, but i suck:(
please help….
Great Work but at revision 702 i can´t see any reflection by now.(I was using your democode) Your still working to get it runnng again?
Hi tm2003,
just to confirm this code is working in the latest revision. So you must be doing something else wrong
Seb
Hi seb,
you are definetly right. I compiled your code with FlashDevelop3, and didn´t check if there are diference between playing the swf directly in FD3 or with the Flash -Player. Now it works fine and stable! Great Work, great support! I´m a new fan of your stuff
Greetings,
tm2003
hi there, i ve been trying to use this incredible class and i had some trouble since i changed the z position of an object. check this out
http://tiscar.fr/perso/reflectionTest/Main.html
i guess you re aware of this bug and since i am really not good at math… i just can tell about it
thank you for the job your doing on papervision, it is defenitly marvelous!
Hi gropapa,
Your example looks fine to me! What problem are you having?
Seb
Hey Seb, thanks for the info. I’ve been trying to get the reflection to fade out into the floor. Kind of like an alpha gradient? Do you have any creative idea on how to do this off the top of your head?
Pingback: Papervision3D演出サンプルNo.01:羽ばたく蝶々 | ClockMaker Blog
that’s really nice ..but i was wondering why if i put a clip underneath the reflektion disappears…i just wanted to put a gradient but i cant ..how to blur just the reflektions btw?
Thanks
Hi Seb
Any updates on this topic?
I’ve checked out the latest papervision revision and started using your ReflectionView, it’s a really great class. Would have saved me a lot of headaches on a previous project.
The particular topics I’m interested about is the possibility to create a falloff, apply effects to only the reflection (like a blur).
Hi guys,
I can see you’re all after creating a kind of drop off effect, there are a few ways we could approach this, but none of them are very easy
I expect it’d take some work on the renderer.
Bart, it’s easy to add a blur to the whole reflection, there’s a separate viewport in the ReflectionView class that you can apply effects to. From memory the viewport is called reflectionViewport, and you can set the filters like this :
reflectionViewport.filters = [new BlurFilter(4,4,1)];
Don’t forget that the blur filter is optimised for values that are exponents of 2, ie, 2, 4, 8, 16, 32 etc.
cheers!
Seb
Hi Seb,
I’m trying to extend the ReflectionView class but I’m getting this continuous error:
ERROR: lookAt error
What can be the reason?
Thanks
Hi Seb,
is it possible to avoid reflection on some displayObject3D while others do have reflection?
Thanks!
Hey, I’ve been checking out your blog, as well as over 400 other blogs over the past week (since I started my portfolio project at school) and have finally come up with some of your tutorials, other tuts, and put them together. Right now, here’s the demo of what I have:
http://www.geocities.com/bombermangraal/CubeTest.swf
As far as I know, I have a script to make the cube face the camera when a side is clicked, but don’t have one where you click outside of the cube and it goes back to its spinning self.
If it’s too much, then could you possibly give me tips on limiting the speed at which the cube spins via x, y, z?
haha silly me, I just read your code and used that to slow down my cube, thanks anyway!
sincerely,
Jim
Hi Seb,
great work! I just started using pv3dGW some days ago and while i definitely think that it is great in some way, it seems to be still a little raw in many areas – hopefully i can help in one way or the other in the upcoming christmas holidays.
That being said, I haven’t succeeded in using your ReflectionView as it just doesn’t display anthing. I also still haven’t found a good way to debug the issue, as pv3d gets a bit ugly when it comes to following inheritances – thank god it doesn’t seem to make much use of polymorphism.
I’m not sure if I could send you my code, because it gets its data from a server of our client, which i think i shouldn’t hand out to anyone.
Still i got some leads which I think you could maybe comment on:
1. I’m using Plane’s for everything, so i got no solid objects
2. The viewport is not set to scale with the stage, I instead scale it manually (which leads to another oddity, as culling seems to only work correct for the portion of the viewport in a quadratic area)
3. my surfaceheight is -1120 and my camera is set up with z=-1000, fov=60, near=10, far=5000, x=0, y=0 with the main display object being 1120 units in height and some thousand units in width
Got any ideas?
P.S. I could probably strip out those url’s which would leave my code not working because of no data, as that is being loaded from an external xml file.
@Joe
I think your plane is outside of your camera’s field of view.
@Jim
Thx for your answer -
How would i test for that? My normal viewport / planes just show up fine, and I already tried different heights for the surfaceheight, negative as well as positive, to no avail.
Hi Seb,
Using your example, but change the cube rotation with a camera movement (targeted to center) based on mouse position.
And there’s a bad effect, the second cube (in second viewport) seems to be late.
So i’ve made a little change for fixe it , just put your line super.singleRender(); as the first line of yours singleRenderer function in ReflectionView.
Thanks for your works.
Cheers
Hy everyone,
just found out, what was making the reflection not show up:
setChildIndex(viewportReflection,0);
I have a background image in my flash movie which covers the whole available space, so the reflection was in fact behind it. I’d suggest to change this part to swapping the index instead of plainly setting it to 0.
Merry Xmas
Next problem:
When i tilt the camera around the Y axis (i always confuse the words tilt / yaw / pitch so forgive me if I do it this time as well…) the reflection does not rotate the same way and it always seems to look at the camera, like a bilboard reflection…
Am i doing something wrong or is reflectionview not yet cut out for doing such reflections? Also, about a drop off: How would it be possible with the way reflectionview works at the moment? If i’d just overlay the viewport with a gradient mask it would not change with the rotation…
Any idea on one of those two problems?
Any update on the interactivity issues and reflection “lags”?
If I leave everything as is, I get interactivity when using reflectionview. However, if I orbit or move the camera, the reflection seems to be lagging.
If I move the line:
super.singleRender();
to the top of the singleRender() override function (ReflectionView.as) it seems to solve the reflection lag issue, but then interactivity goes mad. Kind of like if the “hot areas” are offset vertically.
I’ve been struggling with reflections for some time. Then the Merry Christmas post came out, and i noticed it used ReflectionView! Thanks so much!
I’m trying to figure out how to put a Plane down as the surface/ground. I first tried setting the y value of the plane below the surfaceHeight value, that didn’t work.
I saw your reply about using viewportReflection’s viewportObjectFilter, but i tried (try…catch) accessing it but it is null… maybe i need to research more…
I was then looking at the comment, and code: setChildIndex(viewportReflection,0) and was thinking that if the reflection is at childIndex of 0 and the normal viewport is above that, using myView.scene.addChild() will always put my plane above the reflection.
I’m sure im missing something, but it almost seems like i need a third viewport, below the reflection, if i want to simulate the reflection being “cast” or “above” my ground plane.
Let me know if you want code or if you can point me in the right direction.
Any help would be greatly appreciated! Thanks in advance!
Oh, also, i remember a talk you gave on particles back at FlashForward in Austin TX. I was blown away with your easy explanations and LOVED the plug-in media page, so much fun to playwith. Thanks for sharing with us flash mortals!
I’ve also been struggling with the reflections during the past days. When I move the camera the reflection does not sync properly.
Is this a known issue, seb?
For jason : just put the line super.singleRender(); as the first line of your singleRenderer function in ReflectionView. it works fine for me !
Fidiman: Yeah… I tried that before and it solves the reflection problem. However, if I do it, the mouse events go crazy for some reason (same problem as Paul). I’ve got some planes with mouse events and it seems as if the “hitareas” are above them
Chech if you’re set the ReflectionView as interactive or not when you call the super method
super(800,600,false, true);
the last parameter is to set the flag for interactivty..
Has ANYONE been able to get a Plane or any other do3d below/underneath the reflection/viewportReflection?
OK, i figured out a way to get an object (ground-plane) to appear below the reflection. And yes, I took Seb’s advice to use ViewportObjectFilter (see comment 59, above).
1. add a third viewport – viewportGround.
2. rearrange the viewports using setChildIndex(), placing viewportGround at zero
3. add another ‘render.renderScene()’ line to the singleRenderer() method
4. remove the ground-plane from both viewport and viewportReflection
5. remove all objects except the ground-plane from the viewportGround.
My earlier attempts at using ViewportObjectFilter were just improper usage/syntax.
Here’s a sample of what worked (to remove plane from viewportReflection):
viewportReflection.viewportObjectFilter = new ViewportObjectFilter(ViewportObjectFilterMode.EXCLUSIVE);
viewportReflection.viewportObjectFilter.addObject(plane);
On to the next feature/bug on my list…
Hi guys,
sorry I haven’t responded, I’m only just catching up with all this stuff.
The “lag” should be fixed now, so please test it and let me know how it works for you. Moving the singleRender function will cause problems with interactivity -from memory, interactivity only works on the last viewport rendered.
@darren_db glad you got that sorted, it sounds like a good solution.
Hey. This is working really good
, just what i was looking for too.
I have been trying to make the reflection taper of so that it is stronger in the beginning and then fades of. Should this be done with a ColorMatrixFilter? Anyone got an example of this?
This is really great, but doesnt work with renderlayers atm it seems :S
Hi Christian,
take a look at the ReflectionView class, it just makes a new viewport and renders a moved camera into that. I’m not sure what would happen with RenderLayers, but I can’t imagine that it’ll work
Maybe I’ll take a look when I get a chance, but I can’t imagine it’d be an easy update.
cheers!
Seb
Seems to work well with renderlayers except that the reflections graphics are never cleared. So every frame it adds more and more reflections.
Hi Seb,
First of all, thanks for all the hard work. This class is awesome!
Maybe you can also help me in my problem. I used this Reflection class, worked great so far but when i added filters on the vieport elements like blur, the reflectionViewport doesnt seem to get the same display.
Still looking for answers around other forums though. But hope you can shed some light into this.
Thanks!
Pingback: PV3D ReflectionView | eternity design BLOG