JSFiddle - React, Tailwind, and code Playground

HTML

<script type="x-shader/x-vertex" id="vertexShader">
    
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>
        
<script type="x-shader/x-vertex" id="fragmentShader">
#extension GL_OES_standard_derivatives : enable

    void main(void) {
        vec2 index = ( 0.5, 0.5 );
        vec2 dPdx = dFdx( index );
        gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 );
    }

</script>

<p>OES_standard_derivatives <span id="extension" ></span></p>

JavaScript

var canvas = document.createElement( 'canvas' );
var gl = canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' );

document.getElementById( 'extension' ).textContent = ( gl.getExtension('OES_standard_derivatives'))?'Yes':'No';

var shader = new THREE.ShaderMaterial({
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent
});

var material = new THREE.ShaderMaterial({
    fragmentShader: shader.fragmentShader,
    vertexShader: shader.vertexShader
});

var mesh = new THREE.Mesh( new THREE.SphereGeometry( 40, 60, 40 ), material );

var renderer = new THREE.WebGLRenderer();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 70, 1, 1, 1100 );
scene.add( mesh );
renderer.render( scene, camera );