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
});
this.entity.addChild(backfaces);
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.setShader(shader);
material.cull = pc.CULLFACE_FRONT;
return material;
};
edge_fs
precision mediump float;
uniform vec4 edgeColor;
// Fragment Shader
// For edges, just set to edge color
void main(void) {
gl_FragColor = edgeColor;
}
toon_vs
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!