CODEWITHSUNDEEP
three.js
HelloWorld
HelloWorld

Reputation: 1863

THREE.WebGLProgram Shader Error because of defined v1 constant

I am using Three.js and I am loading an HDR as an environment map for the scene. Upon loading, I receive this error:

enter image description here

The line in questions is this:

enter image description here

I am assuming that the defined v1 causes an issue in this line because it is not undefined.

enter image description here

I am loading the HDR map like this:

      return new Promise((resolve, reject) => {
        new RGBELoader()
          .setDataType(THREE.HalfFloatType)
          .load(
            path, // <-- hdr file
            (texture) => {
              // I tried fromEquirectangular and fromCubemap
              // const envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
              const envMap = this.pmremGenerator.fromCubemap(texture).texture;
              texture.needsUpdate = true;
    
              resolve({ envMap });
            },
            undefined,
            reject
          );
        });

Does anyone know what is causing this issue in THREE?

Upvotes: 1

Views: 648

Answers (1)

Mugen87
Mugen87

Reputation: 31026

const envMap = this.pmremGenerator.fromCubemap(texture).texture;

I doubt this method call is correct. RGBELoader can not load textures in the cube map format. You probably want to use fromEquirectangular(). Before using this method, you need this line in your onLoad() callback:

texture.mapping = THREE.EquirectangularReflectionMapping;

Besides, please check if the usage of PMREMGenerator is actually necessary in your app. In latest releases, three.js internally uses PMREMGenerator to prepare environment maps for the usage with PBR materials.

Upvotes: 2

Related Questions