SSR not working with drei's Environment

[VladCuciureanu]

When using 'SSR' in combination with drei's 'Environment', it seems like 'postprocessing' breaks, resulting in SSR not working at all. Loading up the scene greets me with the following console error:

Console Error Log

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Program Info Log: Fragment shader is not compiled.

FRAGMENT

ERROR: 0:241: 'NaN' : undeclared identifier ERROR: 0:241: '.0' : syntax error

236: uv.y += faceSize; 237: face -= 3.0; 238: } 239: uv.x += face * faceSize; 240: uv.x += filterInt * 3.0 * cubeUV_minTileSize; > 241: uv.y += 4.0 * ( exp2( CUBEUV_MAX_MIP ) - faceSize ); 242: uv.x *= CUBEUV_TEXEL_WIDTH; 243: uv.y *= CUBEUV_TEXEL_HEIGHT; 244: #ifdef texture2DGradEXT 245: return texture2DGradEXT( envMap, uv, vec2( 0.0 ), vec2( 0.0 ) ).rgb; 246: #else 247: return texture2D( envMap, uv ).rgb;

It gets weirder. This codesandbox appears to function properly. Running it locally breaks it though.

For the sake of gathering as much info as I can, I tried it on multiple browsers: Safari, Firefox, Arc (Chromium) and Google Chrome. All have the same result, as expected. I also tried it both on my Apple Silicon and Intel Macbooks and both have the same issue.

[emalorenzo]

Im having exactly the same issue.

[Creative-Ataraxia]

exactly the same issue here too

[CS6]

Exactly the same problem happens to me too.

[CS6]

I've tried various combinations of versions and it happens However, the official example works fine

[VrTech]

For more clues I found here

[EvGreen]

SSR issue as well, 2.7.0, my environment is gatsby, all latest versions, crashes even when just EffectComposer is alone in Canvas. Works on 2.6.1.

The error I'm getting:

Failed to Server Render (SSR) Error message: TypeError: Class extends value undefined is not a constructor or null

File: node_modules/postprocessing/build/postprocessing.esm.js:6439:35

[ThimoDEV]

Issue still happens on version 2.10.0

[dongho-shin]

FYI : error occurs in here I hope this helps you guys In my case I use drei' envrionment cubeMap like this

<Environment background near={1} far={1000} resolution={256}>
  <mesh scale={100}>
    <sphereGeometry args={[1, 64, 64]} />
    <meshBasicMaterial map={texture} side={THREE.BackSide} />
  </mesh>
</Environment>

so setupEnvMap occurs error cubeMap's height comes from this._scene.environment.image[index].height screen-space-reflections.js

//In SSREffect Class
update(renderer, inputBuffer) {
    console.log('update')
    if (!this.usingBoxProjectedEnvMap && this._scene.environment) {
      const reflectionsMaterial = this.reflectionsPass.fullscreenMaterial
      let envMap = null // not sure if there is a cleaner way to find the internal texture of a CubeTexture (when used as scene environment)

      this._scene.traverse((c) => {
        if (!envMap && c.material && !c.material.envMap) {
          const properties = renderer.properties.get(c.material)
          if ('envMap' in properties && properties.envMap instanceof Texture)
            envMap = properties.envMap
        }
      })

      if (envMap) {
        const envMapCubeUVHeight = this._scene.environment.image.height
        //Check envMapCubeUVHeight value it may undefined
        setupEnvMap(reflectionsMaterial, envMap, envMapCubeUVHeight) // problem is here
      }
    }

setupEnvMaps

const setupEnvMap = (reflectionsMaterial, envMap, envMapCubeUVHeight) => {
  reflectionsMaterial.uniforms.envMap.value = envMap
  const envMapCubeUVSize = generateCubeUVSize({
    envMapCubeUVHeight,
  })
  reflectionsMaterial.defines.ENVMAP_TYPE_CUBE_UV = ''
  reflectionsMaterial.defines.CUBEUV_TEXEL_WIDTH = envMapCubeUVSize.texelWidth
  reflectionsMaterial.defines.CUBEUV_TEXEL_HEIGHT = envMapCubeUVSize.texelHeight
  reflectionsMaterial.defines.CUBEUV_MAX_MIP = envMapCubeUVSize.maxMip + '.0'
  reflectionsMaterial.needsUpdate = true
}

[dongho-shin]

Also generateCubeUVSize in setupEnvMaps assuming it's a power of 2. ex) width 3000, height 1500 occurs error CUBEUV_MAX_MIP in generateCubeUVSize

const generateCubeUVSize = (parameters) => {
  const imageHeight = parameters.envMapCubeUVHeight
  if (imageHeight === null) return null
  const maxMip = Math.log2(imageHeight) - 2