# PIXI.Mesh: Textured Polygon (from Box2D). A question of triangles & uvs?

## Recommended Posts

Hi,

I'm trying to create a textured box2d polygon. I thought this is a common problem, but the resources I find a rare.

Anyway, my progress so far is pretty ok (screen attached). See for yourself: http://jsfiddle.net/georgie/x6yva6v0/2

There are actually two problems to solve.

Problem A: Texturing a polygon (and don't use a mask)

Problem B: (Edit: Already solved, see my response) Transform a group of shapes (rectangles & triangles) to a list of vertices forming a single polygon.

Problem A (Texturing)

The texturing part is nearly done. There is only one problem left: How do I create the UVs to make a texture repeating in the Mesh?

My current version simply stretches the texture over the polygon:

`var newUVS = []var ww = texture.width;var hh = texture.height;for(var i = 0; i< verticesMesh.length; i+=6){  var x1 = verticesMesh[i]%ww/ww  var y1 = verticesMesh[i+1]%hh/hh    var x2 = verticesMesh[i+2]%ww/ww  var y2 = verticesMesh[i+3]%hh/hh    var x3 = verticesMesh[i+4]%ww/ww  var y3 = verticesMesh[i+5]%hh/hh  newUVS.push(x1,y1,x2,y2,x3,y3)} `
Is this because the default shader is not expected to repeat a texture?

Problem B (shapes to vertices)

Never mind! This is solved, see my answer.

My staring point are three shapes generated during the tessellation process in PhysicsEditor (or RUBE)

I have those source points, which are manually placed in PhysicsEditor to form a polygon:  [134, 74,169, 110,386, 110,523,245,572,198,491,120,536,75]

Those points are transformed to this group of shapes. You see two triangles and one rectangle. The crux: the source points are not accessible later in the code. There is just this list of exported shapes available.

`"shape": [   491, 191  ,  386, 202  ,  523, 66  ,  572, 113  ]"shape": [   536, 236  ,  134, 237  ,  491, 191  ]"shape": [   386, 202  ,  134, 237  ,  169, 201  ]`
To create the actuals mesh in PIXI, I want to use PIXI.Mesh and therefore I need a list of vertices.

My three options:
1. Iterate over those three shapes, triangulate if necessary, and create 3 instances of a PIXI.Mesh to form the original polygon. This is bad, I really don't want three instances where I could get away with a single one.
2. Get the three shapes, mangle them, and create a large list of vertices by triangulate every rectangle with poly2tri. This result is a mess: http://jsfiddle.net/georgie/x6yva6v0/1 as the vertices are in a indeterminated order I guess.
3. Just export the source points I already have in the physics editor and don't waste your time merging those shapes. Of course! I would be happy to do so, but I can't get PhysicsEditor to export them and I can't try it in R.U.B.E yet.

Maybe I don't see the obvious at the moment? Anyone with ideas here?

##### Share on other sites

Solution for Problem B is Option 3. Just use the hull. Phewww!

I just discovered that I can access the polygon hull in my custom physicseditor exporter.

This is the relevant part to export the hull together with the other sub shapes.

`"hull": [  {% for point in fixture.hull %} {% if not forloop.first %}, {% endif %} {{point.x}}, {{point.y}} {% endfor %}],`

Now the texturing problem is left.

##### Share on other sites

Hey, thanks for looking into this.

Yes, I'm actually using it as you can see in the fiddle from above (http://jsfiddle.net/georgie/x6yva6v0/2)

`var mesh = new PIXI.mesh.Mesh(texture, verticesMesh, newUVS, indices, PIXI.mesh.Mesh.DRAW_MODES.TRIANGLES)`

I scanned the whole pixi mesh and rope source but couldn't find a hint how to get the texture to repeat.

This is the one and only remaining problem I have with this: Get the texture to repeat.

I'm more and more thinking that I have to use parts of the tiling sprite source merged into the mesh class to get it working.

Thanks!

##### Share on other sites

You could probably do that by settings the UVs properly. Uvs are 0-1 anything above/below that will repeat (as long as you have gl.REPEAT set on your texture).

Which will automatically happen if you texture isn't power of two, as a side effect:

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/core/renderers/webgl/WebGLRenderer.js#L398-L407

##### Share on other sites

Yes! YES! Thanks, that kicked me in the right direction. My uvs, indices and vertices were the problems. Never the texture itself. Here is the result: http://jsfiddle.net/georgie/x6yva6v0/3/

What would be the best strategy to make it repeat in canvas? I see that the TilingSprite creates a dedicated pattern to do so.

`this._canvasPattern = tempCanvas.context.createPattern( tempCanvas.canvas, 'repeat' );`

Do I have to do it for the mesh in the same fashion ?

Thank you so much!

Regards George

##### Share on other sites

Yeah most likely the best thing to do for canvas would be to draw exactly what you want and just use that texture, good luck!

##### Share on other sites

Thanks for giving me the confidence to try it with the repeating pattern in canvas.

I immediately got some nice results by overriding the method _renderCanvasDrawTriangle and draw with a pattern (stolen from TilingSprite) instead of clipping the texture.

http://jsfiddle.net/georgie/x6yva6v0/4/

That's totally fine for my current intention. Thanks!

Regards Georgs

##### Share on other sites

• 1 month later...

What would be the best way to do this in pixi v2, with webgl? I've actually implemented it in canvas already but pixi v2 doesn't have a Mesh, just a Strip... Is it possible with that?

##### Share on other sites

Anything is possible, it is just software

##### Share on other sites

haha! I guess I COULD build a Strip that handled arbitrary polygons, but I'm not looking forward to it. Integrating Mesh in Phaser sounds equally daunting. *sigh*

##### Share on other sites

Upgrade Phaser to use PIXI v3

##### Share on other sites

...then maintain that throughout every change in not just Phaser, but also PIXI I don't feel up to that

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

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.