ptsans

Transforming texture within geometry

Recommended Posts

Hi, help me figure out how it works!

I have an abstract texture atlas as shown below.

image_2021-01-11_14-47-46.png.224342eb50135c5d61ba8fcf80b97b0e.png

Then I create a simple mesh from geometry (red borders) and material (each geometry has its own uv coordinates, matching the atlas).

image_2021-01-11_14-53-53.png.60dc7f23784c1894764c9880d9e4df8f.png

How can I transform a texture tile within a geometry, without changing the geometry itself, as shown below?

image_2021-01-11_14-55-09.png.a6fe9a0b95c0bb9676fa4bf716536838.png

Does it have something to do with framebuffers?

Share this post


Link to post
Share on other sites

You need custom shader with this geometry that
1. applies extra transform (matrix) to texture coords in vertex shader
2. in fragment shader, looks in uniforms for texture frame (you have to pass it!!!) and if current UV's are out of bounds - discard the pixel

Parts of code you can take from SpriteMaskFilter: https://github.com/pixijs/pixi.js/tree/dev/packages/core/src/filters/spriteMask

you can make extra Transform variable inside your mesh, specify position/scale/rotation/pivot there , updateLocalTransform() it, take the worldTransform matrix to uniforms.

If you want complete solution - sorry, you have to wait when someone will have 10-15 minutes for that, i dont have now ))))) 

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...

  • Recently Browsing   0 members

    No registered users viewing this page.