donmccurdy / aframe-inspector-plugin-recast Goto Github PK

A-Frame Inspector plugin for creating navigation meshes.

License: MIT License

HTML 1.07% JavaScript 97.69% SCSS 1.24%

aframe-inspector-plugin-recast's Introduction

Navigation Mesh A-Frame Inspector Plugin

🚨 NOTICE: This project is now unmaintained, for lack of a reliable Recast WASM build. See #48 for details.

A plugin for the A-Frame Inspector, allowing creation of a navigation mesh while from an existing A-Frame scene. This plugin should not be used at runtime in the live scene, but only during scene creation.

Create your scene
Use this plugin to create and test a navigation mesh
Export the navigation mesh as a glTF or JSON file
Load the final navigation mesh into your scene as a normal model

Kitchen v2 by Jerad Bitner, on Google Poly.

Introduction

A navigation mesh helps AI agents navigate, and is one way of constraining first-person controls and VR teleportation within a playable area. For information about using a navigation mesh in A-Frame, see Pathfinding documentation in A-Frame Extras.

Installation

Add this script to an existing scene, installing the inspector plugin:

<script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>

Add the plugin component to your scene:

<a-scene inspector-plugin-recast> ...

Configure settings if needed, and press Build.
Close the inspector and test the navigation mesh, either using the usual instructions or the included nav-debug-pointer component.
If things are working properly, use the Export button to save your finished navigation mesh as a .gltf file.
Load the navigation mesh into your finished scene with the documentation in A-Frame Extras.

Configuration

property	default	description
cellSize	0.3	Width/depth of voxel cells used to sample scene geometry. 0.05 — 3.
cellHeight	0.2	Height of voxel cells used to sample scene geometry. 0.1 — 3.
agentHeight	1.6	Minimum floor to 'ceiling' height that will still allow the floor area to be considered walkable. Permits detection of overhangs in the source geometry that make the geometry below un-walkable. The value is usually set to the maximum agent height. 0.1 — 3.
agentRadius	0.2	The distance to erode/shrink the walkable area of the heightfield away from obstructions. In general, this is the closest any part of the final mesh should get to an obstruction in the source geometry. It is usually set to the maximum agent radius. Areas too narrow will be considered "blocked." 0.1 — 3.
agentMaxClimb	0.5	Maximum ledge height that is considered to still be traversable. Allows the mesh to flow over low lying obstructions such as curbs and up/down stairways. The value is usually set to how far up/down an agent can step. 0.1 — 5.
agentMaxSlope	30	The maximum slope that is considered walkable. 0 — 90.

Tips, limits, and performance

This plugin sends scene geometry temporarily to a remote API for processing, and imposes limits on the size of the processed scene for that reason. Suggestions for getting started:

Detailed objects with large filesize may be replaced with boxes to simplify creation of the navigation mesh.
Objects with large dimensions like <a-sky/>, that are not intended for navigation, should be omitted while creating the mesh.
To omit objects from the navigation mesh, delete them temporarily from the scene, or using the selector input.

Improving results when something doesn't look right:

If the navigation mesh is too coarse or inaccurate, try reducing cellSize to increase precision.
agentHeight determines when overhangs will block movement. agentRadius determines how narrow a space is passable.
agentMaxClimb should be just greater than the largest stairsteps or curbs a character can walk over.
For more information, hover over any input in the plugin.
Final cleanup, if necessary, may be done in a modeling tool like Blender.

If you need to create a navigation mesh for larger scenes, run the plugin's navmesh service locally after cloning this repository:

npm run dev

<a-scene inspector-plugin-recast="serviceURL: http://localhost:3000;"> ...

Debugging

This plugin includes an additional component for teleporting around a navigation mesh, nav-debug-pointer. It can be used alongside movement-controls to test out the navigation mesh with FPS-style movement. The cursor will display in green while looking at the navigation mesh, red while looking away, and allows teleporting to any part of the navigation mesh. The movement-controls component supports clamping player WASD movement within the mesh. AI pathfinding is described in further documentation.

