Poor user-interaction feel when clicking on entities

Questions
,
1

Hi all,

I’ve been working with a scene that visualizes 3D graphs (edges and nodes) as meshes, and have been experiencing awkwardness and poor user-interaction when clicking on entity meshes.

The clicking is technically working as expected-- I am typically able to click on pickable meshes to select them-- but the feeling of the user-interaction leaves a lot to be desired. I experience this in scenes where the meshes are loading and rendering smoothly, so there is not a larger performance issue interfering with clicking interactions.
Here’s what I’m noticing while working with both a mouse and a trackpad:

  • It often seems like a quick click (one where the user quickly taps the click but doesn’t hold down for any substantial amount of time) doesn’t trigger the selection. Clicking “with intention” seems to work much more effectively, ie, holding down for a small amount of time
  • Clicking from medium-to-far away often doesn’t trigger a selection
  • There seems to be a delay between a successful click and the entity highlighting
  • There generally seems to be some issue with clicking the most z-forward mesh effectively when meshes overlap from the user’s perspective in the 3D space.

Have others experienced similar awkwardness?

Some relevant code pieces for context:

    /**
     * De-Isolates a graph Entity. De-Isolation is visually
     * represented by setting the Alpha value of the Entity.  In addition
     * the enity becomes selectable, selectability is allowed
     * as long as the entity is not deisolated.
     * The Alpha value representing De-Isolation is predetermined.
     * @param entity - A graph Entity.
     */
    public deisolateEntity(entity: Entity): void {
        let index: number;

        if (entity instanceof Node) {
            index = this._isolatedNodes.indexOf(entity);
            if (index > -1) {
                this._isolatedNodes.splice(index, 1);
            }
            entity.mesh.isPickable = false;
        } else if (entity instanceof Edge) {
            index = this._isolatedEdges.indexOf(entity);
            if (index > -1) {
                this._isolatedEdges.splice(index, 1);
            }
        }

        entity.setAlpha(Constants.NON_ISOLATE_APLHA);
    }

    /**
     * Selects a graph Entity. Selection is visually
     * represented by adding the Entity to a Highlight Layer.
     * @param entity - A graph Entity.
     */
    public selectEntity(entity: Entity): void {
        if (entity instanceof Node) {
            this._selectedNodes.push(entity);
            this._highlightLayer.addMesh(entity.mesh, Constants.HIGHLIGHT_COLOR);
        } else if (entity instanceof Edge) {
            this._selectedEdges.push(entity);
            entity.setSelected(true);
        }
        this._graph.updateEdges();
    }
2

What is the complexity and performance of your scene in general? User interaction will feel increasingly janky as performance degrades, so optimising your scene as much as possible can help.

With picking at distance, especially on smaller screened touch devices, you’ll often need to create an invisible hit/picking target and potentially one that maintains its size relative to the screen, irrespective of distance to the object (you can take a look at the Babylon.js core gizmo code to see how this can be done).

3 Likes
3

Would be awesome if you could share a repro ?

1 Like