Hello everyone,
I’m working on a outline shader which will create a outline around the model according to the camera view of that object. But, when I’m applying the shader to plane. It become invisible when I run the scene and their are no error in the console too. So, i’m posting my code below, please see if you find any mistake.
Vertex Shader:
in vec2 a_position;
in vec2 a_tex_coord;
in vec4 a_colour;
uniform mat4 matrix;
out vec4 v_colour;
out vec2 tex_coords;
void main() {
v_colour = a_colour;
tex_coords = a_tex_coord;
gl_Position = matrix * vec4(a_position, 0, 1);
}
Fragment Shader
in vec4 v_colour;
in vec2 tex_coords;
out vec4 pixel;
uniform sampler2D t0;
uniform float outline_thickness;
//uniform vec3 outline_colour;
uniform float outline_threshold;
void main() {
pixel = texture(t0, tex_coords);
vec3 outline_colour = vec3(0,0,1);
if (pixel.a <= outline_threshold) {
ivec2 size = textureSize(t0, 0);
float uv_x = tex_coords.x * float(size.x);
float uv_y = tex_coords.y * float(size.y);
float sum = 0.0;
for (int n = 0; n < 9; ++n) {
uv_y = (tex_coords.y * float(size.y)) + (outline_thickness * float(float(n) - 4.5));
float h_sum = 0.0;
h_sum += texelFetch(t0, ivec2(uv_x - (4.0 * outline_thickness), uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x - (3.0 * outline_thickness), uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x - (2.0 * outline_thickness), uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x - outline_thickness, uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x, uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x + outline_thickness, uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x + (2.0 * outline_thickness), uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x + (3.0 * outline_thickness), uv_y), 0).a;
h_sum += texelFetch(t0, ivec2(uv_x + (4.0 * outline_thickness), uv_y), 0).a;
sum += h_sum / 9.0;
}
if (sum / 9.0 >= 0.0001) {
pixel = vec4(outline_colour, 1);
}
}
}
PC Script :
var CustomShader = pc.createScript('customShader');
CustomShader.attributes.add('vs', {
type: 'asset',
assetType: 'shader',
title: 'Vertex Shader'
});
CustomShader.attributes.add('fs', {
type: 'asset',
assetType: 'shader',
title: 'Fragment Shader'
});
CustomShader.attributes.add('diffuseMap', {
type: 'asset',
assetType: 'texture',
title: 'Diffuse Map'
});
CustomShader.attributes.add('outlineThickness', {
type: 'number',
default: 0.2,
title: 'outlineThickness'
});
CustomShader.attributes.add('outlineColour', {
type: 'vec3',
title: 'outline_colour'
});
CustomShader.attributes.add('outlineThreshold', {
type: 'number',
default: 0.5,
title: 'outline_threshold'
});
// initialize code called once per entity
CustomShader.prototype.initialize = function() {
this.time = 0;
var app = this.app;
var model = this.entity.model.model;
var gd = app.graphicsDevice;
var diffuseTexture = this.diffuseMap.resource;
var version = "#version 300 es\n";
var vertexShader = version + this.vs.resource;
var fragmentShader = "precision " + gd.precision + " float;\n";
fragmentShader = version + fragmentShader + this.fs.resource;
// A shader definition used to create a new shader.
var shaderDefinition = {
attributes: {
a_position: pc.SEMANTIC_POSITION,
a_tex_coord: pc.SEMANTIC_TEXCOORD0,
a_colour: pc.SEMANTIC_COLOR
},
vshader: vertexShader,
fshader: fragmentShader
};
// Create the shader from the definition
this.shader = new pc.Shader(gd, shaderDefinition);
// Create a new material and set the shader
this.material = new pc.Material();
this.material.setShader(this.shader);
this.material.setParameter('t0', diffuseTexture);
this.material.setParameter('outline_thickness', this.outlineThickness);
this.material.setParameter('outline_colour', this.outlineColour);
this.material.setParameter('outline_threshold', this.outlineThreshold);
model.meshInstances[0].material = this.material;
console.log(model.meshInstances[0].material);
};
So, Please check it once. if anybody have solution to these scripts or if anyone can suggest me an alternative.
Thanks
