What is the process for incorporating a glossiness / specular texture onto a GLTF model?

QUERY:

I currently possess a specular/glossiness texture image for a model that has not yet been integrated into the GLTF model.

Is there a way to incorporate/add this texture to my model in order to achieve a reflective/glossy appearance where required?

I am uncertain about the necessary modifications within the .gltf file to utilize the texture properly.

UPDATE: Included additional lines from the GLTF to provide a clearer understanding of the scenario.


GLTF JSON:

"images": [
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    },
    {
        "name": "...",
        "uri": "..."
    }
],
"samplers": [
    {}
],
"textures": [
    {
        "name": "T_N",
        "sampler": 0,
        "source": 0
    },
    {
        "name": "Map #9",
        "sampler": 0,
        "source": 1
    },
    {
        "name": "T_D",
        "sampler": 0,
        "source": 2
    },
    {
        "name": "Map #6",
        "sampler": 0,
        "source": 3
    },
    {
        "name": "Specular",
        "sampler": 0,
        "source": 4
    }
],

"materials": [
    {
        "name": "Head",
        "alphaMode": "OPAQUE",
        "extras": {
            "fromFBX": {
                "shadingModel": "<unknown>",
                "isTruePBR": false
            }
        },
        "normalTexture": {
            "index": 0,
            "texCoord": 0
        },
        "emissiveTexture": {
            "index": 1,
            "texCoord": 0
        },
        "pbrMetallicRoughness": {
            "baseColorTexture": {
                "index": 2,
                "texCoord": 0
            },
            "baseColorFactor": [
                1.0,
                1.0,
                1.0,
                1.0
            ],
            "metallicFactor": 0.800000002980232,
            "roughnessFactor": 0.600000011920929
        }
    },
    {
        "name": "Body",
        "alphaMode": "BLEND",
        "extras": {
            "fromFBX": {
                "shadingModel": "<unknown>",
                "isTruePBR": true
            }
        },
        "pbrMetallicRoughness": {
            "baseColorTexture": {
                "index": 3,
                "texCoord": 0
            },
            "baseColorFactor": [
                1.0,
                1.0,
                1.0,
                1.0
            ],
            "metallicFactor": 0.80000002980232,
            "roughnessFactor": 0.600000011920929
        },
        "extensions": {
            "KHR_materials_pbrSpecularGlossiness": {
                "specularGlossinessTexture": {
                    "index": 4
                }
            }
        }
    }
],
"meshes": [
    {
        "name": "Head",
        "primitives": [
            {
                "material": 0,
                "mode": 4,
                "attributes": {
                    "COLOR_0": 3,
                    "NORMAL": 2,
                    "POSITION": 1,
                    "TEXCOORD_0": 4
                },
                "indices": 0,
                "extensions": {
                     "KHR_draco_mesh_compression": {
                        "bufferView": 0,
                         "attributes": {
                            "COLOR_0": 2,
                            "NORMAL": 1,
                            "POSITION": 0,
                             "TEXCOORD_0": 3
                        }
                    }
                }
            }
        ]
    },
    {
        "name": "Body",
        "primitives": [
            {
                "material": 1,
                "mode": 4,
                "attributes": {
                    "COLOR_0": 8,
                    "NORMAL": 7,
                    "POSITION": 6,
                    "TEXCOORD_0": 9
                 },
                  "indices": 5,
                "extensions": {
                    "KHR_draco_mesh_compression": {
                        "bufferView": 1,
                        "attributes": {
                            "COLOR_0": 2,
                            "NORMAL": 1,
                           "POSITION": 0,
                           "TEXCOORD_0": 3
                       }
                   }
                }
           }
       ]
   }
],

ISSUE:

Encountering the following error while attempting to load the model with the aforementioned modified GLTF:

{"message":"Cannot read property 'getMaterialType' of undefined","name":"TypeError"} 

Answer №1

Explore the glTF-Sample-Models repository for some inspiring examples. Discover how the same model can be transformed using two distinct PBR workflows:

If your JSON example is based on metal/rough, consider transforming it into spec/gloss by adjusting the metallic and roughness factors with equivalent spec/gloss properties.

For more detailed information, refer to the specifications available here:

To simplify this process, you may want to utilize tools like Substance Painter or Blender, which offer seamless import and export capabilities for glTF files.

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

What is the process for adding a dot to the package.json file using the npm-pkg command?

I need help using the npm pkg set command to create a package.json file with the following structure: { ... "exports": { ".": { "import": "./dist/my-lib.js", "require": "./dist/my-l ...

Transform JSON data into a table format using Python's nested import mechanism

Attempting to import a JSON file, specifically from a FB profile export, which contains multiple nested levels. In Excel, I can easily create a query that transforms all the data into a table within a minute by expanding the nested levels into new columns ...

When attempting to retrieve the content with ASP.NET Core 3.0 using the [FromBody] attribute, a message stating, "The JSON data could not be converted to a String

Encountering a validation error when using [FromBody] string content on an ApiController within ASP.NET Core 3.0: {"type": "https://tools.ietf.org/html/rfc7231#section-6.5.1", "title":"One or more validation errors occurred.", "status":400, "traceId":" ...

Increase in textbox size depending on selected dropdown value

Our concept involves offering three choices: Email #1 pulled from the database Email #2 retrieved from the database Input a new email Should the user select option #3, a textbox will expand at the bottom of the dropdown menu for easy entry of a new emai ...

The Context API leaves me feeling lost and confused

I am currently utilizing Auth0 for user sign up. My goal is to extract the user id listed under sub:value, and then add it to my database to associate it with a user's post. To achieve this, I am attempting to utilize a Context API to retrieve the use ...

What is the best way to showcase JSON data using jQuery AJAX?

Here is my AJAX request: $(".colorme").on("click", function () { var c = $(this); var b = "id=" + c.attr("id"); $.ajax({ type: "POST", url: "../../colorme", data: b, success: function (a) { ...

Android POST request to send a JSON object containing a URL

Could you please assist me in sending a JSON object using POST HTTP request through HttpClient on an Android device? The issue I am encountering is that the URL within the JSON object gets replaced by forward slashes, like so: The original value of the J ...

Iterate through the xml.documentElement in a loop

I want to show 8 men and 2 women in SVG format. However, my current function only displays one man and woman. How can I add a loop to make this work for all individuals? for (i = 0; i < Serie[n].Number; i++) { return xml.documentElement } The data arr ...

How come the loop is not removing the particular number I specified?

Could someone offer assistance? My code was functioning properly until I implemented a loop to check and remove any array that contains "0.00000000" as the value in the second index. It is now producing errors like "list index out of range.& ...

I'm looking to locate the API documentation for AngularJS TypeScript

After transitioning from using AngularJS 1.4 and plain JavaScript to now working with AngularJS 1.5 but utilizing TypeScript, I have found it challenging to find helpful documentation. For instance, when trying to inject services like $q or $timeout into m ...

How big should the placeholder image be for the image area?

How can I create a loading image to replace a .gif while it loads? I need a placeholder image of about 325x325 (same size as the gif) to keep content in place. I've attempted using background: url() without success and haven't explored JS/jQuery ...

What is the best way to connect click events with ExtJS template elements?

Is there a way to assign a click event to each link tag without directly embedding onclick=.... in the XTemplate code? new Ext.XTemplate( '<ul>', '<tpl for="."><li><a href="#{anchor}">{text}</a></li& ...

What could be causing my Leaflet popup to suddenly close?

My feature allows users to search for a marker and zoom to its location, triggering the popup to open. Everything is functioning correctly, except that the popup closes after the function executes. I am struggling to pinpoint what is causing the popup to c ...

Is webpack necessary for segregating dependencies during installation?

Currently, I'm diving into a tutorial on webpack and it's been three days already, but confusion still reigns! I am delving into the commands: npm i webpack --save-dev I find myself puzzled by the '--save-dev' in the above command whi ...

I am having trouble establishing a connection to the JavaScript MQTT server

Error Encountered: WebSocket Error 12031 - The Server Connection Was Reset In order to subscribe to MQTT messages from the user interface, the code below is being utilized. A Mosquitto broker is currently running on my local machine, with the IP address s ...

Encountering an issue when attempting to update by pressing the button

I am encountering a challenge in my Vue application that involves inserting, updating, and deleting posts using MongoDB. Specifically, I am facing an issue with the update function. Whenever I attempt to update a post by clicking the corresponding button, ...

Retrieve vuex state in a distinct axios template js file

I have encountered an issue with my Vue project. I am using Vuex to manage the state and making axios requests. To handle the axios requests, I created a separate file with a predefined header setup like this: import axios from 'axios' import st ...

I'm attempting to create a button using html, but I'm puzzled as to why it's not functioning as expected

I've been working on creating a button that, when pressed, generates a new div string based on the node.innerHTML code. For some reason, my code doesn't seem to be functioning properly and I'm not sure why. Here's the HTML: <input ...

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

Executing JavaScript functions within static files in Django

I can't figure out why I'm unable to invoke a javascript function when clicking my Bootstrap button in a Django project. In my directory, I have set up the static folder as "main/static/main/js/script.js". While I can successfully load the stati ...