AdvancedTexture just appears on rerender

Questions
1

I already posted a question here:

but I am afraid that this are two different problems I have and since I really want to come forward with my project and can’t figure out how to solve my rerender problem, I’d like to state the issue here again.

As requested I opened a git repo:

In README.md I describe the issue as problem 2.

Basically it is that my Rectangle is just appearing on a rerender/resize of the browser and I can’t figure out why.
I want that the rectangle appears after first render.

and here is a sandbox of the code:

I hope anyone can help me to figure out what I do wrong.

Thank you

2

It has something to do with your initial state for the window sizes being equal to 0.

If you replace in your constructor by:

    this.state = {
      windowDimension: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      nodeCount: 0,
      grid: []
    };

it will work.

I think it’s because you create your scene with 0,0 dimensions, so at start the GUI texture is 0/0. Only after a refresh does the texture is recreated with the right dimensions.

1 Like
3

Thank you a thousand times for taking time on this @Evgeni_Popov !!!

I still don’t understand a 100% how the process works, because I assumed that the texture size is taken from canvas. (This way I wonder how to explicitly tell the dimension for the GUI texture?)

I guess my lack is more about reacts lifecycle management.

The canvas has correct size, due to:

    componentDidMount() {
        this.updateDimensions();
        window.addEventListener('resize', this.updateDimensions);
    }

and it is also render with window sizes on first render:

render() {
        const { height, width } = this.state.windowDimension;
        return (
                <BabylonScene onSceneMount={this.onSceneMount} height={height} width={width} />
        )
    }

So how could I update the texture size here, apart from your solution?

4

If you put some console.log, you will see that onSceneMount is called before componentDidMount and when onSceneMount is called, width=height=1.

After that, when updateDimensions is called, the engine.getRenderWidth / engine.getRenderHeight methods still return 1/1, meaning the underlying canvas has not been updated.

I don’t know how the react component works, but it seems it does not update the engine width/height canvas sizes. So you should do it yourself, by adding this in updateDimensions:

this._engine.setSize(window.innerWidth, window.innerHeight);

=> save the engine into this._engine from the onSceneMount method.

1 Like
5

Awesome! Thank you really much for your explanation.

Where can I propose changes and enhancements to How to use Babylon.js with ReactJS - Babylon.js Documentation since example code for react is quiet short and I may not the only one who runs into a problem like this.

I found also some requests in other articles that people like to have the same code as functional integration, which is not covered by the tutorial. I just found this code which looks good to me: babylonjs-react - CodeSandbox

6

Contributions to the documentation are always welcome!

You should find all the information you need here:

https://doc.babylonjs.com/how_to/how_to_start

7

Adding @PirateJC for the doc update :slight_smile:

8

Hey @fneitzel definitely let me know what you’d like to update in the docs.

The How to use Babylon.js with ReactJS - Babylon.js Documentation page sounds like the right place to update based on this thread, so you can either run your ideas by us here, OR you can make the changes and submit the PR for review. Totally your call. Let us know how we can help!

Thanks!