I am working on working a website, where the memories of my previous flat and flatmates can live on in the digital. This website includes a beautiful .hdr image of a landscape sitting in the “background”.
I am using three.js with webpack and everything works just fine on a local development server, but when I build the application with webpack I get the following error:
which simply ensures the use of the url-loader package to open the HDR file. This way, on the local server the HDR doesn’t seem to load at all as the website seems to buffer and becomes unresponsive. Trying to build the app, this one line (the HDR import) breaks the entire build procedure.
The HDR is 150MB big.
I have spent two days on this and searched through every discussion 5 pages deep into google searches. Does anyone know what might be happening or what is the best workaround?
I don’t think you want to use url-loader without a “limit” option for files this big. Converting them to Base64 URIs will increase the size even more. What’s the resolution of this image? You might want to try testing on a smaller image first.
if you do not import you don’t need loaders and the file must be inside /public. if it isn’t you can’t build. a 150mb file just for an envmap is way too much btw. importing that with url-loader will make it worse like don said, base64 will add ~30% to that?
make sure the file is in /public
compress it, even at 1-2mb envmaps can still look good
the file is currently in /static, as you can see. I don’t have a /public folder, only /src. On build webpack makes a /dist folder and it moves the sky.hdr file from static into that one.
.hdr is not really a compression-friendly format. I would try converting to .exr, using Imagemagick, then loading with THREE.EXRLoader. Probably something like this would do it:
convert input.hdr -alpha off -compress Piz output.exr
I would also check that the image resolution is no larger than 4096x4096.
