Question

我开始学习WebGL，而且我对Graphics没有任何经验。

我需要在WebGL中加载一个完整的网格物体（来自：http://graphics.cs.williams.edu/data/meshes.xml的Dabrovic Sponza）。从今天开始，我加载它的唯一类型是简单的JSON：

function loadModel(){
    var request=new XMLHttpRequest();
    request.open("GET", "sponza.json");
    request.onreadystatechange=function (){
        if(request.readyState==4)
            handleLoadedModel(JSON.parse(request.responseText));
    }
    request.send();   
}

现在我有了这些文件：

enter image description here

到目前为止我所做的是：

我使用在线发现的脚本将obj转换为JSON

    function loadObj(url)
    {
        var req = new XMLHttpRequest();
        req.onreadystatechange = function () { processLoadObj(req) };
        req.open("GET", url, true);
        req.send(null);
    }

    function processLoadObj(req)
    {
        if (req.readyState == 4) {
            doLoadObj(req.responseText);
        }
    }

    function doLoadObj(text)
    {
        vertexArray = [ ];
        normalArray = [ ];
        textureArray = [ ];
        indexArray = [ ];

        var vertex = [ ];
        var normal = [ ];
        var texture = [ ];
        var facemap = { };
        var index = 0;

        var lines = text.split("\n");
        for (var lineIndex in lines) {
            var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");

            // ignore comments
            if (line[0] == "#")
                continue;

            var array = line.split(" ");
            if (array[0] == "v") {
                // vertex
                vertex.push(parseFloat(array[1]));
                vertex.push(parseFloat(array[2]));
                vertex.push(parseFloat(array[3]));
            }
            else if (array[0] == "vt") {
                // normal
                texture.push(parseFloat(array[1]));
                texture.push(parseFloat(array[2]));
            }
            else if (array[0] == "vn") {
                // normal
                normal.push(parseFloat(array[1]));
                normal.push(parseFloat(array[2]));
                normal.push(parseFloat(array[3]));
            }
            else if (array[0] == "f") {
                // face
                if (array.length != 4) {
                    //obj.ctx.console.log("*** Error: face '"+line+"' not handled");
                    continue;
                }

                for (var i = 1; i < 4; ++i) {
                    if (!(array[i] in facemap)) {
                        // add a new entry to the map and arrays
                        var f = array[i].split("/");
                        var vtx, nor, tex;

                        if (f.length == 1) {
                            vtx = parseInt(f[0]) - 1;
                            nor = vtx;
                            tex = vtx;
                        }
                        else if (f.length = 3) {
                            vtx = parseInt(f[0]) - 1;
                            tex = parseInt(f[1]) - 1;
                            nor = parseInt(f[2]) - 1;
                        }
                        else {
                            //obj.ctx.console.log("*** Error: did not understand face '"+array[i]+"'");
                            return null;
                        }

                        // do the vertices
                        var x = 0;
                        var y = 0;
                        var z = 0;
                        if (vtx * 3 + 2 < vertex.length) {
                            x = vertex[vtx*3];
                            y = vertex[vtx*3+1];
                            z = vertex[vtx*3+2];
                        }
                        vertexArray.push(x);
                        vertexArray.push(y);
                        vertexArray.push(z);

                        // do the textures
                        x = 0;
                        y = 0;
                        if (tex * 2 + 1 < texture.length) {
                            x = texture[tex*2];
                            y = texture[tex*2+1];
                        }
                        textureArray.push(x);
                        textureArray.push(y);

                        // do the normals
                        x = 0;
                        y = 0;
                        z = 1;
                        if (nor * 3 + 2 < normal.length) {
                            x = normal[nor*3];
                            y = normal[nor*3+1];
                            z = normal[nor*3+2];
                        }
                        normalArray.push(x);
                        normalArray.push(y);
                        normalArray.push(z);

                        facemap[array[i]] = index++;
                    }

                    indexArray.push(facemap[array[i]]);
                }
            }
        }

        result = {};
        result["vertexPositions"] = vertexArray;
        result["vertexNormals"] = normalArray;
        result["vertexTextureCoords"] = textureArray;
        result["indices"] = indexArray;;


        document.write(JSON.stringify(result));

    }
    </script>
    </head>


    <body onload="loadObj('model.obj');">
    </body>

然后将所有信息放入缓冲区（1表示文本坐标，1表示顶点，1表示法线，1表示索引）

最后使用单一纹理。

结果远远超出了dabrovic sponza（google图像上的随机图片显示了我想要的内容），我该如何使用这些jpg文件和.mtl？

我甚至不知道mtl文件究竟是什么，我没有经历过这些事情，这是我的第一次尝试，所以请耐心等待我！

另外，对不起，如果我的英语不好！

编辑：此外，使用随机模型加载器加载网格我发现并非所有顶点都被正确转换（例如，我没有地板）。此外，如果我使用纹理，一些部分（collonades）被渲染为完全透明......也许我的转换器很糟糕。我有机会写一个像样的转换器吗？哪里可以找到这样做的文件？再次感谢

Answer 1

显然，您的OBJ转换器会忽略MTL文件中包含的材料定义。你娶了这种格式吗？也许装入搅拌机并重新出口为collada？

使用JSON将网格（obj + mtl）加载到WebGL中

1 个答案: