How to import textures of OBJ scenes

fselcukcan · October 2, 2019, 7:34am

I cannot import obj scenes with their textures. I use the SceneLoader.AppendAsync function, and I pass the file extension, .obj to it as well. However the models are appended without textures.

What am I missing here?

sebavan · October 2, 2019, 11:34am

Are you sure the .mat containing the material info for obj is accessible.

A repro would be great ?

fselcukcan · October 2, 2019, 1:14pm

I have used the babylonjs sandbox for dragging and dropping an obj system (with .obj, .mtl, and .png files). Although scene explorer shows the texture file in place the scene does not show it on the model.
I have shared here my model files, which are only 2MBs.
ev-tex1.zip (1.8 MB)

sebavan · October 2, 2019, 1:40pm

You are using a diffuse texture but with Kd 0.00 0.00 0.00 in the mtl meaning your texture is multiplied by a diffuse color of 0 so you do not see it.

fselcukcan · October 2, 2019, 1:50pm

I have manually changed the diffuse texture Kd value to Kd 0.50 0.50 0.50 now I see it as red and black grid over the model. I guess it is the obj loader used by the SceneLoader which utilizes HTML Image Elements to retrieve images from source and the source in my case needs some credentials in the http headers of requests. I know no way to change the request headers induced by an HTML Image Element. So I guess I need to circumvent the image loading mechanism available here. Normally I use WebRequest.CustomRequestHeaders to achieve this.
Should I edit the object loader code or are there any more direct way?

sebavan · October 2, 2019, 2:05pm

You can use FileTools.CorsBehavior = “credentials” to override it.

fselcukcan · October 2, 2019, 2:19pm

What credentials this make it include in the request? Does it change the crossOrigin of th eimage element as explained here?
The endpoint serves the resource for these files, and images expecting an Auth header in the request by the way. I think I need a header operation.

sebavan · October 2, 2019, 2:20pm

sorry it should be use-credentials: The crossorigin attribute: Requesting CORS access to content - HTML: Hypertext Markup Language | MDN

fselcukcan · October 2, 2019, 3:35pm

This does not happen when I use gltf files with image files. I guess gltf loader dooes not use the same image eleemnt mechanism to load files.

Deltakosh · October 2, 2019, 3:36pm

It uses the WebRequest object to load images:

github.com

BabylonJS/Babylon.js/blob/6a83bf551d525d5d9d50d40e0c266a1e0d0b63fc/src/Misc/webRequest.ts#L13


/**

 * Extended version of XMLHttpRequest with support for customizations (headers, ...)

 */

export class WebRequest implements IWebRequest {

    private _xhr = new XMLHttpRequest();



    /**

     * Custom HTTP Request Headers to be sent with XMLHttpRequests

     * i.e. when loading files, where the server/service expects an Authorization header

     */

    public static CustomRequestHeaders: { [key: string]: string } = {};



    /**

     * Add callback functions in this array to update all the requests before they get sent to the network

     */

    public static CustomRequestModifiers = new Array<(request: XMLHttpRequest, url: string) => void>();



    private _injectCustomRequestHeaders(): void {

        for (let key in WebRequest.CustomRequestHeaders) {

            const val = WebRequest.CustomRequestHeaders[key];

            if (val) {

fselcukcan · October 4, 2019, 9:15am

I have repeated myself on another post without knowing. Sorry for that. Obj material's textures cannot be downloaded

I have reached to a solution posted there.

Topic		Replies	Views
Obj material's textures cannot be downloaded Questions	6	1492	October 4, 2019
Import .obj with transparent textures Questions	17	2081	November 10, 2021
Trying to understand importing obj & textures Questions	4	259	October 19, 2023
Import .obj file with vertex colors Questions	11	2690	June 17, 2020
Loading objects as blobs Questions	8	1574	June 9, 2022

How to import textures of OBJ scenes

Related topics