How to correctly specify the colors of the vertices of a triangle?

I use the code:

var canvas = document.getElementById('application-canvas');
var app = new pc.Application(canvas, {
    mouse: new pc.Mouse(document.body),
    touch: new pc.TouchDevice(document.body)
});
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;
app.start();

app.scene.ambientLight = new pc.Color(0, 0, 0);

// create camera
var camera = new pc.Entity();
camera.addComponent('camera', {
    clearColor: new pc.Color(44/255, 62/255, 80/255),
    farClip: 10000,
    fov: 90
});
camera.translate(1,0.5,1);
//    camera.translate(0,0,1);
camera.lookAt(0,0,0);
app.root.addChild(camera);
//
app.on("update", function (dt) {
    drawAxes(pc.Vec3.ZERO, .75)
});

var Triangle = pc.createScript('triangle');
Triangle.prototype.initialize = function () {
    var node = new pc.scene.GraphNode();
    var positions = [
        0, 0, 0,
        0, .5, 0,
        .5, 0, 0
    ];
    var normals = [
        0, 0, 1,
        0, 0, 1,
        0, 0, 1
    ];
    var colors = [
        255, 0, 0, 255,
        0, 255, 0, 255,
        0, 0, 255, 255
    ];
    var indices = [ 2, 1, 0 ];
    var options = {
        normals: normals,
        indices: indices,
        colors: colors
    };
    var mesh = pc.scene.procedural.createMesh(app.graphicsDevice, positions, options);

    var material = new pc.StandardMaterial();
    material.update();

    var instance = new pc.scene.MeshInstance(node, mesh, material);

    var model = new pc.scene.Model();
    model.graph = node;
    model.meshInstances = [ instance ];

    this.entity.addChild(node);
    app.scene.addModel(model);
};
Triangle.prototype.update = function () {
};

var triangle = new pc.Entity();
app.root.addChild(triangle);
triangle.addComponent('script');
triangle.script.create('triangle');

window.addEventListener("resize", function () {
    console.log('resize');
    //
    app.resizeCanvas(canvas.width, canvas.height);
});

And I get the result:

triangle.png

How do I get a multi-colored triangle?

You need to apply material with shader that uses vertex color. StandardMaterial has a flag to enable it: https://developer.playcanvas.com/en/api/pc.StandardMaterial.html#diffuseMapVertexColor

1 Like

Thanks, it helped. Everything is working