Hello everyone,
I tried to create a simple custom fresnel shader. However, I receive this error:
The implementation mostly derivated from https://github.com/poikilos/KivyGlops/blob/master/shaders/fresnel.glsl
and in parts from Add Bloom to model?
Besides the error mentioned above, I am not quite sure where to get the camera’s world position (or if I even need it) - my understanding of shader code is severly lacking. If anyone could provide me with a meaningful documentation on how GLSL works in Playcanvas, it would be much appreciated.
Here’s a link to a demo project: https://playcanvas.com/editor/scene/1082597
This is the vert code:
// --- VERTEX SHADER ---
attribute vec3 aPosition;
attribute vec3 aNormal;
uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;
varying vec3 vNormal;
varying vec4 vPos;
void main(void)
{
vec4 pos = matrix_model * vec4(aPosition, 1.0);
vPos = matrix_viewProjection * pos;
gl_Position = vPos;
vNormal = aNormal.xyz;
}
and the frag code:
// --- FRAGMENT SHADER ---
precision mediump float;
uniform float uPower; // Fresnel Power
uniform vec4 uColor; // Fresnel Color
varying vec3 vNormal;
varying vec4 vPos;
uniform vec3 camera_worldPos; // where do I get this from??
void main(void) {
vec3 V = normalize(camera_worldPos.xyz - vPos.xyz);
vec3 N = normalize(vNormal);
float fresnel = pow( 1.0- dot(N, V), uPower);
vec4 fresnel_color = vec4(fresnel, fresnel, fresnel, 1.0);
// Output to screen
gl_FragColor = uColor * fresnel_color;
}
and the js:
var fresnel = pc.createScript('fresnel');
fresnel.attributes.add('frag', { type: 'asset', assetType: 'shader', description: "Fragment shader"});
fresnel.attributes.add('vert', { type: 'asset', assetType: 'shader', description: "Vertex shader"});
fresnel.attributes.add('power', {type: 'number', default: 3.0, description: 'Fresnel Power'});
fresnel.attributes.add('color', {type: 'rgba', description: 'Fresnel Color'});
fresnel.prototype.initialize = function() {
var gd = this.app.graphicsDevice;
var vertexShader = this.vert.resource;
var fragmentShader = "precision " + gd.precision + " float;\n";
fragmentShader = fragmentShader + this.frag.resource;
var shaderDefinition = {
attributes: {
aPosition: pc.SEMANTIC_POSITION,
aNormal: pc.SEMANTIC_NORMAL
},
vshader: vertexShader,
fshader: fragmentShader
};
this.shader = new pc.Shader(gd, shaderDefinition);
this.material = new pc.Material();
this.entity.model.model.meshInstances[0].material = this.material;
this.material.shader = this.shader;
// set material parameters
this.material.setParameter('uPower', this.power);
this.material.setParameter('uColor', this.color);
this.material.update();
};