wayfinder Posted July 26, 2015 Share Posted July 26, 2015 Hi! Here's what I want to achieve in WebGL: What would be the way to do that? TilingSprite with polygon mask? Feasible for large polygons? Build a mesh with a Strip and do custom UVs? How would you do it? Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Well, implementing this as a tileSprite with a polygon mask, it appears that the mask is applied upside-down... Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Hmm scratch that, I think that's something else in my code fucking up... Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Ok this is the weirdest thing... my polygons are drawn upside-down and at the negative y position, unless they have fewer than five vertices. Does anybody have an idea what could cause a thing like that? Link to comment Share on other sites More sharing options...
Tom Atom Posted July 26, 2015 Share Posted July 26, 2015 Hi, not sure, just guess: Phaser has coordinate system with [0,0] in top left corner and y is growing downwards. WebGL/OpenGL has y growing upwards as on classic chart... Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 I've meanwhile also noticed that the polgyons flip between upside down and correct depending on the vertex positions when the points of a 4-vertex poly are in counter-clockwise order.... but only when the shape is convex! This is perhaps the weirdest thing I've seen so far Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 I can confirm that this is a webGL only bug, in canvas the polygon is drawn completely as expected Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Following the bug, I've now ended up in PIXI.WebGLGraphics.updateGraphics, where there's a switch between PIXI.WebGLGraphics.buildPoly with webGLDate.mode = 0 and PIXI.WebGLGraphics.buildComplexPoly with webGLData.mode = 1. If the latter is used, the y-axis is inverted, apparently. The switch is based on the number of vertices and the canDrawUsingSimple flag, so that explains why the number if vertices plays a role. Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 The random flipping in the GIF is explained by another switch that goes to buildComplexPoly if buildPoly doesn't work (i.e. returns false), which seems to happen sometimes and not at other times based on minuscule differences in the vertex positions, due to the PolyK triangulation routine Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Okay, looks like I could fix that random flipping by doing what pixi v3 did and switching the PolyK triangulation out for earcut triangulation! Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 ...and I've worked around the flipped axis when using the stencil buffer by seriously upping the threshold after which a poly is considered so complex that it needs to be rendered using buildComplexPoly. Not ideal, and I don't know if the stencil buffer always flips y or only in my specific case and if so why (perhaps because I'm rendering to a renderTexture? Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Yup. Minimal reproduction here: http://jsfiddle.net/bf6w70wt/ Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 Next problem: now simple polygons that render correctly when drawn to a rendertexture will render upside down when used as a mask, on a rendertexture. seriously I'm starting to think i'm the first person who tries to do this jdnichollsc 1 Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 ...and this time, i can't reproduce it in a fiddle. adding the mask directly to the world instead of in a common group with my masked object fixes it. weird, weird, weird. Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 this is, by the way, a use case for tileSprites larger than the viewport—a thing that's heavily discouraged in the docs! it's my impression though that the performance impact of huge tilesprites only happens in canvas, right? Link to comment Share on other sites More sharing options...
wayfinder Posted July 26, 2015 Author Share Posted July 26, 2015 In any event: behold the fruit of my labor: drhayes and jdnichollsc 2 Link to comment Share on other sites More sharing options...
george Posted July 27, 2015 Share Posted July 27, 2015 Congratulations! A great monologue with a great outcome! So can you share a final fiddle for all of our helpless minds of the future ? jdnichollsc 1 Link to comment Share on other sites More sharing options...
wayfinder Posted July 27, 2015 Author Share Posted July 27, 2015 here you go: http://jsfiddle.net/L82z7ot1/ Link to comment Share on other sites More sharing options...
Recommended Posts