Inspector - bug with wireframe not being aligned on mesh

Bugs
,
1

When ever I toggle “Render wire frame over mesh” under the debug drop down, it renders a wireframe that appears to be offset from the mesh that it’s supposed to be covering:

image
image1915×486 90.6 KB

I’ve integrated the debugger tool into my project with the following react component:

import { Scene } from '@babylonjs/core'
import React from 'react'
import { useEffect, useState } from 'react'
//@ts-ignore
import styled from 'styled-components'

function setDebuggerExplorerPaneCSS() {
  const explorerContainer: HTMLElement | null = window.document.getElementById('scene-explorer-host')
  if (explorerContainer !== null) {    
    explorerContainer.style.position = 'absolute'
    explorerContainer.style.maxWidth  = '300px'
    explorerContainer.style.zIndex = '999'
    explorerContainer.style.marginLeft = 'auto'
    explorerContainer.style.height = '100%'
    const hostContainer: HTMLElement | null = window.document.getElementById('inspector-host')
    
    if (hostContainer) {
      hostContainer.style.right = '0px'
      hostContainer.style.position = 'absolute'
      hostContainer.style.zIndex = '999'
      hostContainer.style.marginLeft = 'auto'
      hostContainer.style.height = '100%'
    }

    const canvas: HTMLElement | null = window.document.getElementById('canvas')

    if (canvas !== null) {
      canvas.style.left = '0px'
      canvas.style.right = '0px'
      canvas.style.top = '0px'
      canvas.style.bottom = '0px'
      canvas.style.zIndex = '998'
    }
  } else {
    setTimeout(setDebuggerExplorerPaneCSS, 400)
  }
}

const SceneDebuggerPlain = ({
    scene,
    className,
    sceneLoaded = true,
    setInspectorInUse,
  }: { 
    scene: Scene,
    className: string,
    sceneLoaded: boolean,
    setInspectorInUse: (inUse: boolean) => void,
  }) => {
  const [toggleState, setToggleState] = useState(false)
  const [toggleStateText, setToggleStateText] = useState('debugger')
  const onClick = () => {
    setToggleState(!toggleState)
  }

  useEffect(() => {
    if (toggleState) {
      scene.debugLayer.show()
      setDebuggerExplorerPaneCSS()
      setToggleStateText('exit inspector')
      setInspectorInUse(true)
    } else {
      scene.debugLayer.hide()
      setToggleStateText('inspector')
      setInspectorInUse(false)
    }
  })
  
  return (
    <button 
      className={className + " toggle-debugger"}
      disabled={!sceneLoaded}
      onClick={onClick}>
      {toggleStateText}
    </button>
  )
}

export const SceneDebugger = styled(SceneDebuggerPlain)`
  disabled: {
    cursor: not-allowed;
  }
`

I don’t think the styling I applied to the debugger would be causing any issues as all it does is ensure that the debugger UI is positioned over any other dom elements in the screen.

Does anyone have an idea of how or why this bug is happening?

2

Maybe @carolhmj or @DarraghBurke will be able to help

2 Likes
3

Hello! I also don’t think it’s the styling’s fault, but it might be something with the mesh. Can you see if the same thing happens if you load the mesh in the playground instead of your project?

1 Like
4

I can confirm that yes it still does:

EDIT: I realized that if I comment out the function call on line 114 to create a mesh impostor from the heightmap mesh, the alignment seems to be fixed :confused:

This actually lines up with what I’ve been observing in my project:
the ammojs physics mesh imposter is shifted in someway so that it’s not aligned with the mesh it’s supposed to represent. This causes other objects such as a sphere, to appear to fall through the ground, or the inverse collide with an invisible object.

5

Maybe @Cedric can look into this

6

I’ve just tried with bjs 5.1.0 and with ‘render wireframe over mesh’ or ‘physics’ helpers, I get a perfect alignment with the ground.
I did a fix some days ago, might be related or I missed smth while testing your PG.

1 Like
7

Hmm I don’t see it being fixed. Take a look here (I only updated the camera’s position to make it more obvious):

image
image1920×886 280 KB

Do you see the naked wire mesh in the corner?

9

Physics debug display works

image
image1228×663 128 KB

Whereas wireframe over mesh doesn’t
image
image1240×619 127 KB

Let me try to find a fix.

10

‘Render wireframe over mesh’ clones the mesh with a deep copy. Deep copy also copies physics Impostor and with an impostor delta, it breaks things (with more memory allocated).
PR with the fix coming in a few hours.

1 Like
11
3 Likes
12

Thank you for fixing this! Is there a preview build I can use that would have this fix in it?

1 Like
14

ping @RaananW

15

we publish nightlies. our playground is using these nightlies, so you can test a playground against those changes. Otherwise, it will be included in the next npm release, which will probably happen tomorrow.

2 Likes
16

Oh sweet so y’all are still putting fixes in for tomorrow’s release! There’s one more thing I noticed, I’m gonna try and see if I can replicate it in the playground

1 Like
17

@Cedric @RaananW When you have a moment, please take a look at this one:

Repo steps:

  1. toggle physics grid on
  2. in the console run
    window.addballs()

You will very quickly see that the actual physics object that is supposed to represented by the height map mesh is either shifted, rotated or both in some way that makes the visual representation not correct.

18

That’s expected:

mesh.physicsImpostor.setDeltaRotation(rootMesh.rotationQuaternion || new Quaternion(0, 0, 0, 1))

setDeltaRotation and setDeltaPosition tell the engine how the physics impostor is compared to the rendered mesh.
With the value set for rotation, the impostor will be rotated and the display will not be in sync with the physics.

If you want to rotate the terrain, then use mesh.rotation then create the impostor.

1 Like
19

Gotcha, thank you!

For some reason I thought physics impostors were always 2-way synchronized with their corresponding physics rigid bodies.

20

delta postion/rotation is for adjusting impostor compared to the mesh.
Easy example is when you have a box mesh with its center at the base of the mesh, not at the center.
Then, you need a delta because the box impostor always assume origin to be at the center.

1 Like