SkinnedMesh object not being rendered when default state is out of view

šŸ§‘ā€šŸ’» Technical Support
1

Hello everybody,

Iā€™ve been running into some issues with a skinned mesh character of mine popping in and out of view seemingly randomly if you get close to the character.

If the character is out of view in its a-pose default state it stops rendering even if the animated character is still in plain sight.

The issue does not occur in external glTF viewers such as glTF viewer or gltf.report, but it occurs in both the studio editor and cloud editor. This lead me to assume that it is related to optimization or camera culling inside the engine.

All posts related to this issue Iā€™ve found so far suggest disabling Frustum Culling as the main method of fixing it, but on my end none of the three.js methods worked since they depend on the .traverse() method that the Cloud Editor does not recognize.

Iā€™d be grateful if anyone could share the code I could use to disable culling if you encountered similar issues before!

2

Hey Marcel,

Have you checked the size of your model in world space? Is it huge? You can probably solve the issue by scaling it down and bringing closer to the camera.

3

Itā€˜s the opposite actually, the model is rather small, less than 2m tall in world scale.

4

What if you do the opposite and scale it up?

5

The problem unfortunately persists at various scalesā€¦ Bigger and smaller

6

Apply this component to your object in Studio and let me know if it works:

import * as ecs from '@8thwall/ecs'

ecs.registerComponent({
  name: 'disable-culling',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  add: (world, component) => {
  },
  tick: (world, component) => {
    const object3D = world.three.entityToObject.get(component.eid)

    object3D.frustumCulled = false
  },
  remove: (world, component) => {
  },
})
7

First of all, thanks again for all the updates!

I am running into some issues importing the component.

If I understand correctly, working in the cloud editor, this should go into my app.js, correct? I made this assumption based on all the other components being registered there.

If I do that, I get an error stating that the '@8thwall/ecs' module cannot be resolved. Without it, I get a reference error, saying that ecs cannot be resolved.

I also tried adding object3D.frustumCulled = false to my character directly, similar to setting its position with object3D.position.set() inside of the component that spawns my objects, which did not throw any exceptions, but also did not seem to make any difference, so I am assuming I am not using it properly.

8

If youā€™re using cloud editor, Iā€™ll have to write up a different version. Are you using AFrame or just threejs?

9

From my understanding, I am using A-Frame alongside Three.js since I am creating my entities using document.createElement('a-entity').

Admittedly, the lines where Three.js ends and AFrame starts are still somewhat blurry to me, since I lack experience. Sorry for the confusionā€¦

The scene itself is set up inside of my body.html, basically only including an ambient light, directional light and the image target that triggers the spawn-component. My project is basically a heavily modified version of the Image Target + SLAM Manipulate 3D Model example project.

If there is a good way I could share the project files as well as the model I am working with without publishing it, I could also do that to avoid further confusion through my mediocre explanations :sweat_smile:

10

No worries! Share your project with our ā€œsupportā€ workspace using this guide.

(Type ā€œsupportā€ into the field)

1 Like
11

Hey Marcel,

Iā€™ve identified the issueā€”it looks like the origin positions of your models are quite different from their actual location. Are you working in Blender? If so, make sure to ā€œApply all transformationsā€ and try positioning your models as close to the origin as possible.

Here are some helpful links:

If youā€™re still encountering problems after that, try registering this component and adding it to the problematic objects:

AFRAME.registerComponent('no-cull', {
  init() {
    this.el.addEventListener('model-loaded', () => {
      this.el.object3D.traverse(obj => obj.frustumCulled = false)
    })
  },
})

Let me know if that helps!

1 Like
12

I was aware of the models origins being shifted quite significantly, unfortunately applying the transformations tends to break the model/rig at times, which is why I was trying to avoid it.

Iā€˜ll give it another shot and also test the component you provided first thing tomorrow!

13

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.