' );
+ $('#sim-data-marker-' + canvas.id).css({
+ 'position': 'absolute',
+ 'left': (Math.round(x + rect.left) - dataMarkerSize / 2) + 'px',
+ 'top': (Math.round(y + rect.top) - dataMarkerSize) + 'px',
+ 'width': dataMarkerSize + 'px',
+ 'height': dataMarkerSize + 'px',
+ 'pointer-events': 'all',
+ 'cursor': 'pointer',
+ 'display': 'none'
+ });
+ canvas.marker = $('#sim-data-marker-' + canvas.id);
+ canvas.marker.on('click touch', function () {
+ canvas.marker.fadeOut(175);
+ canvas.dataMarkerDisplay.stop();
+ });
+ canvas.marker.fadeIn(175);
+ }
+
+
+ canvas.marker.hit = hit;
+ canvas.marker.update = function() {
+ if (!canvas.unitNode) { return; }
+ var screenPoint = vec3.transformMat4(vec3.create(), canvas.marker.hit.pos, canvas.cameraMatrix);
+ var x = screenPoint[0] * (canvas.width / 2) + canvas.width / 2;
+ var y = -screenPoint[1] * (canvas.height / 2) + canvas.height / 2;
+ updateMarker(canvas, Math.round(x), Math.round(y), false, origin, far);
+ canvas.marker.css({
+ 'left': (Math.round(x + rect.left) - dataMarkerSize / 2) + 'px',
+ 'top': (Math.round(y + rect.top) - dataMarkerSize) + 'px'
+ });
+ };
+
+ if (!canvas.dataMarkerDisplay) {
+ var tripToShowData = new Trip([
+ {
+ content : 'X: ' + hit.modelPos [0].toPrecision(3) + '
Y: ' + hit.modelPos [1].toPrecision(3) + '
Z: ' + hit.modelPos [2].toPrecision(3) + '
Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '
X: ' + hit.modelPos [0].toPrecision(3) + '
Y: ' + hit.modelPos [1].toPrecision(3) + '
Z: ' + hit.modelPos [2].toPrecision(3) + '
Value: ' + (Math.round(value * 1000) / 1000).toPrecision(3) + '
'); + + if (reset) { modifyDataMarkersEnabled(true,canvas); } + } +} //}}} function onPan(ev,canvas,displaylog) { //{{{ ev.preventDefault(); @@ -256,20 +341,20 @@ if (canvas.twod) { - canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(0)) * deltaY; - canvas.translation[2] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(0)) * deltaY; + canvas.translation[0] += Math.cos(DEG2RAD * canvas.rotation[0]) * deltaX - Math.sin(DEG2RAD * 0) * deltaY; + canvas.translation[2] += Math.sin(DEG2RAD * canvas.rotation[0]) * deltaX + Math.cos(DEG2RAD * 0) * deltaY; } else { - canvas.translation[0] += Math.cos(radians(canvas.rotation[0])) * deltaX - Math.sin(radians(canvas.rotation[0])) * deltaY; - canvas.translation[2] += Math.sin(radians(canvas.rotation[0])) * deltaX + Math.cos(radians(canvas.rotation[0])) * deltaY; + canvas.translation[0] += Math.cos(DEG2RAD * canvas.rotation[0]) * deltaX - Math.sin(DEG2RAD * canvas.rotation[0]) * deltaY; + canvas.translation[2] += Math.sin(DEG2RAD * canvas.rotation[0]) * deltaX + Math.cos(DEG2RAD * canvas.rotation[0]) * deltaY; } } else { - canvas.rotation[0] += degrees((canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * -2 * canvas.controlSensitivity); - canvas.rotation[1] += degrees((canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * -2 * canvas.controlSensitivity); - - if (canvas.rotation[0] > 360) {canvas.rotation[0] -= 360}; - if (canvas.rotation[0] < -360) {canvas.rotation[0] += 360}; - if (canvas.rotation[1] > 180) {canvas.rotation[1] -= 360}; - if (canvas.rotation[1] < -180) {canvas.rotation[1] += 360}; + canvas.rotation[0] += (canvas.lastDeltaX - ev.deltaX) / canvas.clientWidth * -2 * canvas.controlSensitivity * RAD2DEG; + canvas.rotation[1] += (canvas.lastDeltaY - ev.deltaY) / canvas.clientHeight * -2 * canvas.controlSensitivity * RAD2DEG; + + if (canvas.rotation[0] > 360) { canvas.rotation[0] -= 360; }; + if (canvas.rotation[0] < -360) { canvas.rotation[0] += 360; }; + if (canvas.rotation[1] > 180) { canvas.rotation[1] -= 360; }; + if (canvas.rotation[1] < -180) { canvas.rotation[1] += 360; }; canvas.rotation[0] = clamp(canvas.rotation[0], canvas.rotationAzimuthBounds[0], canvas.rotationAzimuthBounds[1]); @@ -279,14 +364,10 @@ canvas.lastDeltaY = ev.deltaY; - if (displaylog) console.log(canvas.rotation); + if (displaylog) { console.log(canvas.rotation); } } //}}} function onPinch(ev,canvas,displaylog) { //{{{ ev.preventDefault(); - if (ev.type == 'pinchstart') { - canvas.zoomLast = canvas.zoom; - } - else { - modifyZoom(ev.scale * canvas.zoomLast, canvas, displaylog); - } + if (ev.type == 'pinchstart') { canvas.zoomLast = canvas.zoom; } + else { modifyZoom(ev.scale * canvas.zoomLast, canvas, displaylog); } } //}}} function onZoom(ev,canvas,displaylog) { //{{{ @@ -297,5 +378,16 @@ function modifyZoom(value,canvas,displaylog) { //{{{ canvas.zoom = clamp(value, canvas.zoomBounds[0], canvas.zoomBounds[1]); - if (displaylog) console.log(canvas.zoom); + if (displaylog) { console.log(canvas.zoom); } +} //}}} +function modifyDataMarkersEnabled(value,canvas) { //{{{ + canvas.dataMarkersEnabled = value; + if (!canvas.dataMarkersEnabled && canvas.marker) { + canvas.marker.fadeOut(175); + canvas.dataMarkerDisplay.stop(); + } + else if (canvas.dataMarkersEnabled && canvas.marker) { + canvas.marker.fadeIn(175); + canvas.dataMarkerDisplay.start(); + } } //}}} //}}} @@ -312,28 +404,24 @@ var cameraPosition = vec3.create(); - if (canvas.twod) { - mat4.ortho(pMatrix, -aspectRatio*6.371e6/canvas.zoom, aspectRatio*6.371e6/canvas.zoom, -6.371e6/canvas.zoom, 6.371e6/canvas.zoom, -1.0, 1e10); - } - else { - mat4.perspective(pMatrix, 60 * Math.PI / 180, aspectRatio, 1e2, 1e10); - } + if (canvas.twod) { mat4.ortho(pMatrix, -aspectRatio*6.371e6/canvas.zoom, aspectRatio*6.371e6/canvas.zoom, -6.371e6/canvas.zoom, 6.371e6/canvas.zoom, -1.0, 1e10); } + else { mat4.perspective(pMatrix, 45 * DEG2RAD, aspectRatio, 1e3, 1e10); } //Apply worldspace translation - mat4.translate(translateMatrix, translateMatrix, [-canvas["translation"][0],-canvas["translation"][1],-canvas["translation"][2]]); + mat4.translate(translateMatrix, translateMatrix, [-canvas.translation[0],-canvas.translation[1],-canvas.translation[2]]); mat4.multiply(vMatrix, translateMatrix, vMatrix); //Calculate rotation around camera focal point about worldspace origin if (canvas.twod) { - mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, radians(0), [0, 1, 0]); - mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, radians(90), [1, 0, 0]); + mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, DEG2RAD * 0, [0, 1, 0]); + mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * 90, [1, 0, 0]); mat4.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix); } else { - mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, radians(canvas.rotation[0]), [0, 1, 0]); - mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, radians(canvas.rotation[1]), [1, 0, 0]); + mat4.rotate(azimuthRotationMatrix, azimuthRotationMatrix, DEG2RAD * canvas.rotation[0], [0, 1, 0]); + mat4.rotate(elevationRotationMatrix, elevationRotationMatrix, DEG2RAD * canvas.rotation[1], [1, 0, 0]); mat4.multiply(rotationMatrix, elevationRotationMatrix, azimuthRotationMatrix); } - //Apply rotation and scaling transform + //Apply rotation transform mat4.multiply(vMatrix, rotationMatrix, vMatrix); @@ -345,11 +433,12 @@ //Calculate fields for lighting and raycasts mat4.invert(canvas.vInverseMatrix, vMatrix); - vec3.transformMat4(canvas.cameraPosition, cameraPosition, canvas.vInverseMatrix); - + //Apply projection matrix to get camera matrix mat4.multiply(canvas.cameraMatrix, pMatrix, vMatrix); + mat4.invert(canvas.inverseCameraMatrix, canvas.cameraMatrix); + vec3.transformMat4(canvas.cameraPosition, cameraPosition, canvas.inverseCameraMatrix); }//}}} function drawSceneGraphNode(canvas,node) { //{{{ - if (!node["enabled"]) return; + if (!node.enabled) { return; } var gl = canvas.gl; @@ -357,12 +446,12 @@ var mvpMatrix = mat4.create(); - mat4.multiply(mvpMatrix, canvas.cameraMatrix, node["modelMatrix"]); - - if (node["texture"]) node["texture"].bind(0); - if (node["disableDepthTest"]) gl.disable(gl.DEPTH_TEST); - if (node["enableCullFace"]) gl.enable(gl.CULL_FACE); - - gl.cullFace(node["cullFace"]); - gl.lineWidth(node["lineWidth"]); + mat4.multiply(mvpMatrix, canvas.cameraMatrix, node.modelMatrix); + + if (node.texture) { node.texture.bind(0); } + if (node.disableDepthTest) { gl.disable(gl.DEPTH_TEST); } + if (node.enableCullFace) { gl.enable(gl.CULL_FACE); } + + gl.cullFace(node.cullFace); + gl.lineWidth(node.lineWidth); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); @@ -373,5 +462,5 @@ vec3.transformMat4(origin, origin, canvas.vInverseMatrix); vec3.normalize(lightOrigin, lightOrigin); - vec3.sub(cameraPositionRelative, origin, node["translation"]); + vec3.sub(cameraPositionRelative, origin, node.translation); cameraHeight = vec3.length(cameraPositionRelative); @@ -401,14 +490,14 @@ var scaleDepth = atm.scaleDepth; - node["shader"].uniforms({ + node.shader.uniforms({ m4MVP: mvpMatrix, - m4Model: node["modelMatrix"], + m4Model: node.modelMatrix, u_texture: 0, - u_alpha: node["alpha"], - u_maskEnabled: node["maskEnabled"], - u_maskHeight: node["maskHeight"], - u_maskColor: node["maskColor"], + u_alpha: node.alpha, + u_maskEnabled: node.maskEnabled, + u_maskHeight: node.maskHeight, + u_maskColor: node.maskColor, v3CameraPosition: origin, - v3Translate: node["translation"], + v3Translate: node.translation, v3LightPos: lightOrigin, v3InvWavelength: inv_wavelength4, @@ -434,49 +523,46 @@ e: atm.e, attenuation: atm.attenuation - }); - if (node["useIndexBuffer"] == true) node["shader"].draw(node["mesh"], node["drawMode"], "indices"); - else node["shader"].draw(node["mesh"], node["drawMode"]); - + }).draw(node.mesh, node.drawMode, 'triangles'); + gl.enable(gl.DEPTH_TEST); gl.disable(gl.CULL_FACE); } //}}} function draw(canvas,options) { //{{{ - - // Ensure canvas and gl viewport sizes are the same - if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) { - canvas.width = canvas.clientWidth; - canvas.height = canvas.clientHeight; - canvas.gl.viewport(0, 0, canvas.width, canvas.height); - } - - if (canvas.textcanvas) canvas.textcanvas.draw(canvas); + if (canvas.textcanvas) { canvas.textcanvas.draw(canvas); } var nodes = canvas.nodes; if (nodes.length < 1) { - canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)}); + canvas.drawHandler = window.requestAnimationFrame(function(time) { draw(canvas,options); }); return; } - for (var node in nodes) { - if (nodes[node]["texture"] && nodes[node]["texture"]["ready"] == false || nodes[node]["shader"]["ready"] == false) { - canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)}); + for (var node in nodes) { + if ((nodes[node].texture && nodes[node].texture.ready == false) || nodes[node].shader.ready == false || nodes[node].mesh.ready == false) { + canvas.drawHandler = window.requestAnimationFrame(function(time) { draw(canvas,options); }); return; } } + var rect = canvas.getBoundingClientRect(); + canvas.width = rect.width; + canvas.height = rect.height; + var gl = canvas.gl; + gl.makeCurrent(); //litegl function to handle switching between multiple canvases + gl.viewport(0, 0, rect.width, rect.height); gl.clearColor(canvas.backgroundcolor[0], canvas.backgroundcolor[1], canvas.backgroundcolor[2], canvas.backgroundcolor[3]); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - gl.makeCurrent(); updateCameraMatrix(canvas); + + if (canvas.marker) { canvas.marker.update(); } var drawPassNumber = 3; for (var i = drawPassNumber - 1; i >= 0; i--) { for (var node in nodes) { - if (nodes[node]["drawOrder"] == i) drawSceneGraphNode(canvas,nodes[node]); - } - } - - canvas.drawHandler = window.requestAnimationFrame(function(time) {draw(canvas,options)}); + if (nodes[node].drawOrder == i) { drawSceneGraphNode(canvas,nodes[node]); } + } + } + + canvas.drawHandler = window.requestAnimationFrame(function(time) { draw(canvas,options); }); } //}}} //}}}