R3F - Adding custom GLSL code to my meshStandardMaterial

Questions
, , ,
1

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,

        onBeforeCompile: shader => {

            // one would define the uniforms prior as an object
            shader.uniforms.legend = uniforms.legend;
            shader.uniforms.minMaxVal = uniforms.minMaxVal;
            shader.uniforms.ddh_coord = uniforms.ddh_coord;
            shader.uniforms.colors_arr = uniforms.colors_arr;
            shader.uniforms.ddh_rmr = uniforms.ddh_rmr;


            shader.vertexShader = `
            varying vec3 vposition;

            ${shader.vertexShader}
            `.replace(
                `#include <begin_vertex>`,
                `
                vposition = position;
                vec3 transformed = vec3( position );`
            );


            shader.fragmentShader = ` 
            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;
                    }

            } 



            ${shader.fragmentShader}
            `.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;`
            );
        }
    });

thanks in advance for your input

2

There’s nothing to convert, just set all these props declaratively