Shadow95

heightmap and physics problem

Recommended Posts

Hello, I have an image which I created bits by bits with hand includes only black and white areas to use in heightmap creation. Also, I have two spheres named as cat and rat. When I disabled the physics the spawn for cat and rat is correct, but when I have enabled with HeightmapImpostor and SphereImpostor, cat is correctly spawned but rat is not the coordinate what I want. You can think of heightmap as a maze only. I want to use its walls only to handle collisions. I did try normal plane and heightmap with different y coordinates, but it did not work. I think only problem is the Impostors. Because I did try Plane and spheres and their impostors without heightmap and it worked. What can I do to create the maze which I want it for only its walls, so I can construct plane + walls + spheres, and no sphere spawn error. 

Note:

I have chosen heightmap because it is simple, with blocks(cupes) walls can be created, but I could not place the cubes on the plane. If you explain how to read from image and understand the color, and how to use plane to place the cubes or not, I believe I can create walls. I have tried canvas and image, but only value I can get is 0,0,0,0 which is nonsense by the way because there are other colors in the image

Forgot to mention I have tried to change ellipsoid and ellipsoidOffset, believing maybe work but they did not

I am using CannonJS, you can suggest another for above mentioned problem to solve

Share this post


Link to post
Share on other sites

Hiya s95!  Ya gotta look at this thing... from user @BitOfGold I think.  It is SO nice... that any maze game programmer SHOULD look it over.

No physics... but darned good collisions.

For YOUR maze.. you need to convert black and white image... to walls of maze (let's start by using boxes, like the PG demo above).

So, you can temporarily turn OFF physics and heightmaps.  Let's concentrate first... on creating basic box walls... FROM your black and white image.

Luckily, a BJS founding father/user named @davrous did a strange project called "QR-Code Maze"... and I'm pretty sure... is uses a black and white image... to create maze walls.  But, I didn't read it.  He might be using an array for the QR-Code image.

https://www.davrous.com/2014/02/19/coding4fun-tutorial-creating-a-3d-webgl-procedural-qrcode-maze-with-babylon-js/

I'm a little busy right now, but this is something, at least. 

I am quite sure that we CAN use black and white pixels from your image... as a 'map' to produce mesh in wanted positions.  The "canvas and image" thing you tried... WILL work.  A simple mistake of some kind... caused your 0,0,0,0 results for all pixel values.  Possibly, the image was not yet .isReady when you tried reading pixels from its buffer.  Perhaps it silently 404'd, too.  *shrug*

I have not done much work with imageBuffers and other context2d things... except maybe this:  https://www.babylonjs-playground.com/#11JINV#58  It just gathers an imageBuffer from a BabylonJS GUI-control canvas, fills it with random colors, and puts it back.  Perhaps helpful, perhaps not.

I will do some study on this, soon.  I'm sure others have comments and helpful playgrounds, too.

An in-playground-code search for 'getContext' might produce a pile of playgrounds where others have played-with context 2d stuff.

http://doc.babylonjs.com/playground?code=getContext

Your project is very cool and interesting!  Stay tuned.  Let's build/position boxes from your image, first.  Later we will add physics and heightmaps... if wanted.  One issue at a time, perhaps.  :)  Talk soon.

Share this post


Link to post
Share on other sites

About the heightmap: the BABYLON physics plugins make a heightmap body out of the "ground" body, but only an approximation, so it only works if the terrain is "soft" (no big height changes).
I think it is better to use boxes for the maze, and heightmap (or a box) for a "soft" terrain.
 

Share this post


Link to post
Share on other sites

Hi @BitOfGold,

not sure what you mean by that? Babylon's cannon plugin (not oimo, as oimo doesn't support heightmap) uses cannon's heightmap, which is actually a wonderful heightmap implementation. It is true that the heightmap should be prepared in a certain way, otherwise the physics engine will not be able to udnerstand it, but it is very accurate. Do you have any example where it is not so?

Share this post


Link to post
Share on other sites

@RaananW I agree, Cannon heightmap is good - the problem is with the algorithm that makes a Cannon heightmap from a mesh.
I made a racetrack with blender, sculpted and about 40k vertices.
The vertices are not at all at a regular grid, and the mesh is not rectangular. Maybe that is the problem, BABYLON's ground works much better in his situation!
The resulting Cannon heightmap was not at all usable, because it had "bumps" where the plugin filled the (sparse) heights.

I'm trying to make an example, because I ported a code from cannon to SHOW the heightmap:
https://github.com/schteppe/cannon.js/blob/569730f94a1d9da47967a24fad0323ef7d5b4119/build/cannon.demo.js#L977

Also I made a better create cannon heightmap that fills the "holes" in the heightmap with a variation of Dijkstra map.
It works much better (for me), maybe someone can use it for a similar problem.
 

Showing is the best telling so I'm back in a few hours...



 

Share this post


Link to post
Share on other sites

Good thinkings, guys.  Thx for the help.  @RaananW... do you remember if any of the entries from the maze-making contest... used a heightmap for its walls?  That would be good to see.

We SHOULD be able to get good no-taper corners and 90 degree angles... with a heightMap...  if the heightMap image has good, clean, no-dither/no-aliasing gray-scale color demarcations at height-change points.

Let's try one.  https://www.babylonjs-playground.com/#131CZC#1

Yeah, ALMOST vertical walls. *shrug*  The image I chose MIGHT have color dithering/anti-aliasing between colors.

Shadow95, perhaps you could try YOUR image in that playground... see what you think.  Using the image to produce a heightmap-based maze... would be easiest.  Other methods are available, just maybe not as easy as this one.  :)  But there are interesting challenges... when using physics for collisions... mainly in navigating the player character.

Share this post


Link to post
Share on other sites

Babylon's heightmap calculator makes a few assumptions - the mesh is square, and that the vertices are sorted in the way CreateGround is sorting them. This is true. The problem is that otherwise it is (almost) impossible to automate.

The solution for that would be to use the MeshImpostor, which will work as well.

If anyone wants to find a way to automate babylon-mesh to cannon-heightmap without those prerequisites, we all will be very happy! 

Share this post


Link to post
Share on other sites

Yes, even cannon heightmap is too slow (for my game, 8 vehicles + many obstacles, powerups and bullets, on a 4-5 yo laptop it runs with 4fps, on my PC 60fps)
I'm now working on Bullet physics on the server side (Node-js , with the wonderful colyseus library)

My code is here but I can't get it to work.
(It works better, fillse the holes and bumps, but I did not use the physics plugin, so this needs some rework)
Maybe after some sleep...
https://www.babylonjs-playground.com/#131CZC#37

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.