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

[george]

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?

 

Thanks for reading!

[george]

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.

[xerver]

Have you looked into the Mesh feature at all?

 

http://pixijs.github.io/docs/PIXI.mesh.Mesh.html

[george]

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!

[xerver]

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

[george]

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

 

[xerver]

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!

[george]

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

[wayfinder]

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?

[xerver]

Anything is possible, it is just software

[wayfinder]

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*

[xerver]

Upgrade Phaser to use PIXI v3

[wayfinder]

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