I have two points that describe line, problem is that i know coordinates of one for orthographic matrix (ie 150x250x0), and coordinates for second for perspective matrix (0.5x0.5x20.0f). I would like to translate orthographic coordinates to perspective so i can draw a line using glsl shader :). How to accomplish this task?
You need to move one of your vertices to other matrix space. For example let's move 150x250x0 from orthographic to perspective space. To do this you need to transform your vertex by inverted orthographic matrix. I don't know what math library you use, maybe it already has function for matrix inversion. Otherwise use code from this link: http://www.gamedev.net/topic/180189-matrix-inverse/ . After this step your vertex is in world space.
PS: Matrix inversion takes some significant time for calculations. If you can track trasformations steps (translation, rotation and scale) the easier way should be to invert these steps separately and compose a matrix after that.
Related
Apologies in advance for my feeble maths.
I'm trying to be able to find the corners of a plane in space based on the equation of that plane. Here's what I know. I know three points on the plane and I know where they fall in the 2d coordinate space of the plane (x,y) and where they are in 3d space. I know the width and height of the plane and I can now calculate the equation of the plane. The plane sits on the inside of a large sphere that surrounds the origin so, in theory, it should more or less face where the camera is (though in my diagram it doesn't face the origin as it's just for illustrative purposes)
But it's not clear to me how I can use that to figure out another point. One thought I had was to find the transform that moves the plane parallel to the xy axis and rotate it round one of the points (so it stays in the same place), find the position of the new point, and then rotate it by the inverse of that transform. But it's not clear to me how I would find that transform matrix or how to use it. Could I do this using the normal and vector maths? I understand what normals are, but I'm fuzzy about how to use them.
Is there any simple algorithm like Voronoi diagram to divide any rectangular plane to triangles, eventually, using # of pre-defined points.
To be honest, I have to write a very simple fragment shader like this.
Theoretically, this Voronoii shader could be 'upgraded' by Delaunay triangulation
but wanna find the more elegant solution.
The first thing that comes to my mind is to create n random points (with specific seed) to fill a cylinder volume. The triangle points will be intersection of lines between those points and plane going through the axis of cylinder. The animation would be simply done by rotating the plane ...
I see it something like this:
So the neighboring points should be interconnected with each other. Forming tetrahedrons that fills the volume of the cylinder. So create uniform tetrahedron grid and add random noise to the points position (with specific seed).
This whole task is very similar to rendering cross section of 4D mesh see:
4D rendering techniques
As the 4D simplex is also tetrahedron. The only diference is you are in 3D and cutting by 3D plane.
You can reverse-engineer this example shadertoy.com/view/MdfBzl
like I did. Thanks to mattz.
With a camera inside a cylinder I capture a image. I want to transform that image into a plane 2d. The image inside the cylinder have a lot of dots which forms a grid.
What I tried to do was estimating the transformation. With blob analysis I can detect the center of each point and obtain the coordinates in pixels. I save this in matrix called ImCilynder. After that i create a matrix with coordinates of that points in the plane with the name Im2d.
I calculate the transformation (H) solving the equation:
Imcilynder * H= Im2d;
H= matrix [9x1]
H=pinv(Imcilynder) * Im2d
But, when i'm doing the test with the same points, the result is completely random, so i'm doing something wrong.
Is there a better way to solve this? Can you help me?
Explaining better,
I'm trying to find the transformation which transforms the image above to this image:
So, to clarify, I want the projection of the points which i see in the first image to a plane. Basically i want o unwrap the cylinder.
After the calculation of the transformation matrix. I'm expecting to multiply the first image with the transformation matrix and obtain the points in the plane. Or to multiply the coordinates of the center of the black dots and obtain the coordinates of that dots in the plane. Is this possibly?
Thank you very much,
Afonso
Well, what do yo wish to have in a plane? the circles forming a grid? Because if this is the case you need to remove the radial distortion, these kind of models are represented by some parameters, are non-linear by the way. May be if you can find a very good algorithm, you are going to obtain something like this:
If this is not your idea, you need to apply an elastic transformation and this kind of transformation needs to use a kind of grid that is the model of the transformation and you need to propose your model of grid. If you want to do this automatically you need to resort to elastic registration algorithms and you can use a model like this one:
Any ways, this is not a trivial task, there are a lot of research about complex transformations of course if you want to automatically obtain the transformation. Otherwise you can use photoshop ;).
A really have no a problem(app is running), what I want is you help me understanding this
The problem
Pick from isometric tiles
Conditions
Use transformation matrices
Reference
Reference tutorial
My understanding problem(lol)
I don't understand in the final part
touch.mul(invIsotransform);
Why the inverted matrix?
That tutorial describes the math for a transform that converts a point in Cartesian coordinates to a point in isometric coordinates. But when you touch the screen that is visually in isometric coordinates, you want to convert it back to Cartesian coordinates to easily pick the correct tile. Inverting the matrix produces a new matrix that does the opposite transformation of going from isometric to Cartesian.
I'm creating a 3D globe with a map on it which is supposed to unravel and fill the screen after a few seconds.
I've managed to create the globe using three.js and webGL, but I'm having trouble finding any information on being able to animate a shape change. Can anyone provide any help? Is it even possible?
(Abstract Algorithm's and Kevin Reid's answers are good, and only one thing is missing: some actual Three.js code.)
You basically need to calculate where each point of the original sphere will be mapped to after it flattens out into a plane. This data is an attribute of the shader: a piece of data attached to each vertex that differs from vertex to vertex of the geometry. Then, to animate the transition from the original position to the end position, in your animation loop you will need to update the amount of time that has passed. This data is a uniform of the shader: a piece of data that remains constant for all vertices during each frame of the animation, but may change from one frame to the next. Finally, there exists a convenient function called "mix" that will linearly interpolate between the original position and the end/goal position of each vertex.
I've written two examples for you: the first just "flattens" a sphere, sending the point (x,y,z) to the point (x,0,z).
http://stemkoski.github.io/Three.js/Shader-Attributes.html
The second example follows Abstract Algorithm's suggestion in the comments: "unwrapping the sphere's vertices back on plane surface, like inverse sphere UV mapping." In this example, we can easily calculate the ending position from the UV coordinates, and so we actually don't need attributes in this case.
http://stemkoski.github.io/Three.js/Sphere-Unwrapping.html
Hope this helps!
In 3D, anything and everything is possible. ;)
Your sphere geometry has it's own vertices, and basically you just need to animate their position, so after animation they are all sitting on one planar surface.
Try creating sphere and plane geometry, with same number of vertices, and animating sphere's vertices with interpolated values of sphere's and plane's original values. That way, on the start you would have sphere shape and in the end, plane shape.
Hope this helps, tell me if you need more directives how to do it.
myGlobe.geometry.vertices[index].position = something_calculated;
// myGlobe is instance of THREE.Mesh and something_calculated would be THREE.Vector3 instance that you can calculate in some manner (sphere-plane interpolation over time)
(Abstract Algorithm's answer is good, but I think one thing needs improvement: namely using vertex shaders.)
You make a set of vertices textured with the map image. Then, design a calculation for interpolating between the sphere shape and the flat shape. It doesn't have to be linear interpolation — for example, one way that might be good is to put the map on a small portion of an sphere of increasing radius until it looks flat (getting it all the way will be tricky).
Then, write that calculation in your vertex shader. The position of each vertex can be computed entirely from the texture coordinates (since that determines where-on-the-map the vertex goes and implies its position) and a uniform variable containing a time value.
Using the vertex shader will be much more efficient than recomputing and re-uploading the coordinates using JavaScript, allowing perfectly smooth animation with plenty of spare resources to do other things as well.
Unfortunately, I'm not familiar enough with Three.js to describe how to do this in detail, but all of the above is straightforward in basic WebGL and should be possible in any decent framework.