Cocos2d - lunar eclipse effect on iPhone - ios

i have a question about achieving an effect like on a lunar eclipse. The effect should look like in the first seconds of this gif. So just like a black shadow which goes over the circle. The ideal situation would be a function where i can passed a parameter in percentage to get this amount as a shadow on the circle:
The problem which i am facing is that my background is an gradient. So it's not possible to have a black circle which moves over the moon to get the effect.
I tried something with CCClippingNode but it looks not nice. Furthermore the clip on the edges was always a bit pixelated.
I thought about using something like a GLSL Shader to achieve the effect but i am not so familiar with GLSL and i can't find an example.
The effect is for an app game developed for an iphone. I use the cocos2d framework in version 3 (the current one).
Has somebody an idea how to get this effect? An idea where i can start to search?
Thank you in advance

The physics behind is simple you change the light shining on the moon. So
I would create a 1D gradient texture representing the lighting conditions
compute each rendered pixel of moon
you obviously have the 2D texture of moon. So you now need to obtain the position of each pixel inside the 1D lighting texture. So if moon is fully visible you are in sunlight. When partially eclipsed then you are in the umbra region. And finaly while total eclipse you are in penumbra region. so just compute the middle point's of the moon position. And for the rest use relative position in the moons motion direction.
So now just multiply the Moon surface with the lighting texture and render the output.
when working you can add the curvature correction
Now you got linerly cutted Moon phases but the real phases are curved as the lighting conditions differs also with radial distance from motion direction and moons center. To fix this you can do
convert the lighting to 2D texture
or shift the texture coordinate by some curvature dependent on the radial distance

Related

Delphi fillpath

So first some background. Im developing a really simple 2D game, in Delphi 10.3, FMX, which at the bottom of the screen draws a random terrain for each level of the game.
Anyway, the terrain is just some random numbers which are used in Tpathdata and then i use fillpath to draw this 2d "terrain".
I want to check when a "falling" object, a trect for example, intersects with this terrain.
My idea was to get all the points of the tpathdata, every Y position of every X position of the screen width. This way i could easily check when an object intersects with the terrain.
I just cannout figure the way how to do it, or if anyone has any other solution. Id really appreciate any help. Thanks
This is not really a Delphi problem but a math problem.
You should have a math representation of your terrain. The polygon representing the boundary of the terrain. Then you need to use the math to know if a point is inside the polygon. See Wikipedia.
You may also implement it purely graphically using a B/W bitmap of the same resolution of the screen. You set the entire bitmap as white and draw the terrain on the bottom in white. Then checking the color of a pixel in that bitmap you'll know if it is outside of the terrain (black) or inside the terrain (white).

Directx shadow mapping

I have successfully implemented shadow maps in my engine but the problem is the shadow map doesn't cover the whole scene. If I make the shadowmap large shadow quality will drop. So I'm trying make my shadows move with camera. I can do this if I can calculate the 8 world space positions of camera frustum vertices.
So how can I calculate world space positions of camera frustum vertices ? I'm working with Directx if it changes the way how it's calculated.
Thanks.
The frustum (near plane, far plane, fov) is in view space so multiplying it with an inverse view matrix will move it into world space. If you use DirectXMath (which I recommend) you can utilize the bounding frustum object. An example code might look something like this:
DirectX::BoundingFrustum frustum;
DirectX::BoundingFrustum::CreateFromMatrix(frustum, camera.getProjectionMatrix());
DirectX::XMMATRIX inverseViewMatrix = DirectX::XMMatrixInverse(nullptr, camera.getViewMatrix());
frustum.Transform(frustum, inverseViewMatrix);
BoundingFrustum docs: https://msdn.microsoft.com/en-us/library/windows/desktop/microsoft.directx_sdk.directxmath.boundingfrustum(v=vs.85).aspx
If your frustum is big and you have to view a large area (e.g. outdoor scene) then even a large moving shadow map might not be enough (or it takes a huge amount of memory). One technique to solve this is called cascaded shadow maps (CSM). In CSM more precise shadow maps are rendered close to the camera and less precise shadows are rendered in the distance where the low quality is not visible anyway. Here is a CSM tutorial in case you are interested: https://msdn.microsoft.com/en-us/library/windows/desktop/ee416307(v=vs.85).aspx

Defining a 3D scene from a photo of a circle

Given a photo containing a circle, for example this photo of a fountain:
is it possible to define the 3D position and rotation of the fountain in relation to the camera?
I realise we have to define the scale, so lets say the fountain is 2m wide (the diameter of the circle consisting of the inner rim of the fountain is 2m).
So assuming the circle is a perfect circle, and defining the diameter to 2m, is it possible to determine how the circle and the camera relate spatially? I dont know any camera matrix or anything, the only information i have is the picture.
I specifically want to determine the 3D coordinates of a given pixel on the rim of the fountain.
What would be the math and/or OpenCV code to do this?
Circle with perspective is an ellipse. So you basicly you need an ellipse detector.
This algorithm should work:
Detect all ellipses in the given image.
Filter ellipses that you think they are not a circles in origin. (This is not possible using just 1 Camera so you have to depend on previous knowledge. Something like that you knows that you are taking a photo for a circle).
mmm I stopped typing here and bring a paper&pen and started figuring how to estimate the Homography and it is not that easy! you should deal with the circle a special case of an ellipse and then try to construct a linear system of equations. However, I made quick googling :
https://www.researchgate.net/publication/265212988_Homography_estimation_using_one_ellipse_correspondence_and_minimal_additional_information
http://www.macs.hw.ac.uk/bmvc2006/papers/306.pdf
Seems very interesting topic, I am going to spare sometimes on it later!

Draw line between two points (x1,y1,z1) to (x2,y2,z2)

I know how to draw line on 2d surface.But I can't find a way to draw a line in space.
I have wrote a demo
and now I want to draw line in space.
and finish it like this:
I have finished the 2d surface rotate in space use CATransform3D already. But I don't know how to draw line in space.
Thanks a lot.
Normal drawing on iOS is 2D. Core Animation is "2.5D", where it can draw flat images with fake 3D perspective. It doesn't let you "draw in space."
If you want real 3D perspective drawing you should use OpenGL, SceneKit, Metal, or some other 3D API.
Your trying to draw a 3d image on a 2d surface. Therefore you need some sort of mapping
https://en.m.wikipedia.org/wiki/3D_projection
Has some options for you. Orthographic projection is probably what you want though
https://upload.wikimedia.org/math/8/3/a/83a402b37056afa1dd4c8d706a9a2d75.png
Is the equation you would want to use where s is a scaling factor and c is an offset

How to place a texture at the pole of a sphere?

Even with high resolution textures (4k*2k) of Earth the mapping of the poles is distorted. Is it possible to place a square texture with the middle directly at the poles of a sphere with THREE.js and rotate accordingly?
Example map: http://rapidfire.sci.gsfc.nasa.gov/imagery/subsets/?mosaic=Arctic.2012154.terra.4km.jpg
Sorry, no code, looking for a starting point.
Maybe you should 'correct' your rectangular texture to avoid the distortion on the poles.
This link might be of help for that: http://local.wasp.uwa.edu.au/~pbourke/texture_colour/texturemap/
In Cesium, a WebGL globe & map engine, we fixed the poles by creating a screen-space quad over where each pole will be, and using a shader to render the pole correctly. The code is in this pull request. We don't yet offer inlay high-res images, but that's coming.

Resources