three.js replace fragment shader not working with release above 131

DonkeyLuck0 0
Viewed 37

I prepared an example of replacing standard material (fragment and vertex shader) code sandbox r131.3 which was working well in three.js versions below r131. In releases above 131 changes applied to fragment shader stopped working (vertex works still as before).

Does anyone facing the same issue (any advice is warm welcome)?

react-three-fiber three.js javascript
1 Answers

As an option, use this modification (r144):

    shader.fragmentShader = shader.fragmentShader.replace(
      `#include <dithering_fragment>`,
      `#include <dithering_fragment>

        float t = time * 0.01 * 10.; // 10 variable speed
        float l = line(vPos, gridWidth, vec3(2.0));
        vec3 base = roadColor * wave(tuv.x, mix(0.5, roadCurve, getDelta(vPos.y*PI2 /50.0  * sin(t) )), roadWidth, roadSmoothing) /1. ; // road strip
    
        vec3 c = mix(gl_FragColor.rgb, base, l);
        // vec3 base2 = vec3(0.1,0.6,0.4) * wave(tuv.x, mix(0.5, 0.36, getDelta(vPos.y*PI2 /50.0  * cos(t) )), 0.06, 0.02) /1. ; // road strip
        // vec3 c2 = mix(c, base2, l);
        
     
        gl_FragColor = vec4(c, diffuseColor.a);
      `,
    )

It adds the functionality you provide at the very end of the fragment shader's main function.

prisoner8490
Related