This might be a stupid question but I'm stuck and can't get passed it. I'm making a isometric game and I have my map built using tiles, I just followed this tutorial to build the map, http://www.binpress.com/tutorial/creating-a-city-building-game-with-sfml/137. But now I don't know how to add character sprites. Do I have to add these sprites using tiles as well or do I just draw the the sprites into position of the screen. Any help would be much appreciated.
As far as I can tell from the engine, just follow the "Textures and Animations" guide and draw the Animation to the screen after you have drawn the tiles. This isn't a complicated engine, so you are only working with 2D sprites being drawn to the screen (the 3D effect is merely tricks of painter's algorithm to make it work...there is no z-axis from what the tutorial indicates)
The depth is done by the order of tile rendering
The same goes for objects,players,etc... Let assume plane XY is parallel with the ground and Z axis is the altitude. Then your grid would be something like this (assuming diamond shape layout):
Order of rendering
You have to handle object,players and stuff sprites in the same way as tiles (and in the same time). so you should render all cells in specific order dependent on your grid layout and sprite combination equation. If your sprites can overwrite already rendered stuff then you should render from the most distant tiles to the closest to the "camera". In that case the blue direction arrow on above image is correct and Z axis should be increasing in the most inner loop.
So now if you got any object,player or stuff placed in cell (x,y,z) then you should render it directly after the cell (x,y,z) was rendered prior to rendering any other cell.
To speed up is a good idea to have objects and players in your tile map as a cell. But for that you have to have the tiles in the right manner and also your map representations must be capable of doing so.
Related
I'm trying to create a moveable 3D-view in three.js on top of a static 2D-rectangle image. Everything works fine, but I want the buildings at the upper edge to be "cut off" vertically so they appear to be placed visually correct on top of the static ground rectangle. Here are some pictures to illustrate the problem:
Desired appearance (only top of building is over the edge)
Wrong appearance (bottom of building floating over the edge)
So I want some kind of cut-off that slices the objects vertically at the top edge, however I'm unsure what the best method would be, I tried frustrum culling and putting the scene inside of a cube, but both of these didn't really work.
If that's not possible the next best solution might be to exclude objects that touch the edge from rendering completely, or what do you think?
I figured it out, apparently what i want is called "Clipping Planes" and three.js supports those natively. Sorry for the somewhat confusingly worded question.
Using THREE.Shape, I can create holes, but rather than holes, I wish to define a clip mask.
I ONLY want to render the shape within a mask, similar to html's canvas/context .clip()
Is there a way to do this using holes or other method?
EDIT:
So, more background, I was using canvas to render segments, and imported them into three as planes.
The mouth was 1 canvas, and I was able to clip mask the teeth and tongue onto the black part.
See the whole movie at http://zsenji.com (rendered using the old canvas method)
Anyway, now I'm updating everything to use threejs and no more canvases rendered as planes.
I'm going to try three csg , which can hopefully intersect two geometries. https://stemkoski.github.io/Three.js/CSG.html
Then all I would have to do would be extrude the black of the mouth, and intersect it with the teeth/tongue. I will update
It worked.
I used very simple intersect, similar to https://github.com/chandlerprall/ThreeCSG/blob/master/examples.html
It's a little slow and there are still some other problems relating to overlapping paths, but for this issue, this was the fix.
All the different fills you see are three shapes
This is more a math question than a programming question beside the fact that I must implement it using Delphi inside a graphic application.
Assuming I have a picture of a sheet of paper. The actual sheet of paper is of course a rectangular area. When the picture is shown on a computer screen the rectangular area is no more rectangular because when the picture was taken, the camera was not perfectly positioned above the sheet of paper. There is all kinds of perspective effects which result in deformations.
My application needs to tweak the image so that the original rectangular area is displayed as a rectangular area on screen.
Most photo processing software have an interactive tool to do that. The user draw a rectangular area on screen around the rectangular object and then drag each corner to deform the displayed rectangular area until he see the real area as rectangular. What I'm looking for is the algorithm to do that computation.
You need to split the problem into 2 steps. Find the edges or corners of the sheet and remap the pixels.
To find the corners or edges it's a really hard problem since they might be invisible, outside of the picture, obstructed, bent or deformed. Assuming you have a very simple setup (black uniform background, white paper, very little distortion) you could run an edge detection kernel over the image then find the 4 outer edges. If you find the edges you can intersect them to find the corners and the other way around.
Once you find the corners run an interpolation over the image to map the pixels onto the rectangle you want. You should be able to get the graphics engine to do this for you if you provide the coordinates of the corners as texture coordinates for the rectangle and map the image as a texture.
I made it sound simple, but you will encounter many parameters to set and experiment with.
It seems (because you mentioned bilinear interpolation) that you need perspective transformations.
There is implementation of perspective transformations (mapping of arbitrary convex quad to rectangle and vice versa) in Anti-Grain Geometry library (exe example). Delphi port.
With agg_trans_perspective one can calculate the matrix of persp. transformation and then apply it to map coordinates from one quad to another.
Is in any way possible to get intersection of a ray and an animated skin?
I'm trying to highlight animated characters and other objects in my game on mouse over, rather accurately.
I've set up an example of this with my current approach, so you can see the problem:
http://jsfiddle.net/Eskel/k44960Lp/1/
The model is rigged with a single bone and the bone animated to translate from side to side. Raytracing intersection turns it red. You can find the interaction in the middle, where I suppose it interacts with the static geometry.
I'm using Three.Raycaster
raycaster.intersectObject mesh
I am actually trying to develop a web application that would visualize a Finite Element mesh. In order to do so, I am using WebGl. Right now I have a page with all the code necessary to draw the mesh in the viewport using triangles as primitives (each quad element of the mesh was splitted into two triangles to draw it). The problem is that, when using triangles, all the piece is "continuous" and you cant see the separation between triangles. In fact, what I would like to achieve is to add lines between the nodes so that, around each quad element (formed by two triangles) we have these lines in black, and so the mesh can actually be shown.
So I was able to define the lines in my page, but since one shader just can have one type of primitive, if I add the code for the line buffers and bind them it just show the lines, not the element (as they were the last buffers binded).
So the closest solution I have found is using multiple shaders, and managing them with multiple programs, but this solution would just enable me whether to plot the geometry with trias or to draw just the lines, depending on which program is currently selected.
Could any of you help me about how to approach this issue? I have seen a windows application that shows FE meshes using OpenGL and it is able to mix the triangles with points and lines, apart from using different layers, illumination etc. So I am aware that this may be complicated, but I assume that if it is possible somehow with OpenGl it should be as well with webGL.
Please if you provide any solution I would appreciate a lot that it contains some code as an example, for instance drawing a single triangle but including three black lines at its borders and maybe three points at the vertices.
setup()
{
<your current code here>
Additional step - Unbind the previous textures, upload and bind one 1x1 black pixel as a texture. Let this texture object be borderID;
}
Draw loop()
{
Unbind the previous textures, bind your normal textures, and draw the mesh like your current setup. This will fill the entire area with different colours, without border (the current case)
Bind the borderID texture, and draw the same vertices again except this time, use context.LINE_STRIP instead of context.TRIANGLES. This will draw lines with the black texture, and will appear as border, on top of the previously drawn colors for each triangle. You can have something like below
if(currDrawMode==0)
context3dStore.bindTexture(context3dStore.TEXTURE_2D, meshTextureObj[bindId]); else context3dStore.bindTexture(context3dStore.TEXTURE_2D, borderTexture1pixObj[bindId]);
context3dStore.drawElements((currDrawMode == 0) ? context3dStore.TRIANGLES: context3dStore.LINE_LOOP, indicesCount[bindId], context3dStore.UNSIGNED_SHORT, 0); , where currDrawMode toggles between drawing the border and drawing the meshfill.
Since the line texture appears as a border over the flat colors you had earlier, this should solve your need
}