I want to make the background of the RenderTexture transparent

[mrslip777]

I want to display a live2d model using PixiJS V5, cubism 4.0 sdk.
Specifically, I am planning to create a Live2DSprite that inherits Sprite and display it by rendering.
However, it is not done at present.
Probably you haven't successfully replaced the bindRenderTexture and bindRenderTarget of PixiJS V4
I am thinking.
Is there a mechanism to change to bindRenderTexture and bindRenderTarget in PixiJS V5?

[reference]
I want to do the following.
https://github.com/avgjs/pixi-live2d

[progress]
Reference video

 

 

	https://github.com/MrSlip777/MZ_talk_live2d_cubism4

[ivan.popelyshev]

If you use latest live2d, you have to port https://github.com/Live2D/CubismWebFramework instead.

If you use old one, then yeah, you have to port avgjs solution. 

bindRenderTarget was moved to "renderer.renderTexture.bind(myRenderTexture)" . Its much easier in pixijs to do rt-related stuff and meshes. I advice you to read the source of pixijs

I have a cold and I cant help you much, but i can give one advice: look up all examples in https://pixijs.io/examples/#/mesh-and-shaders/triangle.js . read the source of pixi mesh

If you do everything right , there wont be direct calls of WebGL, only calls of pixijs geometry, texture and renderTexture systems. Please investigate GeometrySystem, TextureSystem , RenderTextureSystem, FrameBufferSystem to actually understand how does it map to webgl operations.

For pixijs-v5 it should be much easier than for v4, just open your mind , meditate on code and you'll get it.

Edited August 29, 2020 by ivan.popelyshev

[mrslip777]

thank you so much!

I will study with reference to the contents of the reply.

[mrslip777]

Below is the continuation of the project.
https://www.html5gamedevs.com/topic/46091-replacement-bindrendertexture-and-bindrendertarget-at-pixijs-v5/

Somehow, I understand how to render a live2d model.

Currently, it is possible to display the live2d model.
However, the background becomes dark. I want to display the background transparently.

I thought that if you preload BaseRenderTexture from the following description, it will be solved,
I don't know how.
I would appreciate it if you could introduce useful materials.
https://pixijs.download/dev/docs/PIXI.BaseRenderTexture.html

[ivan.popelyshev]

You could just continue it in prev thread...

OK, merged with previous.

Edited September 1, 2020 by ivan.popelyshev

[mrslip777]

thank you for a merge thread.

[mrslip777]

The background is displayed in black.(I want to display only the live2d model on the existing screen).
I think the baseRenderTexture setting is wrong, but I'm not sure.

I would like to know if there is a way to make the background transparent.
The code of the render part is as follows.

※renderer is Renderer
Live2DSprite.prototype._render = function(renderer) {

    //Create renderTexture.
    $gameLive2d.gl = renderer.gl;
    $gameLive2d.canvas = renderer.view;

    if (!this.modelReady) {

        this.texture = new PIXI.RenderTexture.create($gameLive2d.canvas.width, $gameLive2d.canvas.height);
        this.modelReady = true;
        return;
    }

    renderer.gl.activeTexture(renderer.gl.TEXTURE1);

    //Create VertexArray
    vao = renderer.gl.createVertexArray();
    renderer.gl.bindVertexArray(vao);

    //Clear buffer
    renderer.framebuffer.clear(0.0, 0.0, 0.0, 0.0);

    //Draw Live2dModel
    if($gameLive2d._lappLive2dManager){
        
        LAppPal.updateTime();
        renderer.gl.flush();
        $gameLive2d._lappLive2dManager.onUpdate();

    }

    //bind renderTexture
    renderer.renderTexture.bind(this.texture);
}

 

Edited September 12, 2020 by mrslip777

[ivan.popelyshev]

vao = renderer.gl.createVertexArray(); renderer.gl.bindVertexArray(vao);

All vao operations should be done through `renderer.geometry`

Please share your current results, I'll look at it

[mrslip777]

2 hours ago, ivan.popelyshev said:

vao = renderer.gl.createVertexArray(); renderer.gl.bindVertexArray(vao);

All vao operations should be done through `renderer.geometry`

Please share your current results, I'll look at it

Thank you for responce.

①about vao

I replaced vao with the following code. (The result did not change)

renderer.geometry.contextChange();

