Hello, guys! I can not implement simplest shaders in playcanvas. I tried some online tool as a starting point and that gives me some nice looking box with gradients and edges. It looks like so:
And initial shaders for this online tool look like:
//vertex
precision highp float;
attribute vec3 position;
attribute vec3 normal;
uniform mat3 normalMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec3 fNormal;
varying vec3 fPosition;
void main()
{
fNormal = normalize(normalMatrix * normal);
vec4 pos = modelViewMatrix * vec4(position, 1.0);
fPosition = pos.xyz;
gl_Position = projectionMatrix * pos;
}
//fragment
precision highp float;
uniform float time;
varying vec3 fNormal;
varying vec3 fPosition;
void main()
{
gl_FragColor = vec4(fNormal, 1.0);
}
In playcanvas model-viewer I adapted these shaders and got this minimized code:
const vShader = `
precision highp float;
attribute vec3 aPosition;
attribute vec3 aNormal;
uniform mat3 uNormalMatrix;
uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;
varying vec3 vNormal;
varying vec3 vPosition;
void main()
{
vNormal = normalize(uNormalMatrix * aNormal);
vec4 pos = matrix_model * vec4(aPosition, 1.0);
vPosition = pos.xyz;
gl_Position = matrix_viewProjection * pos;
}`;
const fShader = `
precision highp float;
varying vec3 vNormal;
varying vec3 vPosition;
void main()
{
gl_FragColor = vec4(vNormal, 1.0);
}
`;
const rShader = createShaderFromCode(device, vShader, fShader, 'test', {
aPosition: SEMANTIC_POSITION,
aNormal: SEMANTIC_NORMAL
});
const material = new Material();
material.shader = rShader;
material.update();
var box = new Entity();
box.addComponent("render", {
type: "box",
castShadows: true
});
box.render.material = material;
app.root.addChild(box);
But when I run it, I see a box with uniform black color - no gradients, no shadows and no edges:
As you can see, there is already some model uploaded to the viewer and it is rendered ok. But now I’m playing with shaders in order to implement some additional logic - like highlighting on selection etc. And unfortunatelly it does not work - every time I get just uniform black texture. Could you please advise me how to fix it and possibly provide some minimized and working shader? Thanks in advance!