src/core/AccumulativeShadows.tsx

@@ -96,7 +96,7 @@ const SoftShadowMaterial = shaderMaterial(
      vec4 sampledDiffuseColor = texture2D(map, vUv);
      gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
      #include <tonemapping_fragment>
-     #include <encodings_fragment>
+     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 

src/core/Caustics.tsx

@@ -127,7 +127,7 @@ const CausticsProjectionMaterial = shaderMaterial(
     vec3 back = texture2D(causticsTextureB, lightSpacePos.xy).rgb;
     gl_FragColor = vec4((front + back) * color, 1.0);
     #include <tonemapping_fragment>
-    #include <encodings_fragment>
+    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 

src/core/Grid.tsx

@@ -120,7 +120,7 @@ const GridMaterial = shaderMaterial(
       if (gl_FragColor.a <= 0.0) discard;
 
       #include <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }
   `
 )

src/core/Image.tsx

@@ -70,7 +70,7 @@ const ImageMaterialImpl = shaderMaterial(
     gl_FragColor = toGrayscale(texture2D(map, zUv) * vec4(color, opacity), grayscale);
     
     #include <tonemapping_fragment>
-    #include <encodings_fragment>
+    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }
 `
 )

src/core/MeshPortalMaterial.tsx

@@ -42,7 +42,7 @@ const PortalMaterialImpl = shaderMaterial(
      float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
      gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
      #include <tonemapping_fragment>
-     #include <encodings_fragment>
+     #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
    }`
 )
 
@@ -261,7 +261,9 @@ function ManagePortalScene({
             vec4 ta = texture2D(a, vUv);
             vec4 tb = texture2D(b, vUv);
             gl_FragColor = mix(tb, ta, blend);
-            #include <encodings_fragment>
+            #include <${
+              parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
+            }>
           }`,
       })
     )

src/core/PointMaterial.tsx

@@ -12,26 +12,28 @@ declare global {
   }
 }
 
+const opaque_fragment = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'opaque_fragment' : 'output_fragment'
+
 export class PointMaterialImpl extends THREE.PointsMaterial {
   constructor(props) {
     super(props)
     this.onBeforeCompile = (shader, renderer) => {
       const { isWebGL2 } = renderer.capabilities
       shader.fragmentShader = shader.fragmentShader.replace(
-        '#include <output_fragment>',
+        `#include <${opaque_fragment}>`,
         `
         ${
           !isWebGL2
-            ? '#extension GL_OES_standard_derivatives : enable\n#include <output_fragment>'
-            : '#include <output_fragment>'
+            ? `#extension GL_OES_standard_derivatives : enable\n#include <${opaque_fragment}>`
+            : `#include <${opaque_fragment}>`
         }
       vec2 cxy = 2.0 * gl_PointCoord - 1.0;
       float r = dot(cxy, cxy);
       float delta = fwidth(r);     
       float mask = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
       gl_FragColor = vec4(gl_FragColor.rgb, mask * gl_FragColor.a );
       #include <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       `
       )
     }

src/core/Sparkles.tsx

@@ -51,7 +51,7 @@ const SparklesImplMaterial = shaderMaterial(
       float strength = 0.05 / distanceToCenter - 0.1;
       gl_FragColor = vec4(vColor, strength * vOpacity);
       #include <tonemapping_fragment>
-      #include <encodings_fragment>
+      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
     }`
 )
 

src/core/Stars.tsx

@@ -1,3 +1,4 @@
+import * as THREE from 'three'
 import * as React from 'react'
 // eslint-disable-next-line
 import { ReactThreeFiber, useFrame } from '@react-three/fiber'
@@ -40,7 +41,7 @@ class StarfieldMaterial extends ShaderMaterial {
         gl_FragColor = vec4(vColor, opacity);
 
         #include <tonemapping_fragment>
-	      #include <encodings_fragment>
+	      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       }`,
     })
   }

src/materials/ConvolutionMaterial.tsx

@@ -1,23 +1,23 @@
-import { NoBlending, ShaderMaterial, Uniform, Vector2 } from 'three'
+import * as THREE from 'three'
 
