Encountering issues with parsing normals in THREE.js json mesh format

Question

Encountering issues with parsing normals in THREE.js json mesh format

UPDATE: The demo is finally live! Check it out here: . Use the dropdown menu to switch between torus models and see the issue in action. Please note that WebGL MRT extensions are required for this demo.

I have been working on developing my own WebGL deferred rendering engine for some time now, and I have successfully created a prototype using GBuffers and MRT extensions that effectively renders teapots. This project was started from scratch as a way for me to learn WebGL thoroughly without relying on any frameworks, while gaining a deep understanding of deferred rendering. For those interested, the source code can be found on GitHub at: https://github.com/bharling/webgl-defer

After getting tired of only seeing teapots, I attempted to implement a loader for models in THREE.js JSON format. While I managed to load meshes with accurate vertices and index buffers, the normals did not render correctly. I chose to support indexed geometry with vertex UVs, vertex normals, and a single material for now (with plans to move towards PBR). Any other data in the JSON file is ignored, and only supported data is written directly to Float32Arrays, among others. Below is the code snippet for importing the model, along with a screenshot showing the abnormal normals being encountered:


// Importing a ThreeJS model
parseThreeJSModel: (data) => {
    // Parsing logic goes here...
}

The screenshot above showcases the world-space normals gbuffer which displays the issue.

One major divergence in my engine is that I do not store face information in classes like `THREE.Face3`, but instead write the data directly into buffer attributes, similar to `THREE.BufferGeometry`.

So far, I had been using the Utah Teapot model from the 'Learning WebGL' course, specifically from this link: . This model works perfectly fine in my engine and supposedly follows an early version of the THREE JSON format. However, even a simple cube exported from the latest Blender exporter does not perform as expected.

Any suggestions or insights would be greatly appreciated. Thank you!

UPDATE: Here is a screenshot showing the normal pass using the teapot model from the WebGL tutorials. Note: I am not implying that the THREE.js exporter is faulty; rather, it seems there might be an issue with my parsing code. After extensively reviewing the GBuffer implementation in this engine over the past year, I am confident it is correct now. I just seem to be struggling with understanding the THREE.js JSON model format.

https://i.sstatic.net/QsoBK.png

javascript three.js webgl deferred-rendering

Answer 1

Answer №1

Unsure if the translation of Three.Face3 to buffers is accurate. Here is a custom Three Json parser that I utilize for loading animated skinned mesh from blender, which could offer some assistance. Note that only partial features are supported, and it generates indexed buffers for use with .drawElements instead of .drawArrays.

function parsePackedArrayHelper(outArray, index, dataArray, componentSize){
    for (var c = 0; c<componentSize; c++){
        outArray.push(dataArray[index*componentSize + c]);
    }
}

function parseThreeJson(geometry){
    if (isString(geometry)){
        geometry = JSON.parse(geometry);
    }

    var faces = geometry["faces"];
    faces = convertQuadToTrig(faces); // recommend using the triangulate modifer in blender
    // and other data manipulations...

    var seenVertices = new Map();
    var currentIndex = 0;
    var maxIndex = 0;

    var c = 0; // current index into the .faces array
    while (c < faces.length){
        var bitInfo = faces[c];
        var hasMaterials = (bitInfo &(1<<1)) !== 0;
        var hasVertexUvs = (bitInfo &(1<<3)) !== 0;
        var hasVertexNormals = (bitInfo &(1<<5)) !== 0;
        var faceIndex = c+1;

        c += (
            4 + //1 for the bitflag and 3 for vertex positions
            (hasMaterials? 1: 0) +
            (hasVertexUvs? 3: 0) +
            (hasVertexNormals ? 3: 0)
        );

        for (var v = 0;v<3;v++){
            var s = 0; 
            var vertIndex = faces[faceIndex+v];
            var uvIndex = -1;
            var normalIndex = -1;
            var materialIndex = -1;
            if (hasMaterials){
                s += 1;
                materialIndex = faces[faceIndex+3];
            }
            if (hasVertexUvs){
                s += 3;
                uvIndex = faces[faceIndex+s+v];
            }
            if (hasVertexNormals){
                s += 3;
                normalIndex = faces[faceIndex+s+v];
            }

            var hash = ""+vertIndex+","+uvIndex+","+normalIndex;
            if (seenVertices.has(hash)){
                indices[currentIndex++] = seenVertices.get(hash);
            } else {
                seenVertices.set(hash, maxIndex);
                indices[currentIndex++] = maxIndex++;
                parsePackedArrayHelper(verticesOut, vertIndex, verticesData, 3);
                if (boneInfluences > 1){
                    // skipping skinning data
                }
                if (hasVertexUvs){
                    parsePackedArrayHelper(uvsOut, uvIndex, uvsData[0], 2);

                    // flip uv vertically; may or may not be needed
                    var lastV = uvsOut[uvsOut.length-1];
                    uvsOut[uvsOut.length-1] = 1.0 - lastV;

                }
                if (hasVertexNormals){
                    parsePackedArrayHelper(normalsOut, normalIndex, normalsData, 3);
                }

                if (hasMaterials){
                    materialIndexOut.push(materialIndex);
                }
            }
        }
    }
}

