Sign in to follow this  
marcusfu

How bind webGL texture current to shader on PIXI.Mesh?

Recommended Posts

Hi,

I want to create a mesh with shader, and through uniforms webGL textures to shader, 

I'm able use pixiapp.renderer.gl.createTexture, it works.

613919283_ScreenShot2020-02-12at11_31_04AM.png.a06447ad950b22355c30549595ae3a16.png

But other sprite in pixiapp(PIXI.application) stage also force to mesh's webGL Texture

1144526680_ScreenShot2020-02-12at12_05_56PM.thumb.png.43fb55ef98061a9882facdf51bb7f44e.png

is webGL texture binding index confusion? (gl.TEXTURE0)

maybe need to use pixi webgl abstraction?

does anyone have idea?

best regrads.

 

 

Share this post


Link to post
Share on other sites

Hello!

PixiJS binds textures automatically, you put a link to texture in shader uniform - and it'll work: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js

However, you want to upload texture for yourself. In that case you can use our texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js

You dont need to create gltexture nor to bind it. Just call texImage2D inside "upload" method. As for texture params, you can either set them in baseTexture wrapMode/scaleMode, either override "style" method of resource, it has the same signature as upload.

If you worried that PixiJS operations wont be optimal, you can snoop them through https://spector.babylonjs.com/ and see that texture params are exactly the same.

Welcome to the forums!

 

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

However, if you do manual binds and other stuff, please call "renderer.reset()" method so pixi knows that someone else worked with that context. Yes, we store current boundTexture and active location top optimize our webgl commands sequence.

Its here: https://github.com/pixijs/pixi.js/blob/22c9cc00adaafbfd3a3f51dc74f3c9b4925686dd/packages/core/src/textures/TextureSystem.ts#L127

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

thanks for answer.

I try to use texture resource API: https://pixijs.io/examples/#/textures/gradient-resource.js 

1071998288_ScreenShot2020-02-14at10_57_57AM.png.3256c6832b180c215eee9ec357e2756d.png

It work like that: 

3530813_ScreenShot2020-02-14at10_57_39AM.thumb.png.de828df8e32e3c978c2ed7e59d98817b.png

The texture resource only show one frame, upload function only run once.

How update gl.texImage2D by different data?

I try to bindTexture on custom data update function,

438301980_ScreenShot2020-02-14at11_42_26AM.png.a697023c35df7ebe7a1f84ae2a26ac52.png

but other object(sprite, geometry) that add after mesh still force to mesh's texture.

702438036_ScreenShot2020-02-14at12_05_05PM.thumb.png.77bbd1322ef25c15ce51338c9aff6d48.png

Share this post


Link to post
Share on other sites

easy, just call "baseTexture.update()" , it will chang all updateID's , and TextureSystem wlll see that texture was changed on bind: 

https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/BaseTexture.ts#L507

https://github.com/pixijs/pixi.js/blob/1d09bfca1ae1a2fcdcca4c8a80ed59f605abcd76/packages/core/src/textures/TextureSystem.ts#L141

When you call "baseTexture.setSize()" it changes ID's too.

Actually, if its only the format you've changed, you can just set "baseTexture.format" and use our regular BufferResource.

As for bind problem you encountered, I think I need to see your demo to solve that.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Thank for answer again!

Actually, I try to make video yuv to rgb in pixi.texture.

After decoded video data bind to three textures(yTexture, uTexture, vTexture),  pixi.shader trans to rgb values in pixi.geometry,

when video decoded data keep coming, that need to update textures(yTexture, uTexture, vTexture).

It's ok that run only one yuv to rgb geometry in canvas, but add other sprite, the textures confuse problem happened.

attach demo code.

pixi_YUVRGB_demo.zip

 

Share this post


Link to post
Share on other sites

I see you've tried many things

1. re-creating TextureSystem second time

2. resetting the renderer state, binding/unbinding resource to baesTexture

3. binding/unbinding resource to baseTexture on every upload

Unfortunately, that all should not affect behaviour. 

I dont know what is wrong with your case, I dont actually have websocket server with a video locally.

Even without video, I dont know what is supposed result of that demo and what you see is wrong with it.

Can you provide more information? I'm sure I can fix that and make your code much smaller if I at least see the bug with my eyes

However, you use pixi 5.2.0 - maybe 5.2.1 or dev version ( pixijs.download/dev/pixi.js ) will work better, I remember we fixed something related to texture bind

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.