Ideas, Making a graphical grid look like ISO view

[James McGill]

Hi, hope my question is not too abstract.

I'm drawing a square grid and I have mouse events that return
coordinates of that grid. Now I'd like to make that grid look like an
iso view. Illusion of 3D, seen from an oblique angle, as is typical in
conquest and exploration games.

Affine transform shear takes me close, but I think it's not going to get
me all the way. I think the problem is, I don't really want the
vertical lines to stay parallel, because that makes it look like the
"far end" is fatter, instead of converging to some vanishing point (The
squares in the grid should end up being trapezoidal, I think).

So two problems, 1., how to draw my grid in rectangular coords but have
it look like an iso view, and 2., how to translate the Point from the
mouse event, into the coordinates of my grid.

If Affine transform is still the way to go, I can keep studying it.
Right now I'm thinking I may actually need to work out the geometry of
the iso view, draw it explicitly, and then find the mouse coordinates by
iterating through the boundaries of my graph. This is nasty, since
AffineTransforms would make it so easy.

Maybe there's a better way I'm not thinking of, such as, instead of
bounding my grid by "lines", construct it from "shapes", and then I
could add a listener to each shape, or something like that. That sounds
treacherous too.

 

[Oliver Wong]

Hi, hope my question is not too abstract.

I'm drawing a square grid and I have mouse events that return
coordinates of that grid. Now I'd like to make that grid look like an
iso view. Illusion of 3D, seen from an oblique angle, as is typical in
conquest and exploration games.

Affine transform shear takes me close, but I think it's not going to get
me all the way. I think the problem is, I don't really want the
vertical lines to stay parallel, because that makes it look like the
"far end" is fatter, instead of converging to some vanishing point (The
squares in the grid should end up being trapezoidal, I think).

By definition, an isometric view will have the "vertical lines" stay
parallel. The effect is not too bad if the "camera" is relatively close to
the ground, or if you never see objects that are too distant. SimCity 3000
uses an isometric view, for example, and doesn't "look wrong". SimCity 3K
actually used th isometric view to allow them to bump up the graphical
complexity of their engine. Normally, when you pan the camera in a 3D
environment, you have to re-render, because the parallax effect will cause
you to be able to see parts of the building which were previously invisible
to you. With an isometric view, you're always looking at a building from the
same angle, so they did not need to re-render the view, but rather could
just scroll the view (basically copying and pasting what was already
rendered), and draw the missing region along the edges.

If you want things far away to appear smaller, then you'll probably have
to do "actual 3D" rather than "illusion of 3D".

- Oliver

 

[James McGill]

By definition, an isometric view will have the "vertical lines"
stay
parallel. The effect is not too bad if the "camera" is relatively
close to
the ground, or if you never see objects that are too distant.

Thanks Oliver. I guess I just need to work around it so the illusion
looks right.

 

[Owen Jacobson]

Thanks Oliver. I guess I just need to work around it so the illusion
looks right.

The transform normally used to turn a grid into an isometric perspective
isn't shearing, which may be your problem. It's actually rotate by (pi /
2), then compress vertically.

 

[James McGill]

It's actually rotate by (pi /
2), then compress vertically.

Ah... ok. I can deal with the rotation, and the corresponding mouse
translation. May I be so bold as to ask for a hint on the vertical
aspect?

 

[James McGill]

The transform normally used to turn a grid into an isometric perspective
isn't shearing, which may be your problem. It's actually rotate by (pi /
2), then compress vertically.

Thank you Owen, the illusion is good. Although pi/4 is more like it,
but that's the right idea.

 

[Chris Uppal]

If Affine transform is still the way to go, I can keep studying it.
Right now I'm thinking I may actually need to work out the geometry of
the iso view, draw it explicitly, and then find the mouse coordinates by
iterating through the boundaries of my graph. This is nasty, since
AffineTransforms would make it so easy.

If you can even /consider/ using the word "easy" in the same sentence as
"Affine Transform", then you will have no difficulty at all in working out the
geometry -- it's /much/ easier than messing around with arrays and
transformation.

Consider the object in 3d. Draw rays from each vertex to the observer's eye
(an idealised point). Place a flat sheet at the position of the hypothetical
paper. Calculate the points where each ray punctures the sheet. Lines which
are straight in the 3d world will map onto straight lines on the sheet. Draw
them.

For all I know, that might be expressible as a single affine transform (the
fact that it maps straight lines to straight lines suggests that it is -- but
it's a map from 3d to 2d). But I have no idea at all what that transform would
be.

-- chris

 

[Thomas Weidenfeller]

Hi, hope my question is not too abstract.

Let's sort a few things out.

I'm drawing a square grid and I have mouse events that return
coordinates of that grid. Now I'd like to make that grid look like an
iso view. Illusion of 3D, seen from an oblique angle, as is typical in
conquest and exploration games.

So you have a function in 3D space f(x,y) = y? And you want to have an
isometric projection of that function?

I don't really want the
vertical lines to stay parallel, because that makes it look like the
"far end" is fatter, instead of converging to some vanishing point (The
squares in the grid should end up being trapezoidal, I think).

Then it is no longer an isometric projection at all. So what do you
want? An isometric projection or not?

So two problems, 1., how to draw my grid in rectangular coords but have
it look like an iso view,

If you really want an isometric projection, then

a) rotate the coordinate system in 3D space (x,y,z) -> (x',y',z') so
that the axis projection satisfies the isometric projection properties
(projected axis are at 120deg to each other).

b) drop one dimension (z') to go from 3D to 2D.

c) Scale and translate the result so it fits into your window (this is
something you can do with Java2D's build-in AffineTransform)

And since the result might look ugly, have a look at hidden-line removal
algorithms to draw your grid as kind of a surface.

and 2., how to translate the Point from the
mouse event, into the coordinates of my grid.

You apply the exact reverse operation to the 2D mouse coordinates. You
have to guess a z'-component (e.g. the one of a line nearest to the
viewer, the line "in front") to resolve ambiguities.

If Affine transform is still the way to go, I can keep studying it.

Lets clean up a few things. The basics for all this is 3D and 2D
geometry. You can calculate e.g. the rotation or translation in 3D with
normal geometry formulas, for each dimension after the other. Clever
people have figured out that one can express an operation like a
rotation or translation with a matrix - so one can do such an operation
"at once" to all dimensions. Also, by cleverly using matrix operations
it is possible to express several operations at once (translation,
rotation, scaling, shearing, flipping, etc.) in a single matrix.

This is what Java's 2D AffineTransform does - for 2D coordinates. It
won't help you in 3D, and you can anyhow do all the necessary
transformations by using "normal" math instead of matrix operations. It
helps to understand the geometry before looking at the matrix
operations. The matrix just combines several basic geometry operations
in one.

/Thomas