-export class ConvolutionMaterial extends ShaderMaterial {
+export class ConvolutionMaterial extends THREE.ShaderMaterial {
   readonly kernel: Float32Array
-  constructor(texelSize = new Vector2()) {
+  constructor(texelSize = new THREE.Vector2()) {
     super({
       uniforms: {
-        inputBuffer: new Uniform(null),
-        depthBuffer: new Uniform(null),
-        resolution: new Uniform(new Vector2()),
-        texelSize: new Uniform(new Vector2()),
-        halfTexelSize: new Uniform(new Vector2()),
-        kernel: new Uniform(0.0),
-        scale: new Uniform(1.0),
-        cameraNear: new Uniform(0.0),
-        cameraFar: new Uniform(1.0),
-        minDepthThreshold: new Uniform(0.0),
-        maxDepthThreshold: new Uniform(1.0),
-        depthScale: new Uniform(0.0),
-        depthToBlurRatioBias: new Uniform(0.25),
+        inputBuffer: new THREE.Uniform(null),
+        depthBuffer: new THREE.Uniform(null),
+        resolution: new THREE.Uniform(new THREE.Vector2()),
+        texelSize: new THREE.Uniform(new THREE.Vector2()),
+        halfTexelSize: new THREE.Uniform(new THREE.Vector2()),
+        kernel: new THREE.Uniform(0.0),
+        scale: new THREE.Uniform(1.0),
+        cameraNear: new THREE.Uniform(0.0),
+        cameraFar: new THREE.Uniform(1.0),
+        minDepthThreshold: new THREE.Uniform(0.0),
+        maxDepthThreshold: new THREE.Uniform(1.0),
+        depthScale: new THREE.Uniform(0.0),
+        depthToBlurRatioBias: new THREE.Uniform(0.25),
       },
       fragmentShader: `#include <common>
         #include <dithering_pars_fragment>      
@@ -53,7 +53,9 @@ export class ConvolutionMaterial extends ShaderMaterial {
 
           #include <dithering_fragment>
           #include <tonemapping_fragment>
-          #include <encodings_fragment>
+          #include <${
+            parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'
+          }>
         }`,
       vertexShader: `uniform vec2 texelSize;
         uniform vec2 halfTexelSize;
@@ -77,7 +79,7 @@ export class ConvolutionMaterial extends ShaderMaterial {
 
           gl_Position = vec4(position.xy, 1.0, 1.0);
         }`,
-      blending: NoBlending,
+      blending: THREE.NoBlending,
       depthWrite: false,
       depthTest: false,
     })
@@ -91,7 +93,7 @@ export class ConvolutionMaterial extends ShaderMaterial {
     this.uniforms.texelSize.value.set(x, y)
     this.uniforms.halfTexelSize.value.set(x, y).multiplyScalar(0.5)
   }
-  setResolution(resolution: Vector2) {
+  setResolution(resolution: THREE.Vector2) {
     this.uniforms.resolution.value.copy(resolution)
   }
 }

src/materials/MeshRefractionMaterial.tsx

@@ -166,6 +166,6 @@ export const MeshRefractionMaterial = shaderMaterial(
     float nFresnel = fresnelFunc(viewDirection, normal) * fresnel;
     gl_FragColor = vec4(mix(finalColor, vec3(1.0), nFresnel), 1.0);      
     #include <tonemapping_fragment>
-    #include <encodings_fragment>
+    #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
   }`
 )

src/materials/SpotLightMaterial.tsx

@@ -1,18 +1,18 @@
-import { ShaderMaterial, Vector3, Color, Vector2 } from 'three'
+import * as THREE from 'three'
 
-export class SpotLightMaterial extends ShaderMaterial {
+export class SpotLightMaterial extends THREE.ShaderMaterial {
   constructor() {
     super({
       uniforms: {
         depth: { value: null },
         opacity: { value: 1 },
         attenuation: { value: 2.5 },
         anglePower: { value: 12 },
-        spotPosition: { value: new Vector3(0, 0, 0) },
-        lightColor: { value: new Color('white') },
+        spotPosition: { value: new THREE.Vector3(0, 0, 0) },
+        lightColor: { value: new THREE.Color('white') },
         cameraNear: { value: 0 },
         cameraFar: { value: 1 },
-        resolution: { value: new Vector2(0, 0) },
+        resolution: { value: new THREE.Vector2(0, 0) },
       },
       transparent: true,
       depthWrite: false,
@@ -79,7 +79,7 @@ export class SpotLightMaterial extends ShaderMaterial {
         gl_FragColor = vec4(lightColor, intensity * opacity);
 
         #include <tonemapping_fragment>
-	      #include <encodings_fragment>
+	      #include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
       }`,
     })
   }