Rick Posted February 17, 2016 Share Posted February 17, 2016 Hi all, I'm brand new to Pixi. I've built a 2D grid control in Canvas, and would like to see if I can improve performance by leveraging webgl. I have experience with OpenGL and Pixi seems to be a nice way to abstract some of the complexity away, but I'm struggling to find examples of how to do something simple: create a triangle mesh with specified colors at each vertex. I figure this is the most efficient way to create a tabular grid (where each cell could potentially have a different background color). I've managed to do this in Pixi using the Graphics drawing routines, but I suspect that will not be nearly as fast as a mesh. If someone could point me to a tutorial that explains this, that would be great! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted February 17, 2016 Share Posted February 17, 2016 That's one of examples that's difficult to reproduce in PIXI. PIXI is all about colorful rabbit sprites, not colorful triangles: http://www.goodboydigital.com/pixijs/bunnymark/ You have to override/extend PIXI.mesh.Mesh , and PIXI.mesh.MeshRenderer for that. Clone pixi from its github and look at these two classes they're both in src/mesh folder. Quote Link to comment Share on other sites More sharing options...
xerver Posted February 20, 2016 Share Posted February 20, 2016 Doing it in WebGL and Canvas would be difficult, but doing it only in WebGL is just a matter of creating a Mesh instance and writing a custom shader. Quote Link to comment Share on other sites More sharing options...
fanjules Posted March 19, 2017 Share Posted March 19, 2017 I would very much like to implement this using a shader or filters, not interested in canvas implementation so this will all be WebGL. I am specifically interested in making use of a vertex alpha channel for blending mesh grid vertices in overlays (is that even possible?) as well as applying tints that change across the grid, but I need to walk first before I can run and want to see. I found this as a starting point, though it doesn't seem to work with an alpha channel yet: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL But, this being my first experience with shaders, am struggling so far just to get this working. At the moment I am getting an error that property "location" is undefined, which seems to be an issue with uniforms. I also understand I may need to include some variables in the shader, but documentation is very week and most of the examples are fragment shaders. Having spent a whole day on this I'm seriously pulling my hair out, but I imagine this is a walk in the park for many familiar with shaders and the v4 filter system. var Lcolors=new Float32Array(16); for(var n=0;n<Lcolors.length;n++){Lcolors[n]=Math.random()} var vertexShader=[ "attribute vec3 aVertexPosition;", "attribute vec4 aVertexColor;", "", "uniform mat4 uMVMatrix;", "uniform mat4 uPMatrix;", "", "varying lowp vec4 vColor;", "", "void main(void) {", " gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);", " vColor = aVertexColor;", "}" ].join("\n"); var fragmentShader=[ "varying lowp vec4 vColor;", "", "void main(void) {", " gl_FragColor = vColor;", "}" ].join("\n"); var uniforms = { aVertexColor: { type: '4fv', value: Lcolors } }; var Lfilter=new PIXI.Filter(vertexShader,fragmentShader,uniforms); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 19, 2017 Share Posted March 19, 2017 Yes, that's possible. You have to look how MeshRenderer is implemented, make your own version of it, with your shader. It's not possible to do with docs, but https://github.com/pixijs/pixi.js/tree/dev/src/mesh and https://github.com/pixijs/pixi-plugin-example has enough info. I'm working on https://github.com/pixijs/pixi.js/pull/3842 , and that thing will have colors in a day or two. Please post your request about colors there, you'll test my implementation when it'll be ready. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 20, 2017 Share Posted March 20, 2017 @Honest Coder OK, so, there is a branch called "dev-geometry-update" which will be base for pixi-v5. pixi: http://pixijs.download/dev-texture-update/pixi.js Examples: http://dev.goodboydigital.com/client/goodboy/geometry/examples/index.html#/mesh/triangle.js PR: https://github.com/pixijs/pixi.js/pull/3304 I hope that will help you! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.