Jump to content

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


Recommended Posts


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!


Link to comment
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.

Link to comment
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.



Link to comment
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:



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



Link to comment
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.



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

Regards Georgs

Link to comment
Share on other sites

  • 1 month later...

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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...