Sign in to follow this  
mrslip777

I want to make the background of the RenderTexture transparent

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.