Question

我正在关注webgl上的这个教程。

我被困在第7课，在那里，用xhr，你必须加载一个网格。我对他的思维方式非常着迷，因为他只是使用了获得最终结果所需的东西。我无法复制他的代码（当然我正在使用python -m http.server运行本地Web服务器）甚至复制并粘贴实例中的源代码。 http://emoller.github.io/WebGL101/07-xhr-mesh.html

Firefox和Chrome会出现此错误

> http://localhost:8000/webgl-utils.js(10): Uncaught ERROR: 0:?": syntax
> error

但代码是一样的。这里是。（web的utils.js）

 window.onerror = function(msg, url, lineno) {
    alert(url + '(' + lineno + '): ' + msg);
 }

 function createShader(str, type) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, str);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                throw gl.getShaderInfoLog(shader);
            }
            return shader;
        }

 function createProgram(vstr, fstr) {
            var program = gl.createProgram();
            var vshader = createShader(vstr, gl.VERTEX_SHADER);
            var fshader = createShader(fstr, gl.FRAGMENT_SHADER);
            gl.attachShader(program, vshader);
            gl.attachShader(program, fshader);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program,gl.LINK_STATUS)) {
                throw gl.getProgramInfoLog(program);
            }
            return program;
 }


function screenQuad() {
    var vertexPosBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,vertexPosBuffer);
    var vertices = [-1, -1, 1, -1, -1, 1, 1, 1];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    vertexPosBuffer.itemSize = 2;
    vertexPosBuffer.numItems = 4;
    return vertexPosBuffer;
}

function linkProgram(program) {
    var vshader = createShader(program.vshaderSource, gl.VERTEX_SHADER);
    var fshader = createShader(program.fshaderSource, gl.FRAGMENT_SHADER);
    gl.attachShader(program, vshader);
    gl.attachShader(program, fshader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                throw gl.getProgramInfoLog(program);
    }
}

function loadFile(file, callback, noCache, isJson) {
    var request = new XMLHttpRequest ();
    request.onreadystatechange = function() {
        if (request.readyState == 1) {
            if (isJson){
                request.overrideMimeType('application/json');
            }
            request.send();
        } else if (request.readyState == 4) {
            if (request.status == 200) {
                callback(request.responseText);
            } else if (request.status == 404) {
                throw 'File "' + file + '" does not exist.';
            } else {
                throw 'XHR error' + request.status + '.';
            }
        }
    };
    var url = file;
    if (noCache) {
        url += '?' + (new Date()).getTime();
    }
    request.open('GET', file, true);
}

function loadProgram(vs, fs, callback) {
    var program = gl.createProgram();
    function vshaderLoaded(str) {
        program.vshaderSource = str;
        if (program.fshaderSource) {
            linkProgram(program);
            callback(program);
        }
    }
    function fshaderLoaded(str) {
        program.fshaderSource = str;
        if (program.vshaderSource) {
                linkProgram(program);
                callback(program);
        }
    }
        loadFile(vs,vshaderLoaded,true);
        loadFile(fs,fshaderLoaded,true);
        return program;
}

其他文件是：main.html，我设置画布，torus.json（正在加载的网格）和mesh.js（解析json网格）。

用原始webgl解析json

0 个答案: