Hello,
I am working on PlayCanvas. Here, I am in need to write some custom shader. I studied various tutorials and examples for custom shaders and wrote the code as below -
custom-shader.js -
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(‘alphaMap’, {
type: ‘asset’,
assetType: ‘texture’,
title: ‘Alpha Map’
});
CustomShader.prototype.initialize = function() {
var app = this.app;
var model = this.entity.model.model;
var gd = app.graphicsDevice;
var vertexShader = this.vs.resource;
var fragmentShader = "precision " + gd.precision + " float;\n";
fragmentShader = fragmentShader + this.fs.resource;
var shaderDefinition = {
attributes: {
rm_Vertex: pc.SEMANTIC_POSITION,
rm_TexCoord0: pc.SEMANTIC_TEXCOORD0,
rm_Normal: pc.SEMANTIC_TEXCOORD0
},
vshader: vertexShader,
fshader: fragmentShader
};
this.shader = new pc.Shader(gd, shaderDefinition);
this.material = new pc.Material();
this.material.setShader(this.shader);
this.material.setParameter('time', 0);
this.material.setParameter('waveScale', 0.5);
this.material.setParameter('stiffness', 2.75);
this.material.setParameter('colorStart', [0.6, 0.6, 0.6, 1.0]);
this.material.setParameter('colorEnd', [1.0, 1.0, 1.0, 0.0]);
this.material.setParameter('layersCount', 20);
this.material.setParameter('layerThickness', 0.16);
this.material.setParameter('alphaMap', this.alphaMap.resource);
this.material.setParameter('diffuseMap', this.diffuseMap.resource);
//this.material.setParameter('view_proj_matrix', 0);
model.meshInstances[0].material = this.material;
};
CustomShader.prototype.update = function(dt) {
this.time += dt;
// Bounce value of t 0->1->0
var t = (this.time % 2);
if (t > 1) {
t = 1 - (t - 1);
}
// Update the time value in the material
this.material.setParameter(‘time’, t);
};
Fragment_Shader -
precision highp float;
varying vec2 vTexCoord0;
varying vec4 vAO;
uniform sampler2D diffuseMap;
uniform sampler2D alphaMap;
//out vec4 fragColor;
void main()
{
vec4 diffuseColor = texture(diffuseMap, vTexCoord0);
float alphaColor = texture(alphaMap, vTexCoord0).r;
fragColor = diffuseColor * vAO;
fragColor.a *= alphaColor;
}
Vertex_Shader -
precision highp float;
attribute vec4 rm_Vertex;
attribute vec2 rm_TexCoord0;
attribute vec3 rm_Normal;
uniform mat4 view_proj_matrix;
uniform float layerThickness;
uniform float layersCount;
uniform vec4 colorStart;
uniform vec4 colorEnd;
uniform float time;
uniform float waveScale;
uniform float stiffness;
varying vec2 vTexCoord0;
varying vec4 vAO;
float PI2 = 6.2831852;
float RANDOM_COEFF_1 = 0.1376;
float RANDOM_COEFF_2 = 0.3726;
float RANDOM_COEFF_3 = 0.2546;
void main( void )
{
float f = float(gl_InstanceID + 1) * layerThickness;
float layerCoeff = float(gl_InstanceID) / layersCount;
vec4 vertex = rm_Vertex + vec4(rm_Normal, 0.0) * vec4(f, f, f, 0.0);
float timePi2 = time * PI2;
float waveScaleFinal = waveScale * pow(layerCoeff, stiffness);
vertex.x += sin(timePi2 + ((rm_Vertex.x+rm_Vertex.y+rm_Vertex.z) * RANDOM_COEFF_1)) * waveScaleFinal;
vertex.y += cos(timePi2 + ((rm_Vertex.x-rm_Vertex.y+rm_Vertex.z) * RANDOM_COEFF_2)) * waveScaleFinal;
vertex.z += sin(timePi2 + ((rm_Vertex.x+rm_Vertex.y-rm_Vertex.z) * RANDOM_COEFF_3)) * waveScaleFinal;
gl_Position = view_proj_matrix * vertex;
vTexCoord0 = vec2(rm_TexCoord0);
vAO = mix(colorStart, colorEnd, layerCoeff);
}
When I am adding the above custom shader script to the entity in my game, getting the following errors -
ERROR: Failed to compile vertex shader
ERROR: 0:25: ‘gl_InstanceID’ : undeclared identifier
ERROR: 0:25: ‘+’ : wrong operand types - no operation ‘+’ exists that takes a left-hand operand of type ‘const highp float’ and a right operand of type ‘const int’ (or there is no acceptable conversion)
ERROR: 0:26: ‘gl_InstanceID’ : undeclared identifier
ERROR: Failed to compile fragment shader
ERROR: 0:13: ‘texture’ : no matching overloaded function found
ERROR: 0:13: ‘=’ : dimension mismatch
ERROR: 0:13: ‘=’ : cannot convert from ‘const mediump float’ to 'highp 4-component vector of float’
ERROR: 0:14: ‘texture’ : no matching overloaded function found
ERROR: 0:14: ‘r’ : field selection requires structure or vector on left hand side
ERROR: 0:15: ‘fragColor’ : undeclared identifier
ERROR: 0:15: ‘assign’ : l-value required (can’t modify a const)
ERROR: 0:15: ‘=’ : dimension mismatch
ERROR: 0:15: ‘assign’ : cannot convert from ‘highp 4-component vector of float’ to 'const highp float’
ERROR: 0:16: ‘fragColor’ : undeclared identifier
ERROR: 0:16: ‘a’ : field selection requires structure or vector on left hand side
ERROR: 0:16: ‘assign’ : l-value required (can’t modify a const)
ERROR: Failed to link shader program. Error: invalid shaders
It’s going over my head now. I have never ever done shader programing. I thought it would be easy but these shaders have taken my sleeps away. Please help me out of this code.
Thanks in advance!
I recommend you to google