Error message in ThreeJS KTX2Loader: "Failed to load incompatible compressed texture format in .uploadTexture()"

While troubleshooting unfamiliar code, I encountered the following 3 errors related to loading KTX2 textures:

THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture()

WebGL warning: compressedTexSubImage: 
format
 must match the format of the existing texture image.

WebGL warning: blitFramebuffer: DRAW_FRAMEBUFFER may not have multiple samples.

The textures are showing up as black, which I suspect is connected to these warnings.

I've narrowed it down to this portion of the code:

this.ktx2Loader = new KTX2Loader(this.manager).detectSupport(editor.renderer.renderer);

...

loader = this.ktx2Loader;
const texture = await loadTexture(textureUrl, loader);

...

function loadTexture(src, textureLoader = new TextureLoader()) {
  return new Promise((resolve, reject) => {
    textureLoader.load(src, resolve, null, error => reject(new RethrownError(`Error loading texture "${src}"`, error)));
  });
}

After this, it delves into ThreeJS internal code that I am not skilled enough to handle.

The formats are coming in with a format of 36492, which I believe is KTX2 based on my research, so I'm unsure of what's triggering the error. Oddly enough, it works on some colleagues' machines but not on mine.

Any insights on what might be causing this issue?

Answer №1

The compressed format being attempted to load (36492 or 0x8E8C) is known as EXT_texture_compression_bptc and specifically as COMPRESSED_RGBA_BPTC_UNORM_EXT (also referred to as BC7) Check out the webgl spec here

In webgl, support for any compressed format is provided as an extension. This means you cannot assume that a certain format will be supported across all platforms or hardware. Each OS typically has its own requirements.

When working with compressed textures in webgl, it is important to export multiple formats and then dynamically load the appropriate one based on the runtime capabilities of the system. It is also recommended to always have a non-compressed fallback option (such as jpg, png, webp, etc).

It's worth noting that KTX is simply a container and not a format or compression codec in itself. As far as I know, it can contain any format.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to Confirm Inaccuracies in Material UI Forms

Struggling to validate form errors in React with Material UI using JOI and running into issues. Even the console.log() results are not showing up in my validate function. The error display is also confusing. ... import React from "react"; import ...

Successfully changing the source and tracking of a video through an onclick button, but the video content remains unchanged

I apologize if this post is a duplicate, but I couldn't find the answer in previous threads. I'm attempting to change the video source using an onclick button. However, even after changing the source, the video remains the same. <video width ...

Conceal elements with a single click of a button

How can I use jQuery to hide all li elements with an aria-label containing the word COMPANY when the Search from documents button is clicked? Here is the HTML code: <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" t ...

Extracting Parameters using JQuery's load Method

On a webpage, I am attempting to load a jsp page (another.jsp) within a div element while passing parameters. $("#div").load('another.jsp?a=1&b=2'); Despite trying various methods multiple times, I have not been able to get the desired outc ...

Guide to animating the height of a div using jQuery:

I'm hoping to create a cool animation effect where a certain part of a div expands to 100% width when clicked, and then reverts back to its original height on a second click. I've tried writing some code for this, but it's not working as exp ...

Creating multiple asynchronous calls within a loop in JavaScript

I am currently working on a task in my gulpfile.js that involves uploading an app using Gulp and SharePoint. 'use strict'; const gulp = require('gulp'); const build = require('@microsoft/sp-build-web'); const spsync = require ...

Combining various array values into a single key in JSON格式

Issue: I am working on a sign-up form for new users using HTML. The goal is to store multiple arrays (each containing "username: username, password: password, topScore: 0) within one JSON key ("user" key). However, the current functionality only allows f ...

In Angular 5, when you reset a required form control in a reactive form, the required error message beneath the input field is not cleared

Within my template, there is a form that becomes visible when a button is clicked- <form [formGroup]="person" (ngSubmit)="onSubmitNewPerson()" #formDirective="ngForm"> <mat-form-field> < ...

Managing State with Vuex: Storing Getter Results in the State

I'm encountering an issue with my Vuex.Store: My goal is to retrieve an object (getter.getRecipe) by using two state entries as search criteria (state.array & state.selected) through a getter. Then, I want to store the outcome in my state (state. ...

React TextField is not accommodating the new line character ' ' causing recognition issues

Explanation I have encountered an issue while using Material UI TextField and mapping through an array of objects fetched from a MongoDB database. Here is the code snippet in question: {state.map((item) => ( <TextField name=" ...

Discover each *distinct arrangement* from a given array

I'm looking to generate unique combinations of element positions in a JavaScript array. Here's the array I am working with: var places = ['x', 'y', 'z']; The combinations I want are: [0,1], [0,2], [1,2]. Current ...

Instructions for developing an HTML element slider using mouse dragging

I've come across plenty of slider plugins that either only allow clicking to view the next image, or if they do support mouse drag or touch capabilities, they are limited to images. Does anyone know of a plugin or method to create a mouse drag slider ...

Is it accurate to consider all JavaScript code and variables as inherent properties of an execution context?

It's worth considering that everything in JS code can be viewed as a property of an execution context, whether it's a global, function, or eval() execution context. Why is this the case? Each execution context has its own unique lexical and v ...

What is the method to generate an array of values using a single attribute in GeoJSON data?

Note: After reviewing some possible solutions mentioned in this thread, I found that .map is the perfect fit for what I need, which was not covered in the original post. Thomas's response below addresses my specific requirement. In JavaScript, how ca ...

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

Reinitializing a form with jQuery validation inside a modal box

While utilizing jQuery Validate in a form within a jQuery dialog, I am encountering an issue. Upon closing the dialog, I aim to clear all form fields and reset any fields with error feedback displayed. Although the fields are being reset to blank as expec ...

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

I have a dropdown with two options: Indian and Others. When I select Others, I want to display three textboxes - two with date pickers and one with a simple text input field. I have tried writing the following HTML code but I am unable to get the date pick ...

How can we dynamically navigate to the next line within the Material UI DataGrid component when space is limited?

Currently, I am working with the datagrid component from material ui. I have retrieved some data from a database and am attempting to pass it to the datagrid component. However, I have noticed that certain fields contain long strings which do not fully app ...

What is the proper way to employ if and else if statements within Angular2?

Here's a question that has been duplicated on my How to utilize *ngIf else in Angular? post! ...

What circumstances allow @Inject to be optional in Angular?

My Angular service is simple yet causing errors. Here's the code snippet: // service.ts export class SimpleService { // ... } // component.ts @Component({ selector: 'my-component', templateUrl: 'components/mycomp/mycomp.ht ...