Jump to content

Basic triangle mesh with vertex colors


Rick
 Share

Recommended Posts

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! 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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);

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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