私は WebGL を学び始めていますが、グラフィックスの経験はまったくありません。
完全なメッシュを 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();
}
今、私はそれらのファイルを持っています:
私がこれまでに行ったことは次のとおりです。
オンラインで見つかったこのスクリプトを使用して、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 ファイルが何であるかさえ正確には知りませんし、それらについてはまったく経験がありません。これは私の最初の試みなので、しばらくお待ちください!
また、私の英語が下手でしたらごめんなさい！
編集: また、ランダム モデル ローダーを使用してメッシュをロードすると、すべての頂点が正しく変換されていないことがわかりました (たとえば、床がありません)。さらに、すべてにテクスチャを使用すると、一部のパーツ (コロネード) が完全に透明にレンダリングされます... コンバーターが悪いのかもしれません。まともなコンバーターを書くチャンスはありますか? そのためのドキュメントはどこにありますか? 再度、感謝します