Search the Community

Showing results for tags 'terrain'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 22 results

  1. Scratch Card Effect.

    Hey, I want to create a scratch card effect, as there are in games with luck and all where you scratch on some image and in the scratched area you can see the image below it. I think this can be done by manipulating pixels somehow, but i am not experienced with pixi and don,t know how to do it exactly. It will be a great help if you point out a way or tutorial to do it, or give a basic code snippet here to help me figure this mechanism out. Regards.
  2. Hi Everyone, I need guidance on how can I approach this problem: Would like to apply a tiled texture to complex polygons. I'm using P2 for the physics and tiled for the level editor. I would like to get something similar to worms where the terrain has a tiled texture, the top has grass and the bottom is darker. These are some examples of what I would like to achieve: I don't care at all about destructible terrain. This is how my level looks now with polygons from tiled:
  3. Has anyone done this yet in babylon JS I see a couple of examples but none of the projects I can reference have worked out the camera height in the process or the blending between LOD layers. I am going to start trying to make a working example from the paper but would like to see how others have handled it. I have looked at and but both of these are limited to 2d measurements and because I am going to be doing this on a planetary level with Spherical displacement I need to go a step farther. Also I am wondering how I should handle the frustum calculations because in theory nothing on the backside of the planet will need to be rendered but how do I establish the "zone" is hidden on the other side of the planet?
  4. While trying to add additional support for my new SplatmapMaterial... I am using TerrainMaterial shader as a base/guide to make my modifies splatmap material... have a question regarding bump map... if you look in the code normal is calculated ... BUT I CANT SEE WHERE IT IS ACTUALLY BEING USED ... Please look at this: // Bump #ifdef NORMAL vec3 normalW = normalize(vNormalW); #else vec3 normalW = vec3(1.0, 1.0, 1.0); #endif #ifdef DIFFUSE baseColor = texture2D(textureSampler, vTextureUV); #if defined(BUMP) && defined(DIFFUSE) normalW = perturbNormal(viewDirectionW, baseColor.rgb); #endif now that calculates out normalW ... but after that NOWHERE is normalW being used... HOW IS BUMPING BE APPLIED ??? Attach is who vertex and fragment programs... Please tell me whats up with the BUMP feature from BABYLON.TerrainMaterial terrain.vertex.fx terrain.fragment.fx @Deltakosh , @Sebavan , @davrous or @RaananW Please Help If Can
  5. New Terrain Splatmap Material (Based Off BABYLON.TerrainMaterial)... Supports up to 4 splatmaps using up to 12 textures for terrain painting. The new splatmapMateral.ts will be added to the the babylon Materials Library soon but check out how i am using it for native terrain support using the U3D BabylonJS Toolkit. [UPDATE] Sorry, but you will NEED the toolkit to use the new BABYLON.SplatmapMaterial... I had to move the splatmatting into my Scene Manager API available on BabylonJS/Extensions. The way i use splatmaps now hook into the native shader pipeline and pick up (or make available) all the standard PBR features plus all the ShaderMaterial features, plus Scene Component Life-Cycle... I then automatically generates all the splatmaps from the actual terrain data... All the code will be available ... Just NOT as a materialLibrary (although i guess i could make a lightweight version for manual usage.) U3D - BabylonJS Toolkit: Terrain Splatmap Material Overview Hey @Deltakosh , @Sebavan , @davrous , @RaananW , @Dad72 , @MrVR ... Hey guys please check this out... I am pretty proud of this... Its my FIRST venture into the low level shader parts (using the terrainMaterial.ts as a guide)... But i think it turned out beautifully
  6. Elevation of terrain

    Hi, I have a new question about how can I get a elevation of terrain. Now I am using this function:CreateGroundFromHeightMap() and I use a png as parameter. However, I dont get the accuracy that I would like having. I have 1 height by each 2meters so I consider that I should use this data to calculate the height of terrain instead of the intensity of color. Do you know how could I do it? Thanks JMJR
  7. Hello everybody! I am looking for procedural terrain generator. I'd like to achieve something like smooth hills or something like here. In the last link there is a beautiful and smooth terrain. I thought about Perlin Noise generator, but I am not sure if is it possible with this function. Maybe do you know something that I can achieve with.
  8. Hello everybody! I'd like to create a terrain that is moving in cycle generated from height map in effective way. I created mesh with new BABYLON.Mesh.CreateGroundFromHeightMap('ground', "", 200, 200, 50, -20, 20, scene, true); So I have 200x200 plane with 50 subdivisions. Then I registered before render function in which I take first 51*3 points (51 vertices, cause there is 51*51 vertices) and put it at the end of position array of vertices data of mesh. So it should move the terrain in the cycle, but maybe I'm doing something wrong. Here is my playground: . I achived something like this here: but I don't think it's effective way.
  9. Ok, time to share a preview of something I have been working on for a couple of months now: A quadtree LOD terrain for Babylon. So far I have: - Chunking system with infinite paging - Distance based LOD - Custom meshing - Basic UVs and texturing - Bakes to Babylon GroundMesh objects so all the usual functions, physics etc works. - Perlin based height data generation. The bad news is, its currently slower with the LOD than without it, mainly due to memory and garbage collection pressure. I need to make it more efficient at caching the unchanged data between updates and massively reduce the number of new objects created. I'm also duplicating vertices at the moment, I need to fix that. And of course... the infamous seams. At the moment there are cracks between the LOD which need to be handled with seam generation. If anyone has interest in helping, let me know.. I am going slightly crazy developing this
  10. So I would like to have my terrain cast shadows on it's self, like the mountains shadow the rest of the terrain, etc. But when I try to do this by adding the groundPlane to the shadowGenerator, the entire mesh turns black. Is there a way to do this, or is this not something that can be done yet? I really hope to be able to pull this off!
  11. I was wondering since I have a chunked (tiled) based terrain system, I have a height tool made now, but at the edge of each tile I have gaps forming, I have seen somewhere a way that this can be fixed but hours of searching I haven't been able to find it and I seem to forgotten to bookmark it.. so hoping for some pointers here on possible ways this can be achieved. I attached a image to show what is happening between chunks (meshes). Thanks! Edit: Found the article and it has to deal with Three.js so not at all useful for me..
  12. Hi again! I have a little concept I can't wrap my head around. What I want to do is create Heightmap terrain (already done), then apply it to ribbon and dispose it(done as well). No the problem is I would like to divide up this ribbon into smaller pieces so that I could load them up on the fly like LOD terrain. This obviously would make the terrain generation a lot easier. I then plan taking the getHeightAtCoordinates and getNormalAtCoordinates and add it to a custom Ribbon function so I can do collision detection. So forget about the collision detection thing for now but how would you go about dividing up a riibbon like this: but with more subdivisions. var terrain = BABYLON.Mesh.CreateGroundFromHeightMap("terrain",createHeightMap(256),1000,1000,100,0,256,scene,true); terrain.onReady = function() { var paths = []; var step = (Math.PI - 1) / steps; var vertices = terrain.getVerticesData(BABYLON.VertexBuffer.PositionKind); var path = []; for(var i = 1; i < vertices.length; i++) { var x = vertices[i*3+0]; var y = vertices[i*3+1]; var z = vertices[i*3+2]; path.push(new BABYLON.Vector3(x, y, z)); } paths.push(path); var ribbonTest = BABYLON.Mesh.CreateRibbon("testRibbon",paths,false,false,20,scene); ribbonTest.position.y = 100; terrain.dispose(); } createHeightMap(256) being a function I made that generates simplex heightmap image data for a image 256 * 256. (turns out it actually doesn't work right)Maybe I don't want this, maybe I want to use vertexData? PG:
  13. Hey folks! I was wondering, what are some techniques to accomplish physical interactions against a terrain mesh, imported as an .obj file? I had attempted this earlier, and was having troubles — warnings saying MeshImpostor can only collide with Sphere — or something like that, I don't recall exactly but I'm sure some of you know what I'm talking about. I'm hoping to have objects of all kinds (spheres, cuboids, cylinders, ellipsoids, etc?) physically interacting with static terrain meshes, which will include some bumpy ground, buildings, caves, etc. Also, I haven't really decided on a physics engine yet (oimo, cannon, ammo, etc?), so if one can handle this problem better than others, I'm all ears! Thanks!
  14. TERIABLE I will be pushing updates to this github quite often. Features Soon to be implemented : - More Noise Types - Natural Filters for Erosion and Coastlines ect... - Procedural Shades with Editable base textures - Built in Image Editor and Paint program for texture creation and 3d painting Layers. - Infinite Mode - Spherical Mode - Export (the Region as a fixed object, or as a Dynamic one) I am only two days into development so yeah stay tuned... *** UPDATES *** I added the ability to delete and move the item nodes in the filter stack... this is only a temporary way to process the noises and filters. Soon I will be adding a "Node" drag and drop system where you will be able to make linkages between different process. Example:
  15. Tri planar terrain

    This may or may not be a bug, but tri planar terrain causes point lights to have an finite range. Seems to work fine in babylon.js playground.Will upload code tomorrow.
  16. Hi, I was wondering if someone could explain to me how to go about editing height map terrain.I know the Basics: save vertices+normals to array, edit their positions in a for loop and apply changes to height map. I checked out the code for WorldMonger but it looks quite complicated in places(especially at any of the 'normal' code, but really the whole thing). I would like to be able to get to a point where I can code something like this and know why it works how it works. I died a bit of research into getVerticesData and was able to do basic editing of terrain(say for example in for loop, divide position value by 3 etc, and reapply to height map). So I was wondering if someone could point me to some tutorials on the subject or give some further explanation of how this works? Thanks in advance.
  17. I don't see a way to export a terrain material from Unity. Is there a method I could use to export an array of textures, and then create the terrain material later in babylonJS with those textures?
  18. I notice that there has been some discussion recently about heightmaps and the BJS tutorial suggests getting heightmaps by using " software such as “Terragen”, or ”Picogen”. Well this is an intro to a very easy to use way to get greyscale heightmaps. Once you get to the page you are somewhere in Finland, but click on the magnifying glass (top left) and type in the name of a city/town/village. It takes you to the local area. Now adjust the zoom (top left +/-, or scroll wheel). With mouse in the blue grid you can drag the grid. With mouse outside the blue grid click drag to move the geography (like google maps). On the right of the screen are +/- buttons to change the size of the blue grid (8-60km). Now download - gives you a greyscale heightmap of the area you selected in the blue grid. I have tried typing in small village names and get good results - though essentially names the are "english". Try Beddgelert - a real tiny village in Wales of myth and legend - or for Wingy "Bessemer" And just to show you an example : RSD The red cube is a tiny place - but they made a film about events that happened there - any guesses??. If you open your console it prints out the number of meshes in the scene (should be 17). One is the red cube, the other 16 are the 4x4 subdivision of the terrain.- and er .... no seams. This particular terrain is 8x8 km - so the tiles are 2x2km. And if you want to create your own terrains look at L3DT. The free addition alllows you to save heightmaps 2049x2049 pixels. The "Pro" edition (indie and commercial - above or below $250K) allows 131,072 × 131,072 pixels - which is a big terrain Maybe of use to some people. cheers, gryff
  19. Hi all, I recently started playing around with threejs and am looking for suggestions on implementing terrain following. I have a simple demo here: This works to a degree, but it isn't very smooth. The box just kind of pops to a new height. My current technique just combines triangles into quads, checks to see which quad the box/player is within and then sets the box's y position to the average y of the quad's vertices. The code is below. for(var j = 0, len = geometry.faces.length; j < len; j+=2){ face1 = geometry.faces[j]; face2 = geometry.faces[j+1]; if( pos.x >= verts[face1.a].x && pos.x <= verts[face2.b].x) { if(pos.z >= verts[face1.a].z && pos.z <= verts[face2.b].z) { var avgY = verts[face1.a].y + verts[face1.b].y + verts[face1.c].y; avgY += verts[face2.a].y + verts[face2.b].y + verts[face2.c].y; targetY = avgY * 0.166 + 4.5; } }}// increase y positionif(targetY != undefined && Math.abs(targetY - pos.y) > 0.5){ if(pos.y < targetY) pos.y += 0.5; else if(pos.y > targetY) pos.y -= 0.5;} I was just wondering if anyone had any tips or good resources for a better implementation and smoother results. Cheers.
  20. I see that a flat terrain generated using CreateGround stops my object from falling through but terrain generated using CreateGroundFromHeightMap objects simply fall through using both basic phsyics and cannon.js which leads me to wonder if heightmap terrain even supports physics yet or not.
  21. I just whipped up another quick example for Metrix.js this time it shows you how to build a controllable player on a randomly generated heightmap with first person controls. You can try out the example here 0.3 - First Person Controls on HeightMap heres what the random terrain in the example looks like(for the lazy) and heres the source, requires three.js( and Metrix.js( <!DOCTYPE html><html lang="en"><head> <script src="three.min.js"></script> <script src="Metrix0.3.js"></script> <script> var mouseLocked = false; var user,fpsControls; var terrainMap,terrainMesh; Metrix.WorldOptions.Gravity = 3; window.onload = function() { Metrix.Initialize(); }; Metrix.OnLoad = function() { var txt = new MUI.Element("span",document.body); txt.SetHTML("click anywhere to start");,10,0); user = new Metrix.Object(,{velocity: true, slope: {start: 0.3}, collisions: true, gravity: true, mass: 30, drag: 2, bounds: {aabb: new Metrix.AABB(null,new THREE.Vector3(0.5,2,0.5),0,-1,0)}});//Create Metrix.Object to control velocity, collisions and gravity of the player user.AddUpdateCallback(userUpdate); fpsControls = new Metrix.FirstPersonController(,1,1);//Add a first person controller to control yaw, pitch and look sensitivity terrainMap = new Metrix.HeightMap(new THREE.Vector3(0,0,0),1,Utils.GenerateHeightMap(1,20,-10,40,40,true));//Create a new height map thats randomly generated using Metrix.js's Utils.GenerateHeightMap(maxRandomClimb,maxHeight,minHeight,smooth,smoothingAmount) terrainMesh = terrainMap.GenerateMesh(new THREE.MeshPhongMaterial({color: 0x20af30, specular: 0x202020, shininess: 20, ambient: 0x109f20}));//Generate a THREE.Mesh from the height map Metrix.AddHeightMap(terrainMap);//Add the terrain to the metrix world var sun = new THREE.SpotLight(0xfafafa,1.5,0,-2); sun.position.set(40,100,90); Metrix.scene.add(terrainMesh); Metrix.scene.add(new THREE.AmbientLight(0x303030)); Metrix.scene.add(sun); window.addEventListener("click",function() { if (!mouseLocked) { Metrix.LockMouse(mouseMove,mouseExit);//If mouse isnt locked and mouse clicked, lock mouse Metrix.AddObject(user);//Unpause be adding user back to the metrix world } mouseLocked = true; }); Metrix.Go();//Start Metrix.js game loop }; function userUpdate() { if (Metrix.Key[KEY_W]) {//If W key down, move forward user.MoveForward(1); } if (Metrix.Key[KEY_D]) {//If D key down, move right user.MoveRight(1); } if (Metrix.Key[KEY_S]) {//If S key down, move backward user.MoveForward(-1); } if (Metrix.Key[KEY_A]) {//If A key down, move left user.MoveRight(-1); } if (Metrix.Key[KEY_SPACE] && user.Grounded()) {//If SPACE key down and user is on ground, jump user.velocity.y = 35; } } function mouseMove(mX,mY) { fpsControls.Look(-mX,-mY);//Look around, mX = mouse movement x, mY = mouse movement y } function mouseExit() { mouseLocked = false; Metrix.RemoveObject(user);//Remove user to pause the game once mouse lock is cancelled } </script></head><body></body></html>