Jump to content

I want to make the background of the RenderTexture transparent


mrslip777
 Share

Recommended Posts

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
Link to comment
Share on other sites

  • mrslip777 changed the title to Replacement bindRenderTexture and bindRenderTarget at PixiJS V5

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 by ivan.popelyshev
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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 by mrslip777
Link to comment
Share on other sites

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

スクリーンショット 2020-09-13 20.09.13.png

Edited by mrslip777
Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

  • 5 weeks later...
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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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

showlive2dmodel.png

background.png

Link to comment
Share on other sites

  • 4 weeks later...

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 by mrslip777
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...