Answer 2

Unsure if the translation of Three.Face3 to buffers is accurate. Here is a custom Three Json parser that I utilize for loading animated skinned mesh from blender, which could offer some assistance. Note that only partial features are supported, and it generates indexed buffers for use with .drawElements instead of .drawArrays.

function parsePackedArrayHelper(outArray, index, dataArray, componentSize){
    for (var c = 0; c<componentSize; c++){
        outArray.push(dataArray[index*componentSize + c]);
    }
}

function parseThreeJson(geometry){
    if (isString(geometry)){
        geometry = JSON.parse(geometry);
    }

    var faces = geometry["faces"];
    faces = convertQuadToTrig(faces); // recommend using the triangulate modifer in blender
    // and other data manipulations...

    var seenVertices = new Map();
    var currentIndex = 0;
    var maxIndex = 0;

    var c = 0; // current index into the .faces array
    while (c < faces.length){
        var bitInfo = faces[c];
        var hasMaterials = (bitInfo &(1<<1)) !== 0;
        var hasVertexUvs = (bitInfo &(1<<3)) !== 0;
        var hasVertexNormals = (bitInfo &(1<<5)) !== 0;
        var faceIndex = c+1;

        c += (
            4 + //1 for the bitflag and 3 for vertex positions
            (hasMaterials? 1: 0) +
            (hasVertexUvs? 3: 0) +
            (hasVertexNormals ? 3: 0)
        );

        for (var v = 0;v<3;v++){
            var s = 0; 
            var vertIndex = faces[faceIndex+v];
            var uvIndex = -1;
            var normalIndex = -1;
            var materialIndex = -1;
            if (hasMaterials){
                s += 1;
                materialIndex = faces[faceIndex+3];
            }
            if (hasVertexUvs){
                s += 3;
                uvIndex = faces[faceIndex+s+v];
            }
            if (hasVertexNormals){
                s += 3;
                normalIndex = faces[faceIndex+s+v];
            }

            var hash = ""+vertIndex+","+uvIndex+","+normalIndex;
            if (seenVertices.has(hash)){
                indices[currentIndex++] = seenVertices.get(hash);
            } else {
                seenVertices.set(hash, maxIndex);
                indices[currentIndex++] = maxIndex++;
                parsePackedArrayHelper(verticesOut, vertIndex, verticesData, 3);
                if (boneInfluences > 1){
                    // skipping skinning data
                }
                if (hasVertexUvs){
                    parsePackedArrayHelper(uvsOut, uvIndex, uvsData[0], 2);

                    // flip uv vertically; may or may not be needed
                    var lastV = uvsOut[uvsOut.length-1];
                    uvsOut[uvsOut.length-1] = 1.0 - lastV;

                }
                if (hasVertexNormals){
                    parsePackedArrayHelper(normalsOut, normalIndex, normalsData, 3);
                }

                if (hasMaterials){
                    materialIndexOut.push(materialIndex);
                }
            }
        }
    }
}

Answer 3

Answer №2

While this may not be the exact answer you're looking for, it could still provide some useful information.

In situations where you are dealing with basic shapes like the boxes shown in the example, you have the option to utilize THREE.FlatShading instead of manually setting normals. This may prove to be a simpler approach in certain scenarios:

var material = new THREE.???Material({ shading: THREE.FlatShading });

Answer 4

While this may not be the exact answer you're looking for, it could still provide some useful information.

In situations where you are dealing with basic shapes like the boxes shown in the example, you have the option to utilize THREE.FlatShading instead of manually setting normals. This may prove to be a simpler approach in certain scenarios:

var material = new THREE.???Material({ shading: THREE.FlatShading });

Encountering issues with parsing normals in THREE.js json mesh format

Answer №1

Answer №2

Similar questions

What is the best way to utilize AJAX in sending chosen files to a PHP script?

Finding Node.js modules with a specific field: A comprehensive guide

"Enhance the user experience by enabling clickable preview files in dropzone

What is the process for accessing extra scope information with next-auth?

Discover how to achieve the detail page view in Vue Js by clicking on an input field

What is the most efficient way to transfer form data from one JSP page to another?

What are the steps to integrate TypeScript into JavaScript code?

Are there alternative methods for handling routes in React, other than using the react-router-dom@latest library?

403 Error Code - Access Denied when trying to access Cowin Setu APIs

The AngularJS directive is being triggered before the Jquery AJAX request is completed

Is there a way to keep the node text in place and prevent overlapping in my D3.js tree?

The Node.js application successfully receives an emit event from the browser, however, the browser does not receive any emit

What is the best way to center text on an HTML canvas?

Highlighting JavaScript code with React Syntax Highlighter exclusively

Achieve horizontal bar movement by utilizing google.visualization.DataTable in a left-to-right motion

Tips for applying a texture to only one side of a cube without using THREE.MultiMaterial to lower draw calls

How to Improve Performance for 15,000 Socket.io Users

Use Google Maps and MySql to retrieve specific markers within a designated radius using unique latitude and longitude coordinates

Ways to track all requests completed in Nuxt 3

What is the best method for conducting comprehensive testing of all projects and libraries within NestJS (nx)?