Search the Community
Showing results for tags 'terrain'.
-
Hey guys. Recently I started working with the Babylon Exporter in Unity to create a 3D scene. I read documentation and watch video about Terrain Builder, where says that you can use up to 12 textures to create a Terrain. But for me more than 6 not work. A black background is drawn instead of my texture. Why can it be?
-
I have a minimal flight simulator here: https://www.babylonjs-playground.com/#UL7W2M and at my website jounce.space/flightsimhome that can be full-screened (f11) and has skybox as shown here: The code that makes the flight simulation possible: var camera = new BABYLON.UniversalCamera("cam", BABYLON.Vector3.Zero(), scene); addYawPitchRollFunction(camera, 1); where addYawPitchRollFunction(...) is defined as: function addYawPitchRollFunction(ob, gravity) { ob.rotationQuaternion = new BABYLON.Quaternion(); ob.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(ob.rotation.y, ob.rotation.x, ob.rotation.z); ob.myGrav = gravity; ob.yawPitchRoll = function(yaw, pitch, roll) { var axis = new BABYLON.Vector3(0, 0, -1); var partRotQuat = new BABYLON.Quaternion(); BABYLON.Quaternion.RotationAxisToRef(axis, roll, partRotQuat); this.rotationQuaternion.multiplyInPlace(partRotQuat); BABYLON.Quaternion.RotationAxisToRef(axis.set(-1, 0, 0), pitch, partRotQuat); this.rotationQuaternion.multiplyInPlace(partRotQuat); BABYLON.Quaternion.RotationAxisToRef(axis.set(0, 1, 0), yaw, partRotQuat); this.rotationQuaternion.multiplyInPlace(partRotQuat); this.rotationQuaternion.toEulerAnglesToRef(this.rotation); } ob.autoBank = function(yaw, pitch, speed) { var axis = new BABYLON.Vector3(0, 0, -1); var partRotQuat = new BABYLON.Quaternion(); var roll = Math.atan2(-yaw*222*speed, this.myGrav); this.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(this.rotation.y, this.rotation.x, roll); BABYLON.Quaternion.RotationAxisToRef(axis.set(-1, 0, 0), pitch, partRotQuat); this.rotationQuaternion.multiplyInPlace(partRotQuat); BABYLON.Quaternion.RotationAxisToRef(axis.set(0, 1, 0), yaw, partRotQuat); this.rotationQuaternion.multiplyInPlace(partRotQuat); this.rotationQuaternion.toEulerAnglesToRef(this.rotation); } ob.clearYawPitchRoll = function() { this.rotationQuaternion.set(0, 0, 0, 1); this.rotation.set(0,0,0); } } Now you can add increments of yaw, pitch, & roll to camera's orientation: camera.yawPitchRoll(yawInc, pitchInc, rollInc); Or for automatically coordinated turns: camera.autoBank(yawInc, pitchInc, speed); Look at https://www.babylonjs-playground.com/#UL7W2M as a complete example. I welcome your comments, corrections, suggestions, & accolades! ? Enjoy! - -
-
What are some options for creating terrain from heightmaps via NullEngine? I'm trying to create a serverside terrain for collision checks in a multiplayer game. The main issue is that Mesh.CreateGroundFromHeightMap involves loading an image and going through pixel data via canvas, none of which exists in node. Some ideas: Expose canvas + image api on the server: https://github.com/Automattic/node-canvas can provide Image and Canvas to NullEngine, though I've written a server side image processor recently that uses this tech and while it does work it isn't entirely straight forward because quite a few extra things need installed before it all works. I'm not sure how many babylon nullengine features use canvas/image, if its just this one then I doubt this route is worth it. Just loading the image in node: a small patch function that detects if we're in node and loads an image and gets its pixels using regular node fs. I'm not 100% sure how to do this but it sounds possible. This would kinda fork the logic inside of Mesh.CreateGroundFromHeightMap unless it was exposed in a new way. Go straight to the heightmap data and skip the images: https://doc.babylonjs.com/api/classes/babylon.vertexdata#creategroundfromheightmap - this does assume pixel data (UInt8 array of RGB? RGBA?) but has no dependency on canvas as far as I can tell. I don't understand the colorFilter (0.3, 0.59, 0.11) though, so someone would have to explain it to me. In my case I actually generated my heightmaps in node to begin with, and then saved them as images purely as a visual tool to see how the maps would look. I happen to be using these debug images and loading them into babylon because it works automagically! I could certain just skip all this and save them in some other format, like a 1D array of UInt8s (though in this scenario it would be ideal to skip RGBA and just have raw height data). I could probably add this to babylon by following the existing example if this is a feature people want. Once again I'm a total 3D noob, so if there is a much more trivial solution please let me know :D. I'm also willing to contribute, but I just don't want to make the wrong contribution.
-
BABYLONJS never ceases to amaze me, love you babylonjs, love you JavaScript and of course glsl. My next agenda is water bodies, trees and some jungle rocks just a sample proto... https://www.babylonjs-playground.com/#Z2TKLH
-
Hy there, I've been trying to implement this type of canyon but it seems impossible with heightmap, and then i found geometry builder, i think it's perfect for that but there's no tool or tutorial available to use it yet. Is there any way i can get around with this?
-
Hello, Raycast TerrainMap and get MixMap %'s? CONTEXT: Raycast over a Terrain Map... and determine the type of terrain (floor, rock, grass, etc) where the Ray Intersects mesh. Looking at Mixed-Map-Materials and Facet-Data... QUESTION: is there a way, to get the MixMap through a Raycast Intersection? Or any suggestions on detecting floor, rock, grass... thx. Kind regards, UPDATE: using this playground, stepping into raycast... http://www.babylonjs-playground.com/#7CPS7 Found: results[0].pickedMesh, pickedPoint, collisionGroup, looking around... : ) .subMeshes.materialIndex?... DEMO-TEST: fork Multi-Map playground and add the touch raycast. : ) Worked perfectly - Clickable Multi Map playground (debugger on cast): https://www.babylonjs-playground.com/#E6OZX#7 looking around... AbstactMesh.collisionGroup? faceId? UPDATE: idea of how to do this, need to get the mixmap.png rgb at the location of the getTextureCoordinates()...greatest intensity wins. And... looks like Context2D can do that... (perhaps) https://www.babylonjs-playground.com/#1UCP5L#5
-
Yo @NasimiAsl ... You still around ??? I need your expertise bro... I still can get Texture Atlas at the shader level... Whenever I try use GLSL fract() to tile into the texture is leaves edge seems... You tried to help once with some custom 4 tapping code... but never really worked ... especially from far away ... Anyways... I am ready to release the 3.1 beta but I CANNOT with the terrain builder like it it... Terrains will play a big part in your "Unity-Like" development using the BabylonJS Toolkit... So please bro... if you got time... I need you to help me fix that shader part... I can send you the whole project so you have the code to work with. I actually have a small list of things I need to get working... but I can at least release the toolkit if I can just fix the texture atlas problem for my terrain builder
-
Hey guys, I'd like to know if there is a way to represent an animated polyline moving from point A to point B on a mountainous terrain. The idea would be to show a track like this: https://www.relive.cc/ , you can see it in the demo video. I understand that this functionality does not exist in Babylon, and from what I've read, the Babylon.Ribbon only allows for vertices to change position but not for adding new vertices. But anyways, what would be the steps for me to implement it from scratch? Thanks!
-
Hi, I'm creating a game that player can walk over terrains with lots of slopes. How can I make my player rotate accordingly to the angle of the slope? This is how it's currently working: And this is how is must work (I've changed the angle manually): I'm using Box2D plugin to generate the terrain accordingly to an image. That's the reason of all these bodies. Thanks!!
-
Hi folks! I've been working on putting together all the demos I've been working on in order to create a Player that can traverse a terrain correctly and will ONLY slide down the terrain if the Player detects a VERY steep slope ( X rotation should be able to be chosen by a parameter, the default set at 85 degrees on the X-Rotation axis ). I've created a play ground in order to demonstrate what I have done so far. I need some help to slide down steep terrain like in World of Warcraft. I'm VERY close but can't seem to figure out how to solve the above problem. Please be patient with me! I break easy! I have barely posted anything in the time I've come back to the forums after a 4-year hiatus. Also, yes there are visible rays that are attached to the player because I was trying to detect the steep x-rotation slope using raycasting. Without further adieu, here's the link to the playground : https://www.babylonjs-playground.com/#GDYDUL#2 Thank you all so VERY much for your help, kindness & patience! Once the playground is fixed I will leave it up for anyone else who needs this type of character / terrain controller! Mythros
-
Hello, I'm trying to implement the code from this tutorial in a game I'm making. Actually I can make the holes on the texture using bitmapData. This is how I'm doing: this.bmd = game.make.bitmapData(360, 150); this.bmd.copy('ground'); //ground = image key //Makes two "holes" this.bmd.blendDestinationOut(); this.bmd.circle(50, 10, 20, 'rgba(0, 0, 0, 255'); this.bmd.circle(70, 10, 20, 'rgba(0, 0, 0, 255'); this.bmd.blendReset(); this.bmd.update(); this.ground = this.add.sprite(0, 630, this.bmd); this.game.physics.arcade.enable(this.ground); this.ground.body.allowGravity = false; this.ground.body.immovable = true; However, when I move my player, it walks like if there's no hole on the ground: How can I fix this?
-
Hi peeps, I've already published a similar topic not a while ago, but we couldn't really reach any conclusion: http://www.html5gamedevs.com/topic/32079-sprite-occlusion-for-performance/ I have this demo: http://devel.arinnova.com/tests/3dmaps/babylon_demo/ I'm trying to get a similar forest to this three.js scene: https://www.piste.io/#!/cortina . Notice how the forest is really dense and the FPS are really good. What I've already tried without success: 1) Loading meshes instead of sprites and applying LOD mechanism resulted in very low FPS. 2) Using mesh instances instead of sprites, still very low FPS 2) Temechon kindly helped me and coded a LOD function for sprites, but unfortunately it was more or less the same FPS as without the LOD. 4) Showing all the 54k trees, but using a particle system instead of sprites, which helped to reduce the draw calls, but the FPS were still low. 5) I've implemented a "poor man's LOD". I separated the 54k trees into 9 chunks, each chunk corresponding to a specific area. Then at every frame I calculated the distance from the camera to the central point of each area. If it was close enough to the camera, I showed the area trees and if not, I removed them. This way at each frame I had to calculate distances to only 9 points instead of 54k points, which helped but visually it was not pretty at all. Even applying a brown texture on the terrain underneath the trees, the chunks of trees appearing and disappearing all at once are very noticeable. 6) I also reduced the tree image size to 128x128, just in case, but I'm not sure it had an effect on FPS. Using an image of a pine tree or a leafy tree would create much more perception of a dense forest, but unfortunately I can't use those. The scene is a winter map of a specific real-world area with leafless trees and I'm trying to be as realistic as possible. A silly idea I've also tried was using an image of a group of trees instead of an image of a single tree. It obviously looked fake, especially when rotating the camera. Some other ideas that I've had but have not tried: Solid Particle System -> as it has more effect on performance than a simple particle system and I've already tried that. Octrees -> could this help me? I've read the tutorial but I'm not sure I understand how could I apply it to sprites. I don't know how camera.maxZ works internally, but is there possibly any way to apply it only to sprites, so the nearest sprites only are visible? Could I implement my own camera that does this? tldr; I'd like to show ~200.000 trees in my scene with minimal performance drawback. Thanks a lot in advance!
-
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.
-
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: http://puu.sh/wMwsg/28b1609d74.jpg
-
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 http://www.vertexasylum.com/downloads/cdlod/cdlod_latest.pdf but would like to see how others have handled it. I have looked at github.com/darrylryan/BabylonTerrain and github.com/felixpalmer/lod-terrain 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? -
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 -
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
-
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
-
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.
-
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', "http://i1198.photobucket.com/albums/aa455/BelindaSaxondale/album/HeightMap.jpg", 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: http://www.babylonjs-playground.com/#1CUE8G#5 . I achived something like this here: http://www.babylonjs-playground.com/#1CUE8G#3 but I don't think it's effective way.
-
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
-
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!
-
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..
-
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: http://www.babylonjs-playground.com/#296YBY#2
-
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!