<a-entity id="rig" movement-controls="constrainToNavMesh: true">
  <a-entity camera
            position="0 1.6 0"
            look-controls>
    <a-cursor nav-debug-pointer raycaster="objects: [nav-mesh];"></a-cursor>
  </a-entity>
</a-entity>

Adjust settings as needed if the navigation mesh is not appropriate. Final adjustments (correcting distortions, or adding/removing connections to particular areas) can also be applied in any modeling tool.

Credits

Thanks to:

Recast Navigation, used for building navigation meshes.
Jeff Ma for creating a Node.js-friendly build of Recast.

aframe-inspector-plugin-recast's People

Contributors

Stargazers

Watchers

Forkers

chrisberno jafetmorales indigos33k3r dluxio sorskoot netanel-m muhammadandikcahyono qepri yogiprsetya w0lramd ciaran-deegan-davra hrithikwins ingmiguelyepezcivil agui0

aframe-inspector-plugin-recast's Issues

Expose configuration settings in attribute

This plugin is wonderful. It makes navmesh creation so easy!

I wonder if it would be possible to expose the configuration settings as values to the inspector-plugin-recast attribute:

<a-scene inspector-plugin-recast="cellSize: 0.1; cellHeight: 0.1; agentRadius: 0.3; agentMaxSlope: 0"></a-scene>

This way, we can override the default values when reloading the page. It would speed up the development of a scene to allow testing it while the models are being actively worked on.

Can't run server on port 3000 locally.

I try to run the server locally. I can access the example page on port 9966, but the server that generates the nav mesh on port 3000 doesn't load (connection refused). Here's the steps I follow:

Use node 10 nvm use 10.
Use Python 2 pyenv global 2.
Install deps npm install.
Install now npm install -g now (This bit is missing from the documentation).
Start the server npm run dev.
Open the example page on http://localhost:9966/.
Open A-Frame inspector.
Push the Build button.

Result:
An Oops something went wrong alert is shown, no navmesh is generated.

Expected:
A navmesh is downloaded from the server and shown in A-Frame inspector.

How can I generate navmesh locally?

wasd-controls conflict

I do not understand why, but when explicitly adding the wasd-controls controler to the camera rig, then the nav mesh is not working anymore. If remove the component, then it work perfectly.

