How to combine Babylon.js and Pixi.js with PBRMaterial

yang_liu · August 31, 2019, 6:53am

I’m trying to mix pixijs and babylonjs. According to the official example, I added PBRMaterial to the scene and found that the rendering was wrong. Who can help me?
I use pixijs only to use pictures as background images of scenes.

The error example is shown below:

The backgroundimage changed color automatically.
PBRMaterial cannot take effect.
https://jsfiddle.net/vr6wd9sm/

JohnK · August 31, 2019, 8:28am

Interestingly if you comment out one of lines 25 or 26 and only apply PBR material to one object you do not get the problem. Needs someone more knowledgeable than me to know why.

Deltakosh · August 31, 2019, 2:12pm

pinging @sebavan

sebavan · August 31, 2019, 2:16pm

Yup I am on it but pretty weird so still digging in, it looks like the textures are breaking for some strange reasons.

sebavan · August 31, 2019, 2:29pm

The weirdest part is that sometimes it just works…

JohnK · August 31, 2019, 2:34pm

This color change happens when it does work with both sphere and ground. Just one mesh having PBR results in original color for pixi image

sebavan · August 31, 2019, 2:49pm

Ok so babylon has some async loading operations that assumes a certain states, it looks like the best is to wait for babylon to have loaded all of its resources before starting Pixy:

https://jsfiddle.net/fjyqmtv3/

Here I only defer three seconds to ensure all the textures and dependency readyness. This could be done by checking the ready state of the scene.

For instance the PBR uses some postprocess under the hood to kickstart some of the required dependencies. Those happens on texture load so out of the render loop and might therefore break the shared state.

yang_liu · August 31, 2019, 4:48pm

thank you. It can resolve a part of question, I find background image disappear when I move ground and sphere leaving off screen

sebavan · August 31, 2019, 6:02pm

Something looks wrong with the VAO in pixy Could you check with them ? I wonder why the reset does not look like resetting everything.

yang_liu · September 1, 2019, 4:28am

OK, thank you. I will reply here once I get the answer.

Hackerham · September 7, 2019, 9:34am

Does BabylonJS have reset() function like pixi? If not , then that’s solution:

pixiRenderer.reset();
pixiRenderer.render(stage);
pixiRenderer.reset(); // <-- i've added it

I think that pixi binds vao, and because babylon isn’t statles, nor does it have reset operation, it just assumes that everything that is bound is his to manage, and modifies that vao

First reset() notifies pixi that someone worked with context and there’s no guarantee on stuff that is already bound in context, second reset() that it needs to unbind everything before some strange guy uses it

If BabylonJS doesnt have reset() function like threejs or pixijs, here’s pixi implementation just in case you guys wonder what the heck is it:

github.com

pixijs/pixi.js/blob/dev/packages/core/src/Renderer.js#L403


    super.resize(screenWidth, screenHeight);


    this.runners.resize.run(screenWidth, screenHeight);
}


/**
 * Resets the WebGL state so you can render things however you fancy!
 *
 * @return {PIXI.Renderer} Returns itself.
 */
reset()
{
    this.runners.reset.run();


    return this;
}


/**
 * Clear the frame buffer
 */
clear()

github.com

pixijs/pixi.js/blob/dev/packages/core/src/framebuffer/FramebufferSystem.js#L435


        {
            this.disposeFramebuffer(list[i], contextLost);
        }
    }


    /**
     * resets framebuffer stored state, binds screen framebuffer
     *
     * should be called before renderTexture reset()
     */
    reset()
    {
        this.current = this.unknownFramebuffer;
        this.viewport = new Rectangle();
    }
}

github.com

pixijs/pixi.js/blob/dev/packages/core/src/renderTexture/RenderTextureSystem.js#L169




    resize()// screenWidth, screenHeight)
    {
        // resize the root only!
        this.bind(null);
    }


    /**
     * Resets renderTexture state
     */
    reset()
    {
        this.bind(null);
    }
}

github.com

pixijs/pixi.js/blob/dev/packages/core/src/geometry/GeometrySystem.js#L201




    // TODO - optimise later!
    // don't need to loop through if nothing changed!
    // maybe look to add an 'autoupdate' to geometry?
    this.updateBuffers();
}


/**
 * Reset and unbind any active VAO and geometry
 */
reset()
{
    this.unbind();
}


/**
 * Update buffers
 * @protected
 */
updateBuffers()
{

github.com

pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureSystem.js#L165


        gl.bindTexture(gl.TEXTURE_2D, this.emptyTextures[gl.TEXTURE_2D].texture);
        this.boundTextures[location] = null;
    }
}


/**
 * Resets texture location and bound textures
 *
 * Actual `bind(null, i)` calls will be performed at next `unbind()` call
 */
reset()
{
    this._unknownBoundTextures = true;
    this.currentLocation = -1;


    for (let i = 0; i < this.boundTextures.length; i++)
    {
        this.boundTextures[i] = this.unknownTexture;
    }
}

yang_liu · September 7, 2019, 5:13pm

thank you, this is final demo.
The answer is completed by @Hackerham and @sebavan

Topic		Replies	Views
Use a Pixi.js texture in Babylon Questions	14	1982	October 20, 2019
Issues with PBR Material on BabylonJS version 4 Bugs	20	2616	November 7, 2019
Object Flickers while changing the material of the mesh Questions material	6	918	October 6, 2020
Muiti scene & PBRMaterial Bugs material	10	500	October 24, 2019
Weird Shader Effect When Using PBRCustomMaterial On Imported Models Questions shader	4	903	April 12, 2019

How to combine Babylon.js and Pixi.js with PBRMaterial

Related topics