document.getElementById("body").addEventListener("keydown", mapEvHandler, false);
+ console.log("Events added.");
document.getElementById("copyright").innerHTML =
gMapStyles[gMap.activeMap].copyright;
+ console.log("Init loading tile...");
gLoadingTile = new Image();
- gLoadingTile.src = "style/loading.png";
gLoadingTile.onload = function() {
+ console.log("Loading tile loaded.");
var throwEv = new CustomEvent("prefload-done");
gAction.dispatchEvent(throwEv);
};
+ console.log("Set loading tile...");
+ gLoadingTile.src = "style/loading.png";
}
}
else {
' gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);\n' +
' vTextureCoord = aTextureCoord;\n' +
'}'; },
- getFragShaderSource:function() {
+ getFragShaderSource: function() {
return 'varying highp vec2 vTextureCoord;\n\n' +
'uniform sampler2D uImage;\n\n' +
'void main(void) {\n' +
initGL: function() {
// When called from the event listener, the "this" reference doesn't work, so use the object name.
+ console.log("Initializing WebGL...");
if (gMap.gl) {
gMap.gl.viewport(0, 0, gMap.gl.drawingBufferWidth, gMap.gl.drawingBufferHeight);
gMap.gl.clearColor(0.0, 0.0, 0.0, 0.5); // Set clear color to black, fully opaque.
gMap.gl.clear(gMap.gl.COLOR_BUFFER_BIT|gMap.gl.DEPTH_BUFFER_BIT); // Clear the color.
// Create and initialize the shaders.
+ console.log("Create and compile shaders...");
var vertShader = gMap.gl.createShader(gMap.gl.VERTEX_SHADER);
var fragShader = gMap.gl.createShader(gMap.gl.FRAGMENT_SHADER);
gMap.gl.shaderSource(vertShader, gMap.getVertShaderSource());
return null;
}
+ console.log("Create and link shader program...");
gMap.glShaderProgram = gMap.gl.createProgram();
gMap.gl.attachShader(gMap.glShaderProgram, vertShader);
gMap.gl.attachShader(gMap.glShaderProgram, fragShader);
gMap.glTextureCoordAttr = gMap.gl.getAttribLocation(gMap.glShaderProgram, "aTextureCoord");
gMap.glResolutionAttr = gMap.gl.getUniformLocation(gMap.glShaderProgram, "uResolution");
+ console.log("Set up vertex buffer...");
var tileVerticesBuffer = gMap.gl.createBuffer();
gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, tileVerticesBuffer);
// The vertices are the coordinates of the corner points of the square.
gMap.gl.uniform2f(gMap.glResolutionAttr, gGLMapCanvas.width, gGLMapCanvas.height);
// Create a buffer for the position of the rectangle corners.
+ console.log("Set up coord buffer...");
var mapVerticesTextureCoordBuffer = gMap.gl.createBuffer();
gMap.gl.bindBuffer(gMap.gl.ARRAY_BUFFER, mapVerticesTextureCoordBuffer);
gMap.gl.enableVertexAttribArray(gMap.glVertexPositionAttr);
y: Math.ceil((gMap.pos.y + gMap.baseDim.ht / 2) / gMap.baseDim.tsize) + 1,
z: gMap.pos.z});
console.log("In range: " + tMin.x + "," + tMin.y + "," + tMin.z + " - " + tMax.x + "," + tMax.y + "," + tMax.z);
- for (aTileKey in gMap.glTextures) {
- var keyMatches = aTileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
+ for (var tileKey in gMap.glTextures) {
+ var keyMatches = tileKey.match(/([^:]+)::(\d+),(\d+),(\d+)/);
if (keyMatches && keyMatches[1] != "loading") {
var txData = {
style: keyMatches[1],
}
if (delTx) {
// Delete texture from GL and from the array we are holding.
- gMap.gl.deleteTexture(gMap.glTextures[aTileKey]);
- delete gMap.glTextures[aTileKey];
+ gMap.gl.deleteTexture(gMap.glTextures[tileKey]);
+ delete gMap.glTextures[tileKey];
}
}
}