[SOLVED] Generating new material in script

Help & Support
1

Hi me again, after being defeated with world space screens i have taken a new approach and decided to create a texture from a canvas.

I am using the code from this project: Canvas Text
https://playcanvas.com/project/362231/overview/canvas-text

The issue i am acing is that each text needs its own material and i cant seem to get this working.

textGeneration2textGeneration

As you can see without generating a new material the words are the same. however with generating a new material they are no longer transparent.

This is the link to my project:
https://playcanvas.com/editor/scene/649826

And here is the code i am using to create a new material

    OrigText.prototype.createMaterial = function (){
        var material = new pc.StandardMaterial();
        material.cull = pc.CULLFACE_NONE;
        this.entity.model.material = material;
    };
2

Why were you defeated by the screen/element components? That should do exactly what you need.

3

posted this yesterday and i cant stop text elements from displaying in front of images
https://forum.playcanvas.com/t/2d-screens-in-world-space

I found that creating a texture from the text stops this from happening

4

So ive now got the materials being different. Turns out i just needed material.clone();

I’ve now got the issue that i cannot change the text colour

OrigText.prototype.initialize = function () {
    // Create a canvas to do the text rendering
    this.canvas = document.createElement('canvas');
    this.canvas.height = 128;
    this.canvas.width = 512;
    this.context = this.canvas.getContext('2d');
    
    this.entity.model.material = this.entity.model.material.clone();

    this.texture = new pc.Texture(this.app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: true
    });
    this.texture.setSource(this.canvas);
    this.texture.minFilter = pc.FILTER_LINEAR_MIPMAP_LINEAR;
    this.texture.magFilter = pc.FILTER_LINEAR;
    this.texture.addressU = pc.ADDRESS_CLAMP_TO_EDGE;
    this.texture.addressV = pc.ADDRESS_CLAMP_TO_EDGE;

    this.updateText();

    var material = this.entity.model.material;
    material.emissiveMap = this.texture;
    material.opacityMap = this.texture;
    material.blendType = pc.BLEND_NORMAL;
    material.update();
    
    this.on('attr', function (name, value, prev) {
        this.updateText();
    });
};

OrigText.prototype.updateText = function () {
    var ctx = this.context;
    var w = ctx.canvas.width;
    var h = ctx.canvas.height;

    // Clear the context to transparent
    // ctx.fillStyle = 'black';
    // ctx.fillRect(0, 0, w, h);

    // Write white text
    ctx.font = 'bold 70px Verdana';
    ctx.fillStyle = '#FF0000';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(this.text, w / 2, h / 2);
    
    console.log(ctx);

    // Copy the canvas into the texture
    this.texture.upload();
};

I set the fill style to red but the text always appears white

Capture

5

Nevermind i figured it out, just change the colour of the material