Create a uniform colored shader

[ApricotMimosa]

Hi,

I want to create a simple polygon but move individual points after its creation. So rather than clearing an entire graphics object whenever a point changes, I wanted to use a mesh for the first time.

With the help of googling and ChatGPT, I came up with the code below, but it does not create any visible image:

// create canvas
const app = new PIXI.Application({
  background: '#000000',
  width: 800,
  height: 800
});
document.body.appendChild(app.view);

let points_arr = [200, 200 , 200, 400, 300, 300]
let points_obj = new PIXI.Geometry().addAttribute('aVertexPosition', points_arr);

// Fragment shader to color the polygon uniformly
const fragmentShader = `
    precision mediump float;
    uniform vec3 uColor;
    void main() {
        gl_FragColor = vec4(uColor, 1.0); // Output the color with full opacity
    }
`;

// Vertex shader for passthrough (basic setup)
const vertexShader = `
    attribute vec2 aVertexPosition;
    void main() {
        gl_Position = vec4(aVertexPosition, 0.0, 1.0); // Pass the position to the fragment shader
    }
`;

// Create the shader using vertex and fragment shaders
let shader = new PIXI.Shader(
    new PIXI.Program(vertexShader, fragmentShader),
    { uColor: [0.5, 0.5, 0.5] } // Gray color in RGB
);

// Create the mesh material, ensuring no texture is used
let material_obj = new PIXI.MeshMaterial(
    PIXI.Texture.EMPTY, // Explicitly use an empty texture
    {
        program: shader.program,
        tint: 0xffffff, // Default to white tint, shader controls the color
        alpha: 1.0 // Full opacity
    }
);

mesh_obj = new PIXI.Mesh(points_obj, material_obj);

app.stage.addChild(mesh_obj);

 

 

To an actual understanding, I tried looking into the Tutorial material on mashs but even struggled with the easiest steps. For instance, I tried running the simplest mesh example locally. I changed

<script src="src/index.js" "></script>

to

<script src="src/index.js" type="module"></script>

in index.html and added a local pixi.js file to import in the index.js, but still get this error I cannot resolve:

Quote

Uncaught SyntaxError: The requested module 'http://127.0.0.1:5501/pixi.js' doesn't provide an export named: 'Graphics'

Many thanks for any helpful answer!