我正在关注webgl上的这个教程。
https://github.com/emoller/WebGL101
我被困在第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网格)。