Terrain map THREE.JS - javascript

Tell me who knows about THREE.JS. I implement a map grid similar to the game SimCity 50x50. I rendered blocks of ground with different heights (as in the screenshot), now I want to smooth out the height transitions so that there is a smooth relief, while maintaining the 50x50 grid. As planned, everything should be like in the SimCity game: the user changes the type of landscape, change the relief of the landscape.
Image: How it looks now - Image: What I want to get
Implemented as follows: there is a json array where for each cell its XZ coordinates are listed for placement on a 50x50 map and a Y coordinate for the height of the land block, as well as the type of terrain (grass, earth, stone, etc.). Each block of land is a BoxGeometry.
There were thoughts to somehow add vertices to the upper side and smooth out the transitions by their positions, but I did not find this.

This could be accomplished with BlockGeometry objects, but that would be far more trouble than it's worth. For example, you'd have to analyze the surrounding terrain to know how to rotate the BlockGeometry to modify it correctly, and you might have to rotate it again when the terrain is edited. < That's not to mention the number of objects; at your size of 50×50, you'd be adding 2,500 objects to the scene. > A single mesh is much more natural in these circumstances.
First, notice that the map only comprises four cell shapes, not counting rotations: flat cells, cells that slope parallel opposite edges, cells that bend up to form a corner, and cells that bend down to form a corner.
Think of your terrain not as a set of blocks, but as one continuous surface quilted from square cells. Each cell is a mesh of four triangles.
Looking at a cell down the negative y-axis, starting at the top-left corner and moving clockwise around the cell, we'll label the vertices at the cell's corners a, b, c, and d. We'll place a fifth vertex, e, at the exact middle of the cell when viewed from this perspective. These vertices form four triangles, △abe, △bce, △cde, and △dae.
For any cell, the Y value that you're currently storing becomes the y-position of vertex a< e >.
To get the y-position of vertex b, we look at the cell one column to the right. The y-position of that cell's top-left corner (a), i.e., that cell's stored Y value, is also the y-position of the top-right corner (b) of the cell we're currently building. Similarly, the y-position of our current bottom-right corner (c) is the stored Y value of the cell down one row and to the right one column. The y-position of our current bottom-left corner (d) is the stored Y value of the cell down one row.
Vertex e is a bit trickier, but it can be solved like this:
If any three of a, b, c, and d have the same y-position, then e shares that y-position (this is a level cell or a diagonal slope).
If two adjacent vertices of a, b, c, and d share one y-position and the other two share another y-position, then the y-position of e is the average of those two y-positions.
If neither 1 nor 2 is true, we have an error (because the SimCity 2000 map didn't allow other types of geometry).
Now, actually generating the mesh is another matter, but there are plenty of tutorials available (via Google: Procedural terrain meshes in ThreeJS).
< I've created a proof of concept that you can see at https://pnichols04.github.io/sc2k-map/, with source code at https://github.com/pnichols04/sc2k-map. >

Related

How to get 3D plane position from real length 2D horizontal plane (perspective)

We have a 10x5 rectangle than match a 1000m x 500m field in real life.
The field's orientation is horizontal (floor).
So we get a quadrilateral where 1 virtual unit = 100 units in real world and four 2D corner positions (A,B,C,D)
How can I find the XYZ plane's position and rotation if :
camera.position:(0,10,0) and
camera.rotation(0,0,0) ?
The goal is to place the plane in 3D space as the perspective matches exactly the 2D image.
I think it's related to pnp problem (additional informations here)
(You can imagine the use case of a soccer field, if I have the four xy position of the four corner, ABCD, how can I place a plane in an AR app to match and track the field)

Find regular grid cells intersecting arbitrary shaped quadrilateral

I need to find all indexes [x, y] for grid cells intersecting an arbitray shaped quadrilateral, defined by its corner coordinates;
grid cells are tiles with 128 x 128 px
grid cells have an integer index between [-nx, -ny] and [nx, ny](max extend is a square with (2nx * 128) * (2ny * 128) px)
quadrilateral is defined by corner points, with coordinates (qx, qy) in pixel space given as (tl, tr, br, bl)
This is integrated in a three.js scene:
corner points/coordinates are raycasted from camera on a base THREE.PlaneBufferGeometry
How to get all intersecting tiles in a computationally efficient manner in JavaScript?
For now I compute the perimeter tiles by traversing each quadrilateral edge using mx + b with the tile dimension (128px) as step; from there, I just add interior tile indexes row for row. But that´s somewhat clumsy, which might or might not be a coding skill issue. I am about to try using the THREE.Raycaster to get the perimeter tile indexes, but not sure how, yet.
I am seeking a better solution algorithm-wise; basic formulae, pseudo code, ideas, or definite solutions.
To effectively find grid cells intersected by quad edges, you can use Woo and Amanatides grid traversal algorithm: article "Fast Voxel Traversal Algorithm...".
Practical implementation is in grid traversal section here
Example:
For inner cells of convex quads: during edge traversal remember the leftmost cell in row for "right" edges, the rightmost cell for "left" edges, and fill horizontal gap between them.

Find all free rectangular regions in a 2-D box with random positioned obstacles inside

I have a pre-defined-size rectangular area with some other rectangles inside, which represents filled regions, or, let say, obstacles.
All the rectangles are axis-aligned.
Origin of the axis (i.e. 0,0) is top-left.
The X and Y coordinates of all the rectangles, as well as the horizontal and vertical size is known.
Information about the rectangles inside the main area is contained in an already-sorted array, where i[0],i[1] are the X,Y coordinates of the upper-left corner and i[2],i[3] are respectively the x and y size:
[
[10,1,14,7],
[34,1,14,15],
[16,22,27,44]
]
How can i get all the rectangles covering the free remaining space, like in the image below?
(credits: Jukka Jylänki, A Thousand Ways to Pack the Bin - A Practical Approach to Two-Dimensional Rectangle Bin Packing http://clb.demon.fi/)
I don't need an algorithm for optimal bin-packing, as the rectangles are already placed, nor to find the biggest rectangle, but i'm aware that these can be related arguments.
I have also read some papers about the line-sweep algorithm, but i'm not able to get a working implementation, and so i cannot imagine if this would be the right solution for my problem.
My first attempt (clearly wrong) was to gather all the cuts generated by all the sides (inverse intersection):
[
[24,8,37,8],
[1,16,60,6],
[1,22,15,44],
[43,22,18,44],
[1,66,60,5],
[1,1,9,70],
[10,16,6,55],
[24,1,10,21],
[34,8,9,14],
[43,8,5,63],
[48,1,13,70]
]
...but this would require an additional step to to join adjacent rectangles and then filter out those inside a bigger one. See for example, the red-marked rectangles in this picture:
Could be this a way to go, though not optimized?

Isometric engine drawing issue

I'm trying to write a game engine in js (canvas). So far so good.
But i got one problem my world is diamond shaped and i render the tiles from top to bottom.
The problem is when i have a tile that's bigger than 1 tile (so 2x2 as example) this will happen:
The house is defined on tile (2,1).
The left rock is placed on (1,0)
The tile (1,0) is rendered first and the next tile is (2,1) because it's on the same row and on the right.
How can you solve this?
You should be able to avoid the problem by breaking your graphics down into smaller pieces - one piece per tile on the grid. A good way to think of it is like this: If you could view the grid from directly above, each sprite should not overflow the edges of the cell they're allocated to.
For example, this cell below should probably only contain the front section of the house shown by the smaller cube:
At some point you may need to also micromanage multiple sprites in the same cell, but that's the same concept in a smaller space.
For this specific example there's a simpler solution.
Right now the house occupies these spaces: 2x0, 3x0, 2x1, 3x1
And you're drawing the house from position 2x1
If you instead drew the house from position 2x0 (and still occupy the same original 4 tiles) all the tiles would draw in correct order.
As long as you're drawing tiles top (back) to bottom (front) in screen rows, you can use oversized tiles that are 2x2, 3x3, 4x4, or any square size easily without slicing. Just draw these larger tiles along their middle row position. I often use the left corner as the grid anchor for these large tiles. It makes sense in my head this way because as soon as you draw the leftmost (or right) corner of a big isometric square, you separate everything already drawn behind it from what comes in front of it.
Rectangular oversized tiles (e.g. 2x1, 2x3, 2x4, 3x4, 4x5) usually require a more complex draw order algorithm than just screen rows top to bottom. I opt to slice these into square tiles.
Side note, that medieval house tile does already have original parts split into vertical slices if you want to go that route (my originals are on OpenGameArt).
I think the best solution here is clearly to divide your graphics using a pre-defined metric (width of a tile for instance).
The tile-based system is widely used for 2D-game, including isometric games.
Example: http://www.spriters-resource.com/pc_computer/fallouttactics/
My solutions (Also thanks to Marty Wallace!)
I can cut the sprite in 3 pieces shown on the image below
The first part gets drawed on coord (2, 0)
The second part gets drawed on coord (2, 1)
The third part gets drawed on coord (3, 1)
So we slice it vertically on the bottom tiles (the drawed tiles are like a V shape)
This should work for every tile size like 4x4
We can forgot about the tile (3, 0)
Blue: The actual png
Red: the cut lines
The lines are a bit off, but it's about the idea
And i need some sleep (that last 2 is 3 ofcourse)
This also gives us a simple calculation:
sizeX - 1 = The number of sides on the right of the middle section (the big one)
sizeY - 1 = The number of sides on the left side of the middle section
And every slice is half the tile width, and the middle slice is the full tile width.
The right slices contain only the most right part of the tile, and the left the most left side.
We can easily use tiles like 3x1 or 1x4 etc

Dividing a rectangle into four clickable (or hover-able) triangles

Before reading on, my issue is to know what are the optimal methods to find an objects height/width/position as there seems to be some conflict about this.
After that I'll need help with how to use the previously obtained data to do number 4 in the following list. And after that I'll need help with number 5. I was hoping to do this gradually so please bear with me.
I found code for how to divide a square into two equal triangular clickable areas (Two triangular clickable area within a square). I didn't really understand much of what the code was doing to be honest. My question was about subdividing the rectangle that represents the visible screen area into four clickable areas, imagine its diagonals are drawn.
I did find this very useful (pseudo)-pseudocode :
Create a div and style it to be a square. Use a background image to illustrate the triangles
Create a variable, square, in javascript to hold the square element
Get the position, height, and width of square in your js
Do some math to determine the coordinates of each triangle's vertices
Write a function, getQuadrant(), that determines which triangle any given point within the square is in
Add an event listener to click events on the square. The event listener should call the getQuadrant function
Use a switch/case to execute whatever code you need to call conditional upon which quadrant the click lands in
I'm not going to ask for the full code right away, I'd like to learn in the process. Could someone please help in just pointing me towards which methods to use for numbers 3 and 4? And I'll most probably need help with number 5 as well.
Thanks a for the help! =)
K
If you translate everything so that the center of the square is the origin, then the borders of the triangle are defined by the lines x == y and x == -y. You can base your quadrant classification on that relationship:
If x > Math.abs(y), then you are in the right triangle
If y > Math.abs(x), then you are in the top triangle
If -x > Math.abs(y), then you are in the left triangle
If -y > Math.abs(x), then you are in the bottom triangle
Ties can be resolved arbitrarily between the two (or four, if x == y == 0) closest triangles.

Categories

Resources