②current results

When the display target is displayed, the background becomes black.

[reference]
https://twitter.com/KjmCh2s/status/1298019423782141954?s=20

Edited September 13, 2020 by mrslip777

[ivan.popelyshev]

I mean, post minimal project somewhere

[mrslip777]

Due to the rules, it is difficult to post the current project as it is.  Please wait for a while as we will create the smallest project separately.

[ivan.popelyshev]

OK

[mrslip777]

I put the current project below.

It may be a little complicated because it is based on rpgmakermz.

https://www.dropbox.com/sh/qssuxyoeq54830r/AAD7ekxmQslb_ZTt6yWzRgdHa?dl=0

Edited September 15, 2020 by mrslip777

[ivan.popelyshev]

Good enough for me, I'll look at it.

[ivan.popelyshev]

I need json-exported model for it, right? Do I need to install Cubism ? I think i had the key somewhere...

[mrslip777]

sorry. The download destination was not appropriate.
It should be as follows.

1.Download the model from the URL below.
https://www.live2d.com/en/download/cubism-sdk/download-web/

2.Push "Cubism SDL for Web"

3.Unzip

CubismSdkForWeb-4-r.1\Samples\Resources
Hiyori

[yeemachine]

Hi! I've also been looking around for solutions on incorporating Live2D 4.0 into PIXI V5.

Unfortunately, I don't really have the technical skills to really contribute to a solution, but excited to see if there can be a solution/simple example in the future!

For what it's worth, here's a library I've been playing with that ports Live2D 2.0 into PIXI V5, which is slightly different from the V4 integration from AVG. Maybe that example can be of help?

https://github.com/guansss/pixi-live2d-display

[mrslip777]

Compared to pixi4, I found that the background becomes black because the part corresponding to bindRenderTexture is not implemented.
What happens when pixi5 implements a function equivalent to bindRenderTexture?

[ivan.popelyshev]

Sorry, was very busy last week, gonna help one of those days

 

renderer.renderTexture.bind

Edited September 27, 2020 by ivan.popelyshev

[mrslip777]

Thank you for your reply.

That is, replace bindRenderTexture with renderer.renderTexture.bind.
It will be renderer.renderTexture.bind like bindRenderTarget,
Does that mean the argument is different?

[mrslip777]

On 9/27/2020 at 4:41 PM, yeemachine said:

Hi! I've also been looking around for solutions on incorporating Live2D 4.0 into PIXI V5.

Unfortunately, I don't really have the technical skills to really contribute to a solution, but excited to see if there can be a solution/simple example in the future!

For what it's worth, here's a library I've been playing with that ports Live2D 2.0 into PIXI V5, which is slightly different from the V4 integration from AVG. Maybe that example can be of help?

https://github.com/guansss/pixi-live2d-display

Thank you very much. I just noticed the reply.
I will refer to your github.

[mrslip777]

On 9/28/2020 at 12:35 AM, ivan.popelyshev said:

Sorry, was very busy last week, gonna help one of those days

 

renderer.renderTexture.bind

I looked it up myself.
I thought I needed a different code than bindRenderTexture to replace bindRenderTarget with PIXI5.

On the way to checking bindRenderTarget, I thought the following two things were important.
Which variables are equivalent roles in PIXI5?

・baseTexture._glRenderTargets
・WebGLRenderer._activeRenderTarget

[mrslip777]

Now that I've fixed the code, I've updated the zip file.
When you mask line 724 of Live2DInterfaceMZ.js, the screen you want to display in the background is displayed.
If you run it as it is, you will see the girl on a screen with a black background.

https://www.dropbox.com/sh/qssuxyoeq54830r/AAD7ekxmQslb_ZTt6yWzRgdHa?dl=0

[mrslip777]

In changing the bindRenderTexture and bindRenderTarget parts of V4 to V5, the code was modified as follows.
However, the result is not what I expected.
The girl is not always displayed, only for a moment.
What are you missing?
 

var cachedRenderTexture = renderer.renderTexture.current;
var cachedSourceFrame = renderer.renderTexture.sourceFrame.clone();

renderer.renderTexture.bind(this.texture);
renderer.renderTexture.clear();

renderer.renderTexture.bind(cachedRenderTexture, cachedSourceFrame);

 

 

Edited December 6, 2020 by mrslip777