`
<!doctype html>

<title>Navigation Meshes</title> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.0/dist/aframe-extras.min.js"></script> <script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>

	<!-- Camera Rig -->
	<a-entity movement-controls="speed: 0.15; constrainToNavMesh: true" position="0 0 2">
		<!-- Camera -->
		<a-entity wasd-controls camera position="0 1.6 0"
				  look-controls="pointerLockEnabled: true">
			<a-cursor></a-cursor>
		</a-entity>
	</a-entity>
	
	<!-- Ground -->
	<a-plane color="#333333" shader="flat" rotation="-90 0 0" scale="8 6 1">
	</a-plane>
	<!-- Navigation Mesh -->
	<a-entity gltf-model="#my-nav-mesh" nav-mesh position="0 -0.1 0" visible="true">
	</a-entity>
</a-scene>

Plugin panel remains after exiting inspector

Me again!

Just a heads-up that the Recast plugin panel remains displayed after exiting the inspector:

I'm seeing this in both Firefox and Chrome on Windows 10.

Glitches won't work

Hi,

I came from this thread:
c-frame/aframe-extras#225 (comment)

and tried the examples (like https://cherry-teacher.glitch.me/); they all gave me an
Cannot read property 'groups' of undefinederror once I hit a WASD key.

Thanks,
Dirk

Project is unmaintained

Unfortunately, the lack of a stable and documented build of the Recast library for WASM has become a show-stopper, and I can no longer maintain this project. See #47 for my last attempts to continue supporting it. If a new build of Recast becomes available on NPM, supporting Node.js v14+, and is actively maintained, I may be able to revive this. Until then, I cannot work on the project further.

Plugin script is not found/missing

The plugin script below is resulting in Cannot GET /aframe-inspector-plugin-recast.js

https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js

Building automatically

Hi,

I temporarily put your two FPS style examples here:
https://curious-electric.com/w/experiments/aframe/navmesh/1.html
https://curious-electric.com/w/experiments/aframe/navmesh/2.html
As always, one needs to hit ctrl-alt-i to enter the inspector and build the navmesh first.

A couple of questions/remarks:
a) in example 1 the red cube in the middle doesn't seem to influence the navmesh; why is that?
b) I changed the starting point of the rig in example 2 to x:-11 - hence you start in the hallway and can move in the navmesh all the way up in the dungeon. :-)

and most importantly
c) is there a way to trigger the inspector-plugin (i.e. the mesh build) via JavaScript?

Thanks,
Dirk

Common issues

clamp bounds from origin, relative to cell size?
avoid a-sky and the like

Got strange Error (see message ) at export. So build works and shows export fails ?

I got Uncaught TypeError: Cannot convert undefined or null to object
at Function.keys ()
at C (aframe-inspector.min.js:25)
at k (aframe-inspector.min.js:25)
at S (aframe-inspector.min.js:25)
at A (aframe-inspector.min.js:25)
at aframe-inspector.min.js:25
at THREE.GLTFExporter.parse (aframe-inspector.min.js:25)
at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9046)
at HTMLButtonElement. (aframe-inspector-plugin-recast.js:8881)

I use an OS X , google chrome and i am trying to do 20 files for a project 1 file worked so far ... so it is an awesome tool

THREE.Box3: .getBoundingSphere() target is now required

When trying to use the plugin with A-Frame 1.0.3 I get this errors in the console:
THREE.Box3: .getBoundingSphere() target is now required
TypeError: e is undefined

Compare params & performance vs Blender

Navmesh construction seems vastly slower, and slightly more accurate, than results I'm getting in Blender. Both use Recast, so it's worth investigating to see if there's some precision parameter I'm missing. The default setting, at least, should be quick enough to get something on screen promptly and not bog down the service.

Performance controls

strip normals/uvs
client-side validation against > 50mb meshes
consider using Draco

Export failing for basic scene in Chrome 71

Here is the error.

aframe-inspector.min.js:25 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at C (aframe-inspector.min.js:25)
    at k (aframe-inspector.min.js:25)
    at S (aframe-inspector.min.js:25)
    at A (aframe-inspector.min.js:25)
    at aframe-inspector.min.js:25
    at THREE.GLTFExporter.parse (aframe-inspector.min.js:25)
    at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9280)
    at HTMLButtonElement.exportBtnEl.addEventListener (aframe-inspector-plugin-recast.js:9115)

Here is a video illustrating the issue.

"Cannot read property 'id' of undefined" error

Hi,

first of all, let me mention that my tests of interior like Blender models were all successful, thanks to your work!

My attempts with a somewhat larger terrain worked out, too, but occasionally throw this error on a specific part of the model:

aframe-extras.min.js:1 Uncaught TypeError: Cannot read property 'id' of undefined
    at e.clampStep (aframe-extras.min.js:1)
    at o.clampStep (aframe-extras.min.js:1)
...
at y (aframe8.2.min.js:100)

Any idea why that is?
I can supply the Blender file plus export, if needed.

Thanks, Dirk

Can only produce very vague sloped navmesh

I've been trying to create a very large navmesh that will work with steeply raked stairs and my general findings with this tool are that it simply doesn't produce a mesh with enough detail to cover the stairsteps properly, so I end up with a very blocky bowl shape instead, which usually means that a "player" object in aframe constrained to navmesh isn't following the actual shape of the real geometry very well + gets stuck in all the weird ruts that the tool creates.

I've tried to create decimated meshes of the top surface of my walkable areas manually in Blender and export them (post Blender 2.7 game engine navmesh tool removal) but they seem to be completely ignored by the aframe-extras pathfinding library.

Is there anything special I need to do to create these meshes manually, are there specific geometric rules I need to follow regarding shape, number of triangles etc?

404 on the hosted inspector plugin

Trying to load https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js but getting Cannot GET /aframe-inspector-plugin-recast.js, maybe run dist wasn't done after an update?

Failed to fetch error

This had worked fine until recently.

I now think it is because the file is 7mb.

CORS error / FUNCTION_PAYLOAD_TOO_LARGE for mesh > 5MB

Hi, trying to use this to create a navmesh, but I am hitting a CORS error:

Access to fetch at 'https://recast-api.donmccurdy.com/v1/build/?cellSize=0.3&cellHeight=0.2&agentHeight=1.6&agentRadius=0.2&agentMaxClimb=0.5&agentMaxSlope=30' from origin 'http://127.0.0.1:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This looks very similar to this issue, closed and fixed in January 2020:
#14

Could it be a similar issue again?

doesn't works with a-frame 1.2.0

doesn't works with a-frame 1.2.0, the build button don't have any effect. themesh is not displayed

`inspector-plugin-recast` doesn't work with current A-Frame inspector

I noticed today that inspector-plugin-recast no longer works, likely due to the A-Frame Inspector update.

The interface is present in the inspector, but when I hit "Build", I get the following error:

Nothing is built or able to be exported.

This tool is awesome and much needed, especially considering the direction Blender is taking, so I look forward to being able to use it again with the current inspector.

Thanks for all you do.

Basic vertex/face tweaks

Lightweight edits, if possible.

A-frame 1.2 version don't support keyboard controlls

Hi guys, just a heads up! When navigating with keyboard controls I noticed it does not constrain to NavMesh unless you move back onto version 1.1.

The debug recaster when clicking does constrain and move within the navmesh, however WASD controls on desktop don't work on version 1.2

Thanks!

CORS error

Hi,

Thx for this very useful aframe component. All was working fine until recently. Now, when a try to make an API call (to the public one), I've got the following CORS error:

Access to fetch at 'https://recast-api.donmccurdy.com/v1/build/?cellSize=0.3&cellHeight=0.2&agentHeight=1.6&agentRadius=0.2&agentMaxClimb=0.5&agentMaxSlope=30' from origin 'https://vr.chabloz.eu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is the public API still available?

Thx in advance for your answer and your wonderful work on aframe!

Cannot export navmesh.

Recently, I cannot export the navmesh in the inspector. Strangely I have changed nothing since last working on my project but suddently I keep getting the error below which is preventing me from exporting my build navmesh. Everything was working as desired a few days ago until now. This error occurs every time I press the export button.

aframe-inspector.min.js:25 Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at C (aframe-inspector.min.js:25:175584)
    at k (aframe-inspector.min.js:25:178934)
    at S (aframe-inspector.min.js:25:179479)
    at A (aframe-inspector.min.js:25:179632)
    at aframe-inspector.min.js:25:180130
    at THREE.GLTFExporter.parse (aframe-inspector.min.js:25:180232)
    at RecastPlugin.exportGLTF (aframe-inspector-plugin-recast.js:9046:14)
    at HTMLButtonElement.<anonymous> (aframe-inspector-plugin-recast.js:8881:54)

<!doctype html>
<html>
    <head>
        <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
        <script src="https://recast-api.donmccurdy.com/aframe-inspector-plugin-recast.js"></script>
        <script src="https://rawgit.com/fernandojsg/aframe-teleport-controls/master/dist/aframe-teleport-controls.min.js"></script>
    </head>
    
    <body>
        <a-scene background="color: #FFFFFF" inspector-plugin-recast>
        </a-scene>
    </body>
</html>

Assistance would be appreciated thanks.