v3

[brianzinn]

I have been absolutely swamped with work the last few weeks. Lots of working till midnight and that will continue at least another week, but then v3 will be out sometime after that :)

There are currently 2 v-next branches. v3 and v3-proper. v3 was an experimental branch where babylonjs-loaders was a separate library that relied on another separate library for the Scene and Engine context. I was hoping it would provide a path for a vanilla solution that didn't require this reconciler necessarily and the babylonjs-loaders project could be used on both paths. It turned out to be a bit of a nightmare to work with - it required a lot of linking various projects and dependencies to work correctly and I think it would be a detriment to a clean developer experience and make it even harder to contribute, so abandoned that idea (and branch). The other thing I wanted to do was on useRef to not have a myRef.hostInstance. I made a lot of changes in the v3 branch reconciler to support that and found that the fiber was not swapped when instances changed or moved around and additionally there is a built-in way on the reconciler 🤦 to provide the ref and still maintain the existing structure, which allows cleaner encapsulation and not polluting the babylon objects. Additionally, I added in v3-proper some initial code that will (even declaratively) allow the babylon inspector to display custom metadata (and even actions) for react-babylonjs! So, I need to bring in some bug fixes and also the code where I added ability to specify primary or secondary renderer (with a fix for re-using same renderer when scene changes, which logs errors in console from react). I need to backport a few fixes from v3 to v3-proper and it will be set for a new beta release.

TLDR: v3-proper will be the new v3 (ignore the v3 branch).

[dennemark]

Thanks for the great wrap up of recent developments! Am looking forward to try out v3 in january! :)

[dennemark]

Hi Brian! Congrats to the recent update! I already read a bit through the recent changes and am curious to try out v3!
One thing I observed: The seperation of the api into its own page seems great, however it is currently missing remarks on hooks and model loaders. Maybe we can even wrap up this issue #87 if we add a description to the different model loaders. Hope to try out the assetmanager soon :)

Btw. I will try to reply this week to the nodeMaterial hook #105 . I am wondering how I should contribute the hook. It seems the storybooks are still based on v2. Will you still seperate them from this respository?

[brianzinn]

@dennemark You are right about docs on the hooks - completely missing!! I will work on adding that this week (not Typedoc just manually for now).

For a node material hook - probably just add a new .ts file and export it and perhaps a storybook story showing usage.

As for storybook it will stay in this project for the foreseeable future as it's really easy to test changes without npm linking and keeps the storybooks up-to-date - in fact, all stories should all be working against v3.

[gauravarya83]

Hi Brian! congratulations and thanks for the latest update!
I have a question regarding useBabylonScene & useBabylonEngine hooks, seems these are removed in new version. Can you guide me how to get scene and engine in child components?

[brianzinn]

@gauravarya83 I just tried an example and it works:

const JustBox = () => {
  const scene = useScene();
  console.log('scene:', scene);
  return <box size={2} name='box1' />
}

Thanks for all your feedback today - very helpful. Create a public repo and github issue and we can work through them. Cheers.

[gauravarya83]

Must be my bad then, let me investigate and put it in a public git, if it still does not work.

[gauravarya83]

Hi @brianzinn , I just investigated around this, and it is useEngine which is null not useScene.

Sharing git in a short while.

[gauravarya83]

Here is the git link: https://github.com/gauravarya83/playground
useEngine is null in lines 6, 7 of BoxedModel.js
To make it work for now, used const scene = useScene(); and then scene._engine...

I will now tryout the deep clone thing, will update you.

[brianzinn]

I agree that it should work as you have described as that is more intuitive. I will roll out a new version - have just put the fix on master, but want to add another code change before NPM update. thanks @gauravarya83 !! :)

[brianzinn]

hi @gauravarya83 you can do mesh.clone() yourself from a ref (it's a deep copy). Better with an example (and I have not tried this) just typing a thought out:

import { useSceneLoader, ...} from 'react-babylonjs';
import '@babylonjs/loaders';

const MyModel = ({ rootUrl, sceneFilename, parentBoxPosition }) => {
  const sceneLoaderResults = useSceneLoader(rootUrl, sceneFilename);
  
  useEffect(() => {
    return () => {
      // console.log('disposing the sceneloader results.')
      sceneLoaderResults.dispose();
    }
  }, []);

  const [parentBox, _] = useState(() => return sceneLoaderResults.meshMap['parent box']}
 
  return <>
      <abstractMesh fromInstance={sceneLoaderResults.rootMesh!} {...rest} />
      <mesh fromInstance={parentBox} position={parentBoxPosition} />
    </>
}

If that doesn't work - create an issue and we can work through it. If you have a public mesh we can use that as an example. Try to use the Scene Explorer to see if you have created the mesh - if it's in the same position as the original then it wouldn't be visible.

[brianzinn]

@gauravarya83 no worries at all - update your github and I can look - just comment where you are stuck. you've been really helpful with getting v3 out 😄

[gauravarya83]

Thanks @brianzinn I have updated the same git repo https://github.com/gauravarya83/playground
Here I have tried cloning/instancing in 3 components, please check Cloned, Cloned1 and Instanced.
You can uncomment the component you want to run in the App.js file

My objective is to have clones with working animations

PS: One challenge that I suspect is that this model has 6 meshes (one for each material inside the model and one for root)

[gauravarya83]

@brianzinn please let me know.

[brianzinn]

hi @gauravarya83 sorry for the delay. There is a playground example called Instanced Bones, which is what I used to change your Cloned page:

import { useEffect } from "react";
import { Vector3 } from "@babylonjs/core";
import { useSceneLoader } from "react-babylonjs";
import "@babylonjs/loaders/glTF";

const Cloned = () => {
  const sceneLoaderResults = useSceneLoader("./", "Boy.glb");

  useEffect(() => {
    return () => {
      sceneLoaderResults.dispose();
    }
  }, [sceneLoaderResults]);

  return <>
    {[...Array(3).keys()].map((b, i) => <box key={i} name={`box${i}`} position={new Vector3(i * 2, -0.5, i * 2)}>
      {(i > 0) &&
        sceneLoaderResults.meshes.filter(mesh => mesh.subMeshes && mesh.subMeshes.length > 0).map(mesh => (
            <instancedMesh name={`${i}-${mesh.name}`} key={`${i}-${mesh.name}`} source={mesh} position={new Vector3(0, 0.5, 0)} />
          ))
      }
    </box>)}
  </>
}

export default Cloned;

One of your meshes has no geometry, so it can't be instanced, but looks to work okay.

There is something about the SceneLoader that it won't reload the same model. I will probably need to write something to allow cache clearing. You will see if you load the mesh and then try to load it again in the same scene. Let me know how that goes.

[gauravarya83]

This is awesome, many thanks @brianzinn .. I will check further and let you know!!