modifying shader with onBeforeCompile

[garretteklof]

I'm trying to recreate this scene in react-three-fiber -> https://codepen.io/prisoner849/pen/PvdEMP

However, I keep running into the error extension directive must occur before any non-preprocessor tokens in ESSL3 when trying to remake the ground/road. This seems to have to do with the line #extension GL_OES_standard_derivatives : enable, and removing the line removes the error but does not render the mesh.

I stumbled across this -> https://spectrum.chat/react-three-fiber/general/onbeforecompile-and-updating-uniforms~fd2d6306-11bd-4e9d-b323-e17f89ea99ec - but regardless of the ways I choose to set it up (declarative / imperative) I run into the error, which means I'm probably doing something wrong outside of react-three-fiber.

I'm new to both three-js as well as react-three-fiber, but any direction in how to go about this will be much obliged (perhaps a different way to go about the road / noisy ground). Thanks.

[garretteklof]

Here's a sandbox of the scene https://codesandbox.io/s/r3f-basic-demo-forked-ftwcm

As you can see, the shader is not taking. I've logged both instances of the shader to the console (react-three-fiber and codepen), and nothing strikingly different jumps out. Please note that I downgraded three-js to version 0.115 as it is in the codepen. This got rid of the error but did not fix the scene. If you change the version of three-js to a more recent version the error given above will return.