Resolving PlayCanvas DDS Texture Format Compatibility Issues in Angular 18 Production Builds

While integrating a PlayCanvas project (v2.6.1, using modules) into an Angular 18 application, we encountered an issue that only manifested during Angular production builds (ng build --configuration production).

The specific problem occurred within PlayCanvas’s dds.js script when attempting to load the Sunflowers Pure sky.dds cubemap/texture file. The browser console showed an error originating from PlayCanvas’s debug.js (line 128, likely triggered by dds.js), stating: “This DDS pixel format is currently unsupported. Empty texture will be created instead of Sunflowers Pure Sky.dds.” (See attached screenshot).

Curiously, this error did not occur when running the application in Angular’s development mode (ng serve); the DDS file loaded correctly in that environment. This discrepancy suggests that Angular’s production build process might be modifying the Sunflowers Pure sky.dds file in some way, perhaps altering its header or content, causing the PlayCanvas loader to interpret its pixel format as unsupported.

We successfully implemented a workaround by replacing the problematic .dds file with an equivalent .hdr file, which loads correctly in both development and production builds. However, the root cause for the .dds file being altered or misinterpreted specifically during the Angular production build remains unclear and seems unusual.

perhaps try and add a breakpoint on that dds.js:86 line to see what format you get in both cases. Perhaps the binary dds asset is not served right by your host?