Outline script doesn't work

Hi, folks,
I want to make a outline script that can draw ouline for a model in the scene. I followed this tutorial
Outline model problem.

What I want is just an ouline or edge effect, so I made this script,

var Toon = pc.createScript('toon');
Toon.attributes.add("edge_frag",{type:"asset", title:"edge_frag"});
Toon.attributes.add("toon_vert", {type:"asset", title:"toon_vert"});

// initialize code called once per entity
Toon.prototype.initialize = function() {                
    this.edgeMaterial = this.createEdgeMaterial();

    var backfaces = new pc.Entity();
    backfaces.addComponent("model", {
        asset: this.entity.model.asset
    backfaces.model.model.meshInstances[0].material = this.edgeMaterial;

Toon.prototype.createEdgeMaterial = function(){
     var frag = this.app.assets.get(this.edge_frag.id).resource;
     var vert = this.app.assets.get(this.toon_vert.id).resource;

        var shaderDefinition = {
            attributes: {
                position: pc.SEMANTIC_POSITION,
                normal: pc.SEMANTIC_NORMAL
            vshader: vert,
            fshader: frag
            var shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);

            // Create a new material and set the shader
            var material = new pc.Material();
            material.cull = pc.CULLFACE_FRONT;
            return material;


precision mediump float;

uniform vec4 edgeColor;

// Fragment Shader
// For edges, just set to edge color
void main(void) {
    gl_FragColor = edgeColor;


attribute vec3 position;
attribute vec3 normal;

uniform bool edge;

uniform mat4 matrix_model;
uniform mat3 matrix_normal;
uniform mat4 matrix_viewProjection;

varying vec3 vNormal;

// vert shader
// if edge is set expand model by small amount
void main(void) {
    vec3 pos = position;

    if (edge) {
        pos += normal * 0.04;
    // transform normal
    vNormal = normalize(matrix_normal * normal);
    gl_Position = matrix_viewProjection * matrix_model * vec4(pos, 1.0);

The logic of toon.js is quite simple, like making a new material with the given shader, and apply the material to a new created model, which can be put at the behind the model to ouline it.

But for some reasons, nothing changed after all set up. I guess it is probably because the tuturial I followed was scripted with the old scripting style, but I used the new one, and didn’t get the correct way to translate it.

May someone plz help me out?
thanks a lot!


Could you please provide your topic with link to your project?

Hi mikefinch, this is the link https://playcanvas.com/project/476379/overview/chattry

did you solve your problem?