# R3F - Adding custom GLSL code to my meshStandardMaterial

Hi 3D web enthusiasts,

I would like to know how to integrate my GLSL code into R3F to get the effects I want. I don’t want to write a brand new shaderMaterial from scratch. I would rather use all the properties of MeshStandardMaterial or PhongMaterial and add in my custom visualization.

Here is an example of the code I would want to include in react-three-fiber. This code works just fine with the standard ThreeJS API but I’m looking to convert it to R3F.

``````    const customMaterial = new THREE.MeshPhongMaterial({
shininess: 100,
side: THREE.DoubleSide,
wireframe: false,

// one would define the uniforms prior as an object

varying vec3 vposition;

`.replace(
`#include <begin_vertex>`,
`
vposition = position;
vec3 transformed = vec3( position );`
);

varying vec3 vposition;
uniform sampler2D legend;
uniform vec2 minMaxVal;
uniform vec3 ddh_coord[6];
uniform vec3 colors_arr[6];
uniform float ddh_rmr[6];

bool condition1(vec3 a, vec3 b, vec3 pt, float radius, float epsilon) {

// some code here

if ( abs(d-radius) <= epsilon ) {
return true;
}
else {
return false;
}
}

bool condition2( vec3 a, vec3 b, vec3 pt, float radius, float epsilon) {

// some code here

if ( // some code ) {
return true;
}
else {
return false;
}

}

`.replace(
`#include <map_fragment>`,
`

vec3 start_point;
vec3 end_point;
vec3 col;

for(int i = 0; i <= 4; i++) {

start_point = vec3 (ddh_coord[i].x, ddh_coord[i].y ,ddh_coord[i].z) ;
end_point = vec3 (ddh_coord[i+1].x, ddh_coord[i+1].y ,ddh_coord[i+1].z);

if( condition1() &&
condition2() ) {

col = texture(legend, vec2(0.5, (ddh_rmr[i] - minMaxVal.x) / (minMaxVal.y - minMaxVal.x))).rgb;

}

}

diffuseColor.rgb *= col;`
);
}
});
``````