I'm trying to have a better render on my scene. So I added directional and ambiant lights. So Shadows are generated. Here's the
Result
I wonder if there is a way to have softer shadows.
The model has been created with Sweet Home : http://www.sweethome3d.com/
On the scene element, you could try to change the default type of the shadows:
<a-scene shadow="type: pcfsoft">
https://aframe.io/docs/0.8.0/components/shadow.html#scene_properties_type
Also worth experimenting with the properties on the light itself:
Adjust the shadow camera position and frustum (shadowCameraTop, shadowCameraRight, …) of the directional light, until it envelops the scene tightly. If the frustum is too small, shadows will be missing or partially clipped. If the frustum is too large, shadows will appear coarse or pixelated
https://aframe.io/docs/0.8.0/components/light.html#adding-real-time-shadows
https://aframe.io/docs/0.8.0/components/light.html#configuring-shadows
Turn up the ambient light to change the shadow color.
Play with light.shadowRadius property (currently master branch of A-Frame). And decrease shadow map resolution.
<a-scene shadow="type: pcfsoft">
Related
My goal is to bring in an image on to part of the canvas, then scale it, move/translate it, and optionally skew it, also rotate and make alpha changes, kind of the primary "2d image manipulations", in an animated form, which is: do little changes over time from the starting state to the target end state.
Well, I figured to be efficient, I should use the canvas/2d context transform, https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform -- as it does the first 3: scale, move/translate, and skew, "all in one." I did half that code, and now I'm looking at examples and seeking to debug it. All the examples I see, are do 1) some transform, away from the "unity transform":
{ a:1, b:0, c: 0, d:1, e:0, f:0 }; // this basic transform does nothing
and then 2) draw into that. But that's the opposite order from what I want: which is draw on the canvas (the image), and then do an animation over time using the above primary changes (scale, translate, skew, rotate, and alpha). My question is: does it only "work this way", meaning I must setup the (single) transformation on the page first, and then "draw into that?"
I hope not ... that won't give me what I want, and I have to "ditch it", and go to 5 individual "transformations." Comments?
Yes that only works this way, canvas transforms and compositing mode and filters and lineWidth and fillStyle etc. properties are only applied to the next drawing operations.
The canvas itself only holds pixels information, it has no concept of drawn object. Your js code has to do this part.
So for what you wish, you can simply redraw everything every time:
reset the transform so we can clear ctx.setTransform(1,0,0,1,0,0);
Clear the canvas ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height)
Set the transform to your new matrix ctx.translate(x,y); ctx.scale(s)...
Draw your transformed graphics ctx.fill(); ctx.drawImage(...
Wait next frame to do it again requestAnimationFrame(update)
Code:
Color color = new Color(1f,1f,1f,0.9f);
DirectionalLight directionalLight = new DirectionalLight(rayHandler,200,color,-90f);
directionalLight.setSoftnessLength(0);
Result:
When light falls directly from above, why it is not casting shadows from boxes?
This could be caused by a few things. Some things to check:
Check if your RayHandler is set to blur. Blurring with small objects can hide shadows.
Check the Shadows are enabled in the ray handler.
Check the ambient light is off or lower than the directional light. If ambient light is too high it may hide shadows.
Check your objects are larger than 0.1f as this is the smallest distance box2dlights works with
Check the light is not set to x-ray
check softness length. lights with high softness will have their light bleed through small objects.
I have a simple animation set up - A background I have painted in P/Shop and a Sheep.
The sheep is an animated movie clip - whose head turns and body moves.
What I need to happen is that when the sheep walks under a tree - he is in complete shadow - until he walks out from under the tree.
So far I managed to put the sheep under a shadow layer.. mask the shadow and use a rectangle which is aprox sheep size - it then moves along a tween teh same as the sheep.. It is quite clunky though and will take a fair amount of work reshape the mask shape each time to cover the exact sheep.. even then I won't be able to follow the animation exactly.
So, is there a way to have the animated sheep be a movie clip and a mask - so that he goes into full shadow everytime he passes under a tree.
Or is there another way to achieve this? Thx
The problem is cacheAsBitmap property,
you must assign maskclip and your maskedclip property to cacheAsBitmap = true
For example:
maskmc.cacheAsBitmap = true;
myMaskedClip.cacheAsBitmap = true;
myMaskedClip.mask = maskmc;
I added sample fla file that you can check it here : FLA
Can you put your sheep on a layer in between the shadow and the background? Probably not because you want the sheep in front of the tree -
Maybe you need to put a shadow element inside the sheep movie clip, and use a script to fade it in or out depending on hit test with the tree.
You could add a duplicate copy of the sheep to be used as a mask, although a shadow would probably need softer edges than this kind of mask will give you.
I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.
I have a bit problem with rotationX and rotationY.
It's cool if i just do a roationX and rotaionY below
_eventParent.rotationY =_differentX;
_eventParent.rotationX =_differentY;
However once i have assign a mouse move to the _eventParent. The roationX and roationY change perspectively while the mouse is moving. so instead the item remain the same size. it increase and decrease size prospectively. any idea why is it doing this? is there a possibility to stop this behavior?
Thanks
Please find the image below.
Perspective allows part of your shape to look closer to you than other parts. The problem is that perspective has a center, or "vanishing point" and by default, it is fixed. As you move your shape farther away from the vanishing point, the perspective changes, causing your shape to widen or narrow.
You can fix this by updating the vanishing point so that it is always at the same coordinates as your shape. Since the shape will always be at the vanishing point, the perspective shouldn't change.
To do this, create a perspectiveProjection for your shape:
_eventParent.transform.perspectiveProjection = new PerspectiveProjection();
PerspectiveProjection is located in the flash.geom package, so don't forget to import it.
Then whenever you update your shape's position, update it's vanishing point:
_eventParent.transform.perspectiveProjection.projectionCenter =
new Point(_eventParent.x, _eventParent.y);
You might need to offset the vanishing point by a set number of pixels to get the perspective looking the way you want it to.
Correct me if I misunderstood your question. Your question is that if you apply rotation to the movieClip object, then why does the size appear to be changing?
For simplification, Let's not apply rotation on both X and Y axis. Let's take a rectangular movie clip and onMouseMove we do ++myMovieClip.rotationX;
Now, this statement is going to apply rotation on the object about the X-axis and one would get a perspective of the movie clip flipping across X -axis and this flipping will show as change in size of the object.
The same applies to rotating across y-axis.