Commit a238250e authored by Matthias Betz's avatar Matthias Betz
Browse files

upload viewer sources

parent cd022528
Pipeline #9199 passed with stages
in 11 seconds
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Aktuelles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<h2> Aktuelles aus dem Projekt: </h2>
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<!-- TODO Newseintrag kopieren und anpasen, Blindtext entfernen -->
<div class="news">
<div class="header">
01.01.1900: Erster Newseintrag
</div>
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque diam ipsum, nec ultricies sem mollis et. Phasellus porttitor nec felis quis ultricies. In venenatis faucibus nisl sed facilisis. Cras sapien nibh, dignissim at eros quis, commodo lobortis eros. Sed a massa eleifend, dictum elit at, blandit magna. Nullam auctor enim nec orci luctus sagittis. Nunc blandit quam nec laoreet egestas. Nulla feugiat nisl lacus, a viverra nisi hendrerit vitae. In nibh arcu, sodales in enim tincidunt, tempus imperdiet ex. Aliquam fermentum augue magna, vel accumsan augue consequat et. Vestibulum id interdum orci, a aliquam sapien. Vivamus eu ipsum sollicitudin, aliquet arcu ut, ornare massa. Suspendisse tincidunt lectus a odio ultrices interdum. Praesent vitae sodales urna, vitae sagittis ex. Vivamus tincidunt nisi ultrices lectus dapibus, at placerat nisl elementum. Fusce cursus, sapien in tincidunt pellentesque, mi erat mollis nibh, ut maximus tortor magna vitae nibh.
</p>
</div>
</div>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"> </script>
</body>
</html>
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<!-- TODO Blindtext anpassen: -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque diam ipsum, nec ultricies sem mollis et. Phasellus porttitor nec felis quis ultricies. In venenatis faucibus nisl sed facilisis. Cras sapien nibh, dignissim at eros quis, commodo lobortis eros. Sed a massa eleifend, dictum elit at, blandit magna. Nullam auctor enim nec orci luctus sagittis. Nunc blandit quam nec laoreet egestas. Nulla feugiat nisl lacus, a viverra nisi hendrerit vitae. In nibh arcu, sodales in enim tincidunt, tempus imperdiet ex. Aliquam fermentum augue magna, vel accumsan augue consequat et. Vestibulum id interdum orci, a aliquam sapien. Vivamus eu ipsum sollicitudin, aliquet arcu ut, ornare massa. Suspendisse tincidunt lectus a odio ultrices interdum. Praesent vitae sodales urna, vitae sagittis ex. Vivamus tincidunt nisi ultrices lectus dapibus, at placerat nisl elementum. Fusce cursus, sapien in tincidunt pellentesque, mi erat mollis nibh, ut maximus tortor magna vitae nibh.
</p><p>
Donec aliquam lacus ut tortor porttitor volutpat. Sed aliquet metus vel ante tempor suscipit. Sed quis ipsum et nibh vehicula fermentum. Aliquam non porta ipsum. Proin interdum tincidunt metus, id venenatis lectus elementum id. Fusce eget velit erat. Aliquam non risus consequat arcu vulputate ultricies.
</p><p>
Integer fermentum, velit at elementum fringilla, tortor ante auctor nisi, eu semper tortor ante et dui. Sed posuere odio eu mi sagittis fringilla. Sed enim risus, tempor sed feugiat et, posuere sed quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam dapibus sodales orci a vestibulum. Ut scelerisque eros non velit pulvinar porttitor. Mauris lobortis dolor a nisl aliquam, vel dictum justo porttitor. Proin finibus, lectus quis commodo elementum, lectus sapien blandit purus, id finibus nisl arcu eget massa. In ut orci sit amet eros facilisis imperdiet ac a felis. Donec ultricies posuere erat sit amet ullamcorper. Cras eget metus sit amet risus molestie venenatis. Nulla venenatis dui sed aliquam volutpat. Duis placerat purus nibh, vitae eleifend lacus pretium et.
</p><p>
Suspendisse porta sit amet purus vel interdum. Sed nibh neque, semper nec venenatis in, aliquam ut ante. Pellentesque a viverra nunc, sit amet luctus nisl. Aliquam quis nulla sed est viverra iaculis. Nullam sodales mi sed sodales egestas. Proin in sollicitudin ipsum. Nunc sem urna, vulputate eu neque sed, aliquet faucibus erat. Ut luctus, magna sed dictum congue, metus nisi aliquet enim, vitae euismod dui lectus id sapien. Nunc euismod orci nulla. Vestibulum congue id neque eget ultricies. Donec hendrerit justo ex, sit amet vestibulum massa consectetur vel. Etiam eu tellus eu magna vestibulum iaculis. Curabitur vulputate elit fringilla purus pharetra rutrum. Vivamus facilisis pharetra fermentum. Quisque sodales, ex vel dignissim viverra, erat velit convallis dolor, at sagittis justo enim in sem. Curabitur at dignissim turpis.
</p><p>
Cras volutpat, augue facilisis facilisis ullamcorper, est mi finibus nisl, nec euismod felis diam nec ligula. Suspendisse aliquam porta purus. Duis sit amet lacus quis ipsum sagittis lacinia in non metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a magna sit amet erat laoreet varius. Nulla ac ipsum lacus. Phasellus nec nisi vel sem mattis lacinia. Nam ultrices dignissim nibh, sit amet luctus odio luctus in. Aliquam fringilla eros non velit pretium rhoncus. Ut purus arcu, ornare sit amet ullamcorper ut, iaculis vel dolor.
</p>
<head>
<script type="text/javascript" src="sax.js"></script>
<script type="text/javascript" src="libtess.min.js"></script>
<script type="text/javascript" src="gl-matrix-min.js"></script>
<script type="text/javascript" src="proj4.js"></script>
<script id="vs" type="x-shader/x-vertex">
#version 300 es
precision mediump float;
in vec3 position;
in vec3 color;
uniform mat4 projViewModel;
out vec3 interpolatedColor;
void main() {
gl_Position = projViewModel * vec4(position, 1);
interpolatedColor = color;
}
</script>
<script id="fs" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
in vec3 interpolatedColor;
out vec4 outputColor;
void main() {
outputColor = vec4(interpolatedColor, 1);
}
</script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
canvas {
width: 75%;
height: 25%;
padding-left: 0;
padding-right: 0;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col mt-2">
<div class="input-group">
<label class="input-group-text" for="input">Open CityGML file for viewing </label>
<input class="form-control" id="input" type="file" />
</div>
</div>
</div>
<div id="progressDiv" class="row" style="display: none;">
<div class="col">
<div class="progress" >
<div id="progress" style="transition: none;" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
<script src="settings.js"> </script>
</body>
</html>
<canvas id="viewport"></canvas>
<script type="text/javascript" src="run_sax.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="GitLab Pages">
<title>Aktuelles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="topbar">
<div id="menu" class="navbar"></div>
</div>
<div class="content">
<h1 id='projectname'></h1> <!--Projektname kommt aus settings.js, hier nichts einfügen-->
<h2> Kontakt: </h2>
<!-- ÄNDERUNGEN NUR NACH DIESER ZEILE -->
<!-- TODO Daten anpasen -->
<div class="news">
<div class="header">
Verantwortliche Person:
</div>
<div class="text">
<p>
Max Mustermann
</p>
<p>
Bei Fragen zum Projekt kontaktieren Sie <a href="mailto:max.mustermann@hft-stuttgart.de">max.mustermann@hft-stuttgart.de</a>
</p>
</div>
</div>
<!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->
</div>
<script src="settings.js"> </script>
</body>
</html>
/*
Copyright 2000, Silicon Graphics, Inc. All Rights Reserved.
Copyright 2015, Google Inc. All Rights Reserved.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice including the dates of first publication and
either this permission notice or a reference to http://oss.sgi.com/projects/FreeB/
shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
SILICON GRAPHICS, INC. BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Original Code. The Original Code is: OpenGL Sample Implementation,
Version 1.2.1, released January 26, 2000, developed by Silicon Graphics,
Inc. The Original Code is Copyright (c) 1991-2000 Silicon Graphics, Inc.
Copyright in any portions created by third parties is as indicated
elsewhere herein. All Rights Reserved.
*/
'use strict';var n;function t(a,b){return a.b===b.b&&a.a===b.a}function u(a,b){return a.b<b.b||a.b===b.b&&a.a<=b.a}function v(a,b,c){var d=b.b-a.b,e=c.b-b.b;return 0<d+e?d<e?b.a-a.a+d/(d+e)*(a.a-c.a):b.a-c.a+e/(d+e)*(c.a-a.a):0}function x(a,b,c){var d=b.b-a.b,e=c.b-b.b;return 0<d+e?(b.a-c.a)*d+(b.a-a.a)*e:0}function z(a,b){return a.a<b.a||a.a===b.a&&a.b<=b.b}function aa(a,b,c){var d=b.a-a.a,e=c.a-b.a;return 0<d+e?d<e?b.b-a.b+d/(d+e)*(a.b-c.b):b.b-c.b+e/(d+e)*(c.b-a.b):0}
function ba(a,b,c){var d=b.a-a.a,e=c.a-b.a;return 0<d+e?(b.b-c.b)*d+(b.b-a.b)*e:0}function ca(a){return u(a.b.a,a.a)}function da(a){return u(a.a,a.b.a)}function A(a,b,c,d){a=0>a?0:a;c=0>c?0:c;return a<=c?0===c?(b+d)/2:b+a/(a+c)*(d-b):d+c/(a+c)*(b-d)};function ea(a){var b=B(a.b);C(b,a.c);C(b.b,a.c);D(b,a.a);return b}function E(a,b){var c=!1,d=!1;a!==b&&(b.a!==a.a&&(d=!0,F(b.a,a.a)),b.d!==a.d&&(c=!0,G(b.d,a.d)),H(b,a),d||(C(b,a.a),a.a.c=a),c||(D(b,a.d),a.d.a=a))}function I(a){var b=a.b,c=!1;a.d!==a.b.d&&(c=!0,G(a.d,a.b.d));a.c===a?F(a.a,null):(a.b.d.a=J(a),a.a.c=a.c,H(a,J(a)),c||D(a,a.d));b.c===b?(F(b.a,null),G(b.d,null)):(a.d.a=J(b),b.a.c=b.c,H(b,J(b)));fa(a)}
function K(a){var b=B(a),c=b.b;H(b,a.e);b.a=a.b.a;C(c,b.a);b.d=c.d=a.d;b=b.b;H(a.b,J(a.b));H(a.b,b);a.b.a=b.a;b.b.a.c=b.b;b.b.d=a.b.d;b.f=a.f;b.b.f=a.b.f;return b}function L(a,b){var c=!1,d=B(a),e=d.b;b.d!==a.d&&(c=!0,G(b.d,a.d));H(d,a.e);H(e,b);d.a=a.b.a;e.a=b.a;d.d=e.d=a.d;a.d.a=e;c||D(d,a.d);return d}function B(a){var b=new M,c=new M,d=a.b.h;c.h=d;d.b.h=b;b.h=a;a.b.h=c;b.b=c;b.c=b;b.e=c;c.b=b;c.c=c;return c.e=b}function H(a,b){var c=a.c,d=b.c;c.b.e=b;d.b.e=a;a.c=d;b.c=c}
function C(a,b){var c=b.f,d=new N(b,c);c.e=d;b.f=d;c=d.c=a;do c.a=d,c=c.c;while(c!==a)}function D(a,b){var c=b.d,d=new ga(b,c);c.b=d;b.d=d;d.a=a;d.c=b.c;c=a;do c.d=d,c=c.e;while(c!==a)}function fa(a){var b=a.h;a=a.b.h;b.b.h=a;a.b.h=b}function F(a,b){var c=a.c,d=c;do d.a=b,d=d.c;while(d!==c);c=a.f;d=a.e;d.f=c;c.e=d}function G(a,b){var c=a.a,d=c;do d.d=b,d=d.e;while(d!==c);c=a.d;d=a.b;d.d=c;c.b=d};function ha(a){var b=0;Math.abs(a[1])>Math.abs(a[0])&&(b=1);Math.abs(a[2])>Math.abs(a[b])&&(b=2);return b};var O=4*1E150;function P(a,b){a.f+=b.f;a.b.f+=b.b.f}function ia(a,b,c){a=a.a;b=b.a;c=c.a;if(b.b.a===a)return c.b.a===a?u(b.a,c.a)?0>=x(c.b.a,b.a,c.a):0<=x(b.b.a,c.a,b.a):0>=x(c.b.a,a,c.a);if(c.b.a===a)return 0<=x(b.b.a,a,b.a);b=v(b.b.a,a,b.a);a=v(c.b.a,a,c.a);return b>=a}function Q(a){a.a.i=null;var b=a.e;b.a.c=b.c;b.c.a=b.a;a.e=null}function ja(a,b){I(a.a);a.c=!1;a.a=b;b.i=a}function ka(a){var b=a.a.a;do a=R(a);while(a.a.a===b);a.c&&(b=L(S(a).a.b,a.a.e),ja(a,b),a=R(a));return a}
function la(a,b,c){var d=new ma;d.a=c;d.e=na(a.f,b.e,d);return c.i=d}function oa(a,b){switch(a.s){case 100130:return 0!==(b&1);case 100131:return 0!==b;case 100132:return 0<b;case 100133:return 0>b;case 100134:return 2<=b||-2>=b}return!1}function pa(a){var b=a.a,c=b.d;c.c=a.d;c.a=b;Q(a)}function T(a,b,c){a=b;for(b=b.a;a!==c;){a.c=!1;var d=S(a),e=d.a;if(e.a!==b.a){if(!d.c){pa(a);break}e=L(b.c.b,e.b);ja(d,e)}b.c!==e&&(E(J(e),e),E(b,e));pa(a);b=d.a;a=d}return b}
function U(a,b,c,d,e,f){var g=!0;do la(a,b,c.b),c=c.c;while(c!==d);for(null===e&&(e=S(b).a.b.c);;){d=S(b);c=d.a.b;if(c.a!==e.a)break;c.c!==e&&(E(J(c),c),E(J(e),c));d.f=b.f-c.f;d.d=oa(a,d.f);b.b=!0;!g&&qa(a,b)&&(P(c,e),Q(b),I(e));g=!1;b=d;e=c}b.b=!0;f&&ra(a,b)}function sa(a,b,c,d,e){var f=[b.g[0],b.g[1],b.g[2]];b.d=null;b.d=a.o?a.o(f,c,d,a.c)||null:null;null===b.d&&(e?a.n||(V(a,100156),a.n=!0):b.d=c[0])}
function ta(a,b,c){var d=[null,null,null,null];d[0]=b.a.d;d[1]=c.a.d;sa(a,b.a,d,[.5,.5,0,0],!1);E(b,c)}function ua(a,b,c,d,e){var f=Math.abs(b.b-a.b)+Math.abs(b.a-a.a),g=Math.abs(c.b-a.b)+Math.abs(c.a-a.a),h=e+1;d[e]=.5*g/(f+g);d[h]=.5*f/(f+g);a.g[0]+=d[e]*b.g[0]+d[h]*c.g[0];a.g[1]+=d[e]*b.g[1]+d[h]*c.g[1];a.g[2]+=d[e]*b.g[2]+d[h]*c.g[2]}
function qa(a,b){var c=S(b),d=b.a,e=c.a;if(u(d.a,e.a)){if(0<x(e.b.a,d.a,e.a))return!1;if(!t(d.a,e.a))K(e.b),E(d,J(e)),b.b=c.b=!0;else if(d.a!==e.a){var c=a.e,f=d.a.h;if(0<=f){var c=c.b,g=c.d,h=c.e,k=c.c,l=k[f];g[l]=g[c.a];k[g[l]]=l;l<=--c.a&&(1>=l?W(c,l):u(h[g[l>>1]],h[g[l]])?W(c,l):va(c,l));h[f]=null;k[f]=c.b;c.b=f}else for(c.c[-(f+1)]=null;0<c.a&&null===c.c[c.d[c.a-1]];)--c.a;ta(a,J(e),d)}}else{if(0>x(d.b.a,e.a,d.a))return!1;R(b).b=b.b=!0;K(d.b);E(J(e),d)}return!0}
function wa(a,b){var c=S(b),d=b.a,e=c.a,f=d.a,g=e.a,h=d.b.a,k=e.b.a,l=new N;x(h,a.a,f);x(k,a.a,g);if(f===g||Math.min(f.a,h.a)>Math.max(g.a,k.a))return!1;if(u(f,g)){if(0<x(k,f,g))return!1}else if(0>x(h,g,f))return!1;var r=h,p=f,q=k,y=g,m,w;u(r,p)||(m=r,r=p,p=m);u(q,y)||(m=q,q=y,y=m);u(r,q)||(m=r,r=q,q=m,m=p,p=y,y=m);u(q,p)?u(p,y)?(m=v(r,q,p),w=v(q,p,y),0>m+w&&(m=-m,w=-w),l.b=A(m,q.b,w,p.b)):(m=x(r,q,p),w=-x(r,y,p),0>m+w&&(m=-m,w=-w),l.b=A(m,q.b,w,y.b)):l.b=(q.b+p.b)/2;z(r,p)||(m=r,r=p,p=m);z(q,y)||
(m=q,q=y,y=m);z(r,q)||(m=r,r=q,q=m,m=p,p=y,y=m);z(q,p)?z(p,y)?(m=aa(r,q,p),w=aa(q,p,y),0>m+w&&(m=-m,w=-w),l.a=A(m,q.a,w,p.a)):(m=ba(r,q,p),w=-ba(r,y,p),0>m+w&&(m=-m,w=-w),l.a=A(m,q.a,w,y.a)):l.a=(q.a+p.a)/2;u(l,a.a)&&(l.b=a.a.b,l.a=a.a.a);r=u(f,g)?f:g;u(r,l)&&(l.b=r.b,l.a=r.a);if(t(l,f)||t(l,g))return qa(a,b),!1;if(!t(h,a.a)&&0<=x(h,a.a,l)||!t(k,a.a)&&0>=x(k,a.a,l)){if(k===a.a)return K(d.b),E(e.b,d),b=ka(b),d=S(b).a,T(a,S(b),c),U(a,b,J(d),d,d,!0),!0;if(h===a.a){K(e.b);E(d.e,J(e));f=c=b;g=f.a.b.a;
do f=R(f);while(f.a.b.a===g);b=f;f=S(b).a.b.c;c.a=J(e);e=T(a,c,null);U(a,b,e.c,d.b.c,f,!0);return!0}0<=x(h,a.a,l)&&(R(b).b=b.b=!0,K(d.b),d.a.b=a.a.b,d.a.a=a.a.a);0>=x(k,a.a,l)&&(b.b=c.b=!0,K(e.b),e.a.b=a.a.b,e.a.a=a.a.a);return!1}K(d.b);K(e.b);E(J(e),d);d.a.b=l.b;d.a.a=l.a;d.a.h=xa(a.e,d.a);d=d.a;e=[0,0,0,0];l=[f.d,h.d,g.d,k.d];d.g[0]=d.g[1]=d.g[2]=0;ua(d,f,h,e,0);ua(d,g,k,e,2);sa(a,d,l,e,!0);R(b).b=b.b=c.b=!0;return!1}
function ra(a,b){for(var c=S(b);;){for(;c.b;)b=c,c=S(c);if(!b.b&&(c=b,b=R(b),null===b||!b.b))break;b.b=!1;var d=b.a,e=c.a,f;if(f=d.b.a!==e.b.a)a:{f=b;var g=S(f),h=f.a,k=g.a,l=void 0;if(u(h.b.a,k.b.a)){if(0>x(h.b.a,k.b.a,h.a)){f=!1;break a}R(f).b=f.b=!0;l=K(h);E(k.b,l);l.d.c=f.d}else{if(0<x(k.b.a,h.b.a,k.a)){f=!1;break a}f.b=g.b=!0;l=K(k);E(h.e,k.b);l.b.d.c=f.d}f=!0}f&&(c.c?(Q(c),I(e),c=S(b),e=c.a):b.c&&(Q(b),I(d),b=R(c),d=b.a));if(d.a!==e.a)if(d.b.a===e.b.a||b.c||c.c||d.b.a!==a.a&&e.b.a!==a.a)qa(a,
b);else if(wa(a,b))break;d.a===e.a&&d.b.a===e.b.a&&(P(e,d),Q(b),I(d),b=R(c))}}
function ya(a,b){a.a=b;for(var c=b.c;null===c.i;)if(c=c.c,c===b.c){var c=a,d=b,e=new ma;e.a=d.c.b;var f=c.f,g=f.a;do g=g.a;while(null!==g.b&&!f.c(f.b,e,g.b));var f=g.b,h=S(f),e=f.a,g=h.a;if(0===x(e.b.a,d,e.a))e=f.a,t(e.a,d)||t(e.b.a,d)||(K(e.b),f.c&&(I(e.c),f.c=!1),E(d.c,e),ya(c,d));else{var k=u(g.b.a,e.b.a)?f:h,h=void 0;f.d||k.c?(k===f?h=L(d.c.b,e.e):h=L(g.b.c.b,d.c).b,k.c?ja(k,h):(e=c,f=la(c,f,h),f.f=R(f).f+f.a.f,f.d=oa(e,f.f)),ya(c,d)):U(c,f,d.c,d.c,null,!0)}return}c=ka(c.i);e=S(c);f=e.a;e=T(a,
e,null);if(e.c===f){var f=e,e=f.c,g=S(c),h=c.a,k=g.a,l=!1;h.b.a!==k.b.a&&wa(a,c);t(h.a,a.a)&&(E(J(e),h),c=ka(c),e=S(c).a,T(a,S(c),g),l=!0);t(k.a,a.a)&&(E(f,J(k)),f=T(a,g,null),l=!0);l?U(a,c,f.c,e,e,!0):(u(k.a,h.a)?d=J(k):d=h,d=L(f.c.b,d),U(a,c,d,d.c,d.c,!1),d.b.i.c=!0,ra(a,c))}else U(a,c,e.c,f,f,!0)}function za(a,b){var c=new ma,d=ea(a.b);d.a.b=O;d.a.a=b;d.b.a.b=-O;d.b.a.a=b;a.a=d.b.a;c.a=d;c.f=0;c.d=!1;c.c=!1;c.h=!0;c.b=!1;d=a.f;d=na(d,d.a,c);c.e=d};function Aa(a){this.a=new Ba;this.b=a;this.c=ia}function na(a,b,c){do b=b.c;while(null!==b.b&&!a.c(a.b,b.b,c));a=new Ba(c,b.a,b);b.a.c=a;return b.a=a};function Ba(a,b,c){this.b=a||null;this.a=b||this;this.c=c||this};function X(){this.d=Y;this.p=this.b=this.q=null;this.j=[0,0,0];this.s=100130;this.n=!1;this.o=this.a=this.e=this.f=null;this.m=!1;this.c=this.r=this.i=this.k=this.l=this.h=null}var Y=0;n=X.prototype;n.x=function(){Z(this,Y)};n.B=function(a,b){switch(a){case 100142:return;case 100140:switch(b){case 100130:case 100131:case 100132:case 100133:case 100134:this.s=b;return}break;case 100141:this.m=!!b;return;default:V(this,100900);return}V(this,100901)};
n.y=function(a){switch(a){case 100142:return 0;case 100140:return this.s;case 100141:return this.m;default:V(this,100900)}return!1};n.A=function(a,b,c){this.j[0]=a;this.j[1]=b;this.j[2]=c};
n.z=function(a,b){var c=b?b:null;switch(a){case 100100:case 100106:this.h=c;break;case 100104:case 100110:this.l=c;break;case 100101:case 100107:this.k=c;break;case 100102:case 100108:this.i=c;break;case 100103:case 100109:this.p=c;break;case 100105:case 100111:this.o=c;break;case 100112:this.r=c;break;default:V(this,100900)}};
n.C=function(a,b){var c=!1,d=[0,0,0];Z(this,2);for(var e=0;3>e;++e){var f=a[e];-1E150>f&&(f=-1E150,c=!0);1E150<f&&(f=1E150,c=!0);d[e]=f}c&&V(this,100155);c=this.q;null===c?(c=ea(this.b),E(c,c.b)):(K(c),c=c.e);c.a.d=b;c.a.g[0]=d[0];c.a.g[1]=d[1];c.a.g[2]=d[2];c.f=1;c.b.f=-1;this.q=c};n.u=function(a){Z(this,Y);this.d=1;this.b=new Ca;this.c=a};n.t=function(){Z(this,1);this.d=2;this.q=null};n.v=function(){Z(this,2);this.d=1};
n.w=function(){Z(this,1);this.d=Y;var a=this.j[0],b=this.j[1],c=this.j[2],d=!1,e=[a,b,c];if(0===a&&0===b&&0===c){for(var b=[-2*1E150,-2*1E150,-2*1E150],f=[2*1E150,2*1E150,2*1E150],c=[],g=[],d=this.b.c,a=d.e;a!==d;a=a.e)for(var h=0;3>h;++h){var k=a.g[h];k<f[h]&&(f[h]=k,g[h]=a);k>b[h]&&(b[h]=k,c[h]=a)}a=0;b[1]-f[1]>b[0]-f[0]&&(a=1);b[2]-f[2]>b[a]-f[a]&&(a=2);if(f[a]>=b[a])e[0]=0,e[1]=0,e[2]=1;else{b=0;f=g[a];c=c[a];g=[0,0,0];f=[f.g[0]-c.g[0],f.g[1]-c.g[1],f.g[2]-c.g[2]];h=[0,0,0];for(a=d.e;a!==d;a=
a.e)h[0]=a.g[0]-c.g[0],h[1]=a.g[1]-c.g[1],h[2]=a.g[2]-c.g[2],g[0]=f[1]*h[2]-f[2]*h[1],g[1]=f[2]*h[0]-f[0]*h[2],g[2]=f[0]*h[1]-f[1]*h[0],k=g[0]*g[0]+g[1]*g[1]+g[2]*g[2],k>b&&(b=k,e[0]=g[0],e[1]=g[1],e[2]=g[2]);0>=b&&(e[0]=e[1]=e[2]=0,e[ha(f)]=1)}d=!0}g=ha(e);a=this.b.c;b=(g+1)%3;c=(g+2)%3;g=0<e[g]?1:-1;for(e=a.e;e!==a;e=e.e)e.b=e.g[b],e.a=g*e.g[c];if(d){e=0;d=this.b.a;for(a=d.b;a!==d;a=a.b)if(b=a.a,!(0>=b.f)){do e+=(b.a.b-b.b.a.b)*(b.a.a+b.b.a.a),b=b.e;while(b!==a.a)}if(0>e)for(e=this.b.c,d=e.e;d!==
e;d=d.e)d.a=-d.a}this.n=!1;e=this.b.b;for(a=e.h;a!==e;a=d)if(d=a.h,b=a.e,t(a.a,a.b.a)&&a.e.e!==a&&(ta(this,b,a),I(a),a=b,b=a.e),b.e===a){if(b!==a){if(b===d||b===d.b)d=d.h;I(b)}if(a===d||a===d.b)d=d.h;I(a)}this.e=e=new Da;d=this.b.c;for(a=d.e;a!==d;a=a.e)a.h=xa(e,a);Ea(e);this.f=new Aa(this);za(this,-O);for(za(this,O);null!==(e=Fa(this.e));){for(;;){a:if(a=this.e,0===a.a)d=Ga(a.b);else if(d=a.c[a.d[a.a-1]],0!==a.b.a&&(a=Ga(a.b),u(a,d))){d=a;break a}if(null===d||!t(d,e))break;d=Fa(this.e);ta(this,e.c,
d.c)}ya(this,e)}this.a=this.f.a.a.b.a.a;for(e=0;null!==(d=this.f.a.a.b);)d.h||++e,Q(d);this.f=null;e=this.e;e.b=null;e.d=null;this.e=e.c=null;e=this.b;for(a=e.a.b;a!==e.a;a=d)d=a.b,a=a.a,a.e.e===a&&(P(a.c,a),I(a));if(!this.n){e=this.b;if(this.m)for(a=e.b.h;a!==e.b;a=d)d=a.h,a.b.d.c!==a.d.c?a.f=a.d.c?1:-1:I(a);else for(a=e.a.b;a!==e.a;a=d)if(d=a.b,a.c){for(a=a.a;u(a.b.a,a.a);a=a.c.b);for(;u(a.a,a.b.a);a=a.e);b=a.c.b;for(c=void 0;a.e!==b;)if(u(a.b.a,b.a)){for(;b.e!==a&&(ca(b.e)||0>=x(b.a,b.b.a,b.e.b.a));)c=
L(b.e,b),b=c.b;b=b.c.b}else{for(;b.e!==a&&(da(a.c.b)||0<=x(a.b.a,a.a,a.c.b.a));)c=L(a,a.c.b),a=c.b;a=a.e}for(;b.e.e!==a;)c=L(b.e,b),b=c.b}if(this.h||this.i||this.k||this.l)if(this.m)for(e=this.b,d=e.a.b;d!==e.a;d=d.b){if(d.c){this.h&&this.h(2,this.c);a=d.a;do this.k&&this.k(a.a.d,this.c),a=a.e;while(a!==d.a);this.i&&this.i(this.c)}}else{e=this.b;d=!!this.l;a=!1;b=-1;for(c=e.a.d;c!==e.a;c=c.d)if(c.c){a||(this.h&&this.h(4,this.c),a=!0);g=c.a;do d&&(f=g.b.d.c?0:1,b!==f&&(b=f,this.l&&this.l(!!b,this.c))),
this.k&&this.k(g.a.d,this.c),g=g.e;while(g!==c.a)}a&&this.i&&this.i(this.c)}if(this.r){e=this.b;for(a=e.a.b;a!==e.a;a=d)if(d=a.b,!a.c){b=a.a;c=b.e;g=void 0;do g=c,c=g.e,g.d=null,null===g.b.d&&(g.c===g?F(g.a,null):(g.a.c=g.c,H(g,J(g))),f=g.b,f.c===f?F(f.a,null):(f.a.c=f.c,H(f,J(f))),fa(g));while(g!==b);b=a.d;a=a.b;a.d=b;b.b=a}this.r(this.b);this.c=this.b=null;return}}this.b=this.c=null};
function Z(a,b){if(a.d!==b)for(;a.d!==b;)if(a.d<b)switch(a.d){case Y:V(a,100151);a.u(null);break;case 1:V(a,100152),a.t()}else switch(a.d){case 2:V(a,100154);a.v();break;case 1:V(a,100153),a.w()}}function V(a,b){a.p&&a.p(b,a.c)};function ga(a,b){this.b=a||this;this.d=b||this;this.a=null;this.c=!1};function M(){this.h=this;this.i=this.d=this.a=this.e=this.c=this.b=null;this.f=0}function J(a){return a.b.e};function Ca(){this.c=new N;this.a=new ga;this.b=new M;this.d=new M;this.b.b=this.d;this.d.b=this.b};function N(a,b){this.e=a||this;this.f=b||this;this.d=this.c=null;this.g=[0,0,0];this.h=this.a=this.b=0};function Da(){this.c=[];this.d=null;this.a=0;this.e=!1;this.b=new Ha}function Ea(a){a.d=[];for(var b=0;b<a.a;b++)a.d[b]=b;a.d.sort(function(a){return function(b,e){return u(a[b],a[e])?1:-1}}(a.c));a.e=!0;Ia(a.b)}function xa(a,b){if(a.e){var c=a.b,d=++c.a;2*d>c.f&&(c.f*=2,c.c=Ja(c.c,c.f+1));var e;0===c.b?e=d:(e=c.b,c.b=c.c[c.b]);c.e[e]=b;c.c[e]=d;c.d[d]=e;c.h&&va(c,d);return e}c=a.a++;a.c[c]=b;return-(c+1)}
function Fa(a){if(0===a.a)return Ka(a.b);var b=a.c[a.d[a.a-1]];if(0!==a.b.a&&u(Ga(a.b),b))return Ka(a.b);do--a.a;while(0<a.a&&null===a.c[a.d[a.a-1]]);return b};function Ha(){this.d=Ja([0],33);this.e=[null,null];this.c=[0,0];this.a=0;this.f=32;this.b=0;this.h=!1;this.d[1]=1}function Ja(a,b){for(var c=Array(b),d=0;d<a.length;d++)c[d]=a[d];for(;d<b;d++)c[d]=0;return c}function Ia(a){for(var b=a.a;1<=b;--b)W(a,b);a.h=!0}function Ga(a){return a.e[a.d[1]]}function Ka(a){var b=a.d,c=a.e,d=a.c,e=b[1],f=c[e];0<a.a&&(b[1]=b[a.a],d[b[1]]=1,c[e]=null,d[e]=a.b,a.b=e,0<--a.a&&W(a,1));return f}
function W(a,b){for(var c=a.d,d=a.e,e=a.c,f=b,g=c[f];;){var h=f<<1;h<a.a&&u(d[c[h+1]],d[c[h]])&&(h+=1);var k=c[h];if(h>a.a||u(d[g],d[k])){c[f]=g;e[g]=f;break}c[f]=k;e[k]=f;f=h}}function va(a,b){for(var c=a.d,d=a.e,e=a.c,f=b,g=c[f];;){var h=f>>1,k=c[h];if(0===h||u(d[k],d[g])){c[f]=g;e[g]=f;break}c[f]=k;e[k]=f;f=h}};function ma(){this.e=this.a=null;this.f=0;this.c=this.b=this.h=this.d=!1}function S(a){return a.e.c.b}function R(a){return a.e.a.b};this.libtess={GluTesselator:X,windingRule:{GLU_TESS_WINDING_ODD:100130,GLU_TESS_WINDING_NONZERO:100131,GLU_TESS_WINDING_POSITIVE:100132,GLU_TESS_WINDING_NEGATIVE:100133,GLU_TESS_WINDING_ABS_GEQ_TWO:100134},primitiveType:{GL_LINE_LOOP:2,GL_TRIANGLES:4,GL_TRIANGLE_STRIP:5,GL_TRIANGLE_FAN:6},errorType:{GLU_TESS_MISSING_BEGIN_POLYGON:100151,GLU_TESS_MISSING_END_POLYGON:100153,GLU_TESS_MISSING_BEGIN_CONTOUR:100152,GLU_TESS_MISSING_END_CONTOUR:100154,GLU_TESS_COORD_TOO_LARGE:100155,GLU_TESS_NEED_COMBINE_CALLBACK:100156},
gluEnum:{GLU_TESS_MESH:100112,GLU_TESS_TOLERANCE:100142,GLU_TESS_WINDING_RULE:100140,GLU_TESS_BOUNDARY_ONLY:100141,GLU_INVALID_ENUM:100900,GLU_INVALID_VALUE:100901,GLU_TESS_BEGIN:100100,GLU_TESS_VERTEX:100101,GLU_TESS_END:100102,GLU_TESS_ERROR:100103,GLU_TESS_EDGE_FLAG:100104,GLU_TESS_COMBINE:100105,GLU_TESS_BEGIN_DATA:100106,GLU_TESS_VERTEX_DATA:100107,GLU_TESS_END_DATA:100108,GLU_TESS_ERROR_DATA:100109,GLU_TESS_EDGE_FLAG_DATA:100110,GLU_TESS_COMBINE_DATA:100111}};X.prototype.gluDeleteTess=X.prototype.x;
X.prototype.gluTessProperty=X.prototype.B;X.prototype.gluGetTessProperty=X.prototype.y;X.prototype.gluTessNormal=X.prototype.A;X.prototype.gluTessCallback=X.prototype.z;X.prototype.gluTessVertex=X.prototype.C;X.prototype.gluTessBeginPolygon=X.prototype.u;X.prototype.gluTessBeginContour=X.prototype.t;X.prototype.gluTessEndContour=X.prototype.v;X.prototype.gluTessEndPolygon=X.prototype.w; if (typeof module !== 'undefined') { module.exports = this.libtess; }
This diff is collapsed.
window.mat4 = glMatrix.mat4
window.vec2 = glMatrix.vec2
window.vec3 = glMatrix.vec3
// read in 512KB slices
var chunk_size = 512 * 1024;
var strict = false;
var options = {
trim: false,
normalize: false,
xmlns: false,
position: false,
strictEntities: true
};
const State = {
SEARCH_FOR_SURFACE_OR_GEOMETRY: 0,
READ_COORDINATES: 3,
}
var currentState = State.SEARCH_FOR_SURFACE_OR_GEOMETRY;
var color = [1.0, 1.0, 1.0];
var axis = vec3.fromValues(19, 0.8, 1.5);
vec3.normalize(axis, axis);
const SCROLL_PERCENTAGE = 0.001;
var parserFile;
var fileSize;
var offset = 0;
var currentPolygon = [];
var coordinateString = "";
var triangulatedPolygons = [];
var viewing;
var bbox;
var clearColor = new Float32Array([0.9411765, 1.0, 1.0, 1.0]);
var clearDepth = new Float32Array([1.0]);
var camera;
var width = 0;
var height = 0;
var skipFirstResizeEvent = false;
var mouseX;
var mouseY;
var fromProjection;
var toProjection;
var canvas = document.getElementById("viewport");
var progress = document.getElementById("progress");
var gl = canvas.getContext('webgl2', { antialias: true });
var isWebGL2 = !!gl;
if (!isWebGL2) {
alert('WebGL 2 is not available. See https://www.khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">How to get a WebGL 2 implementation');
}
canvas.oncontextmenu = function () {
return false;
};
canvas.onwheel = function (event) {
if (camera === undefined) {
return;
}
event.preventDefault();
camera.scroll(event.deltaY);
redraw(gl);
};
canvas.onmousedown = function (event) {
if (camera === undefined) {
return;
}
event.preventDefault();
if (event.buttons === 1 || event.buttons === 2) {
mouseX = event.layerX;
mouseY = event.layerY;
}
};
canvas.onmousemove = function (event) {
if (camera === undefined) {
return;
}
event.preventDefault();
if (event.buttons === 1) {
var deltaX = event.layerX - mouseX;
var deltaY = event.layerY - mouseY;
mouseX = event.layerX;
mouseY = event.layerY;
camera.rotate(deltaX, deltaY);
redraw(gl);
} else if (event.buttons === 2) {
var deltaX = event.layerX - mouseX;
var deltaY = event.layerY - mouseY;
mouseX = event.layerX;
mouseY = event.layerY;
camera.move(deltaX, deltaY);
redraw(gl);
}
};
const resizeObserver = new ResizeObserver(entries => {
if (skipFirstResizeEvent) {
skipFirstResizeEvent = false;
return;
}
for (let entry of entries) {
if (entry.contentBoxSize) {
if (entry.contentBoxSize[0]) {
height = entry.contentBoxSize[0].blockSize;
width = entry.contentBoxSize[0].inlineSize;
} else {
height = entry.contentBoxSize.blockSize;
width = entry.contentBoxSize.inlineSize;
}
} else {
width = entry.contentRect.width;
height = entry.contentRect.height;
}
}
resizeObserver.unobserve(canvas);
skipFirstResizeEvent = true;
canvas.height = height;
canvas.width = width;
resizeObserver.observe(canvas);
if (camera === undefined) {
return;
}
gl.viewport(0, 0, width, height);
camera.reshape(width, height);
redraw(gl);
});
resizeObserver.observe(canvas);
parser = sax.parser(strict, options);
parser.ontext = function (t) {
if (currentState === State.READ_COORDINATES) {
coordinateString += t;
}
};
parser.onattribute = function (attr) {
if (attr.name === "SRSNAME") {
fromProjection = proj4('EPSG:4326');
if (fromProjection.oProj.units === "degrees") {
}
}
}
parser.onopentag = function (node) {
var tagName = node.name.substring(node.name.indexOf(':') + 1);
switch (currentState) {
case State.SEARCH_FOR_SURFACE_OR_GEOMETRY:
var tempColor = getColorForTagName(tagName);
if (tempColor !== undefined) {
color = tempColor
} else if (tagName.startsWith("LOD")) {
var lodChar = tagName.charAt(3);
if (lodChar === "1") {
} else if (lodChar === "2") {
} else if (lodChar === "3") {
} else if (lodChar === "4") {
} else if (lodChar === "0") {
}
} else if (tagName === "EXTERIOR" || tagName === "INTERIOR") {
currentState = State.READ_COORDINATES;
}
break;
}
};
function getColorForTagName(tagName) {
switch (tagName) {
case "GROUNDSURFACE":
return [0.9411765, 0.9019608, 0.54901963];
case "ROOFSURFACE":
return [1.0, 0.0, 0.0];
case "DOOR":
return [1.0, 0.784313, 0.0];
case "WINDOW":
return [0.0, 0.5019608, 0.5019608];
case "WATERBODY":
return [0.5294118, 0.80784315, 0.98039216];
case "BRIDGE":
case "BRIDGEPART":
return [1, 0.49803922, 0.3137255];
case "PLANTCOVER":
case "SOLITARYVEGETATIONOBJECT":
return [0.5647059, 0.93333334, 0.5647059];
case "INTERSECTION":
case "ROAD":
case "RAILWAY":
case "SECTION":
case "SQUARE":
case "TRACK":
case "TRANSPORTATIONCOMPLEX":
case "WATERWAY":
return [0.4, 0.4, 0.4];
}
return undefined;
};
parser.onclosetag = function (node) {
var tagName = node.substring(node.indexOf(':') + 1);
switch (currentState) {
case State.READ_COORDINATES:
if (tagName === "EXTERIOR" || tagName === "INTERIOR") {
var split = coordinateString.trim().split(" ");
var coords = [];
for (var i = 0; i < split.length; i = i + 3) {
var x = parseFloat(split[i]);
var y = parseFloat(split[i + 1]);
var z = parseFloat(split[i + 2]);
bbox.expandX(x);
bbox.expandY(y);
bbox.expandZ(z);
coords.push([x, y, z]);
}
currentPolygon.push(coords);
coordinateString = "";
} else if (tagName === "POLYGON") {
// no more interior rings
var triangles = triangulate(currentPolygon);
var cos = vec3.dot(triangles.normal, axis);
var acos = Math.acos(cos);
acos = acos / Math.PI;
acos = acos * 0.6 + 0.3;
var derivedColor = [color[0] * acos, color[1] * acos, color[2] * acos];
var poly = {
triangles: triangles.vertices,
color: derivedColor,
};
triangulatedPolygons.push(poly);
currentPolygon = [];
currentState = State.SEARCH_FOR_SURFACE_OR_GEOMETRY;
} else if (tagName === "POS") {
coordinateString += " ";
}
break;
case State.SEARCH_FOR_SURFACE_OR_GEOMETRY:
switch (tagName) {
case "GROUNDSURFACE":
case "ROOFSURFACE":
case "DOOR":
case "WINDOW":
case "WATERBODY":
case "BRIDGE":
case "BRIDGEPART":
case "PLANTCOVER":
case "SOLITARYVEGETATIONOBJECT":
case "INTERSECTION":
case "ROAD":
case "RAILWAY":
case "SECTION":
case "SQUARE":
case "TRACK":
case "TRANSPORTATIONCOMPLEX":
case "WATERWAY":
color = [1.0, 1.0, 1.0];
break;
}
break;
}
}
parser.onend = function () {
gl.enable(gl.DEPTH_TEST);
gl.disable(gl.CULL_FACE);
gl.viewport(0, 0, width, height);
viewing = [];
createViewInformation(gl, viewing);
var program = createProgram(gl, getShaderSource('vs'), getShaderSource('fs'));
gl.useProgram(program);
camera = new Camera(program, gl);
var cameraViewDistance = 10000;
camera.reshape(width, height, cameraViewDistance);
var d = bbox.getDiagonalEdgeLength() / Math.tan(degrees_to_radians(30) / 2);
var translateZ = -d;
camera.setDistance(translateZ);
camera.rotate(Math.PI / 2 * 500, 300);
document.getElementById("progressDiv").style.display = "none";
redraw(gl);
};
function createViewInformation(gl, viewing) {
const center = bbox.getCenter();
var vertexDataCount = 0;
for (const poly of triangulatedPolygons) {
vertexDataCount += poly.triangles.length;
}
var vertexData = new Float32Array(vertexDataCount);
var colorData = new Float32Array(vertexDataCount);
var elementData = new Float32Array(vertexDataCount / 3);
var counter = 0;
for (const poly of triangulatedPolygons) {
for (var i = 0; i < poly.triangles.length; i++) {
vertexData[counter] = poly.triangles[i] - center[i % 3];
colorData[counter] = poly.color[i % 3];
counter++;
}
}
for (var i = 0; i < elementData.length; i++) {
elementData[i] = i;
}
var viewInformation = {};
viewInformation.elements = elementData.length;
viewInformation.draw = true;
viewInformation.vao = gl.createVertexArray();
gl.bindVertexArray(viewInformation.vao);
viewInformation.posVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, viewInformation.posVbo);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);
viewInformation.colorVbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, viewInformation.colorVbo);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);
gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW);
viewInformation.indexVbo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, viewInformation.indexVbo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, elementData, gl.STATIC_DRAW);
gl.bindVertexArray(null);
viewing.push(viewInformation);
}
function redraw(gl) {
gl.clearBufferfv(gl.COLOR, 0, clearColor);
gl.clearBufferfv(gl.DEPTH, 0, clearDepth);
gl.bindVertexArray(viewing[0].vao);
gl.drawArrays(gl.TRIANGLES, 0, viewing[0].elements);
}
class BBox {
constructor() {
this.lowerCorner = [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY];
this.upperCorner = [Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY];
}
expandX(x) {
if (this.lowerCorner[0] > x) {
this.lowerCorner[0] = x;
}
if (this.upperCorner[0] < x) {
this.upperCorner[0] = x;
}
}
expandY(y) {
if (this.lowerCorner[1] > y) {
this.lowerCorner[1] = y;
}
if (this.upperCorner[1] < y) {
this.upperCorner[1] = y;
}
}
expandZ(z) {
if (this.lowerCorner[2] > z) {
this.lowerCorner[2] = z;
}
if (this.upperCorner[2] < z) {
this.upperCorner[2] = z;
}
}
getDiagonalEdgeLength() {
var xDif = this.upperCorner[0] - this.lowerCorner[0];
var yDif = this.upperCorner[1] - this.lowerCorner[1];
var zDif = this.upperCorner[2] - this.lowerCorner[2];
return Math.sqrt(xDif * xDif + yDif * yDif + zDif * zDif) * 0.2;
}
getCenter() {
var x = (this.upperCorner[0] + this.lowerCorner[0]) / 2.0;
var y = (this.upperCorner[1] + this.lowerCorner[1]) / 2.0;
var z = (this.upperCorner[2] + this.lowerCorner[2]) / 2.0;
return [x, y, z];
}
}
class Camera {
constructor(shader, gl) {
this.gl = gl;
this.uniformLocation = gl.getUniformLocation(shader, "projViewModel");
this.up = vec3.create();
this.up[2] = 1;
this.distance = 5;
this.eyepos = vec3.create();
this.eyepos[0] = this.distance;
this.centerPos = vec3.create();
this.projMatrix = mat4.create();
this.viewMatrix = mat4.create();
this.projViewMatrix = mat4.create();
this.rotateAroundZ = 0;
this.origin = vec3.create();
}
reshape(width, height, distance) {
const fow = Math.PI / 2;
const aspectRatio = width * 1.0 / height;
mat4.perspective(this.projMatrix, fow, aspectRatio, 1, distance);
this.updateMatrix();
}
updateMatrix() {
mat4.lookAt(this.viewMatrix, this.eyepos, this.centerPos, this.up);
mat4.multiply(this.projViewMatrix, this.projMatrix, this.viewMatrix);
this.gl.uniformMatrix4fv(this.uniformLocation, false, this.projViewMatrix);
}
rotate(dragDiffX, dragDiffY) {
var rotationX = -dragDiffX * 1.0 / 500;
var rotationZ = -dragDiffY * 1.0 / 500;
var tempRotationValue = this.rotateAroundZ + rotationZ;
if (tempRotationValue < -Math.PI / 2 + 0.0001 || tempRotationValue > Math.PI / 2 - 0.0001) {
// to close to 90 degree, stop rotation
rotationZ = 0;
}
this.rotateAroundZ += rotationZ;
var res = vec3.create();
vec3.sub(res, this.eyepos, this.centerPos);
vec3.rotateZ(res, res, this.origin, rotationX);
var rotAxis = vec3.fromValues(res[0], res[1], res[2] + 5);
vec3.cross(rotAxis, rotAxis, res);
vec3.normalize(rotAxis, rotAxis);
this.rotateAroundAxis(res, rotationZ, rotAxis[0], rotAxis[1], rotAxis[2]);
vec3.add(this.eyepos, this.centerPos, res);
this.updateMatrix();
}
rotateAroundAxis(vector, angle, aX, aY, aZ) {
var hangle = angle * 0.5;
var sinAngle = Math.sin(hangle);
var qx = aX * sinAngle, qy = aY * sinAngle, qz = aZ * sinAngle;
var qw = Math.cos(hangle);
var w2 = qw * qw, x2 = qx * qx, y2 = qy * qy, z2 = qz * qz, zw = qz * qw;
var xy = qx * qy, xz = qx * qz, yw = qy * qw, yz = qy * qz, xw = qx * qw;
var x = vector[0], y = vector[1], z = vector[2];
vector[0] = (w2 + x2 - z2 - y2) * x + (-zw + xy - zw + xy) * y + (yw + xz + xz + yw) * z;
vector[1] = (xy + zw + zw + xy) * x + (y2 - z2 + w2 - x2) * y + (yz + yz - xw - xw) * z;
vector[2] = (xz - yw + xz - yw) * x + (yz + yz + xw + xw) * y + (z2 - y2 - x2 + w2) * z;
}
setDistance(distance) {
this.distance = distance;
var res = vec3.create();
vec3.subtract(res, this.centerPos, this.eyepos);
vec3.normalize(res, res);
vec3.scale(res, res, this.distance);
vec3.add(this.eyepos, res, this.centerPos);
this.updateMatrix();
}
scroll(scroll) {
var addedDistance = this.distance * scroll * SCROLL_PERCENTAGE;
this.distance += addedDistance;
this.setDistance(this.distance);
}
move(dragDiffX, dragDiffY) {
var res = vec3.create();
vec3.sub(res, this.centerPos, this.eyepos);
var dir = vec2.fromValues(res[0], res[1]);
vec2.normalize(dir, dir);
var yDrag = vec2.create();
vec2.scale(yDrag, dir, dragDiffY * 0.5);
// handle diffY
vec3.add(this.centerPos, this.centerPos, vec3.fromValues(yDrag[0], yDrag[1], 0));
vec3.add(this.eyepos, this.eyepos, vec3.fromValues(yDrag[0], yDrag[1], 0));
// handle diffX
var temp = dir[0];
dir[0] = dir[1];
dir[1] = -temp;
vec2.scale(dir, dir, -dragDiffX * 0.5);
vec3.add(this.centerPos, this.centerPos, vec3.fromValues(dir[0], dir[1], 0));
vec3.add(this.eyepos, this.eyepos, vec3.fromValues(dir[0], dir[1], 0));
this.updateMatrix();
}
}
function degrees_to_radians(degrees) {
// Store the value of pi.
var pi = Math.PI;
// Multiply degrees by pi divided by 180 to convert to radians.
return degrees * (pi / 180);
}
function getShaderSource(id) {
var content = document.getElementById(id).textContent;
return content.replace(/^\s+|\s+$/g, '');
}
function createShader(gl, source, type) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
return shader;
}
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
var program = gl.createProgram();
var vshader = createShader(gl, vertexShaderSource, gl.VERTEX_SHADER);
var fshader = createShader(gl, fragmentShaderSource, gl.FRAGMENT_SHADER);
gl.attachShader(program, vshader);
gl.deleteShader(vshader);
gl.attachShader(program, fshader);
gl.deleteShader(fshader);
gl.linkProgram(program);
return program;
};
var input = document.getElementById('input');
input.addEventListener("change", function () {
if (this.files && this.files[0]) {
camera = undefined;
parserFile = this.files[0];
fileSize = parserFile.size;
offset = 0;
bbox = new BBox();
setProgress(0);
document.getElementById("progressDiv").style.removeProperty("display");
readSlice();
}
});
function setProgress(progressValue) {
if (progressValue > 1) {
progressValue = 1;
}
progressValue = Math.floor(progressValue * 100);
var fn = function() {
progress.setAttribute("style", "width: " + Number(progressValue) + "%");
progress.ariaValueNow = progressValue;
progress.innerHTML = progressValue + "%";
}
setTimeout(fn);
}
function readSlice() {
setProgress(offset * 1.0 / fileSize);
if (offset >= fileSize) {
// nothing to read anymore
parser.close();
return;
}
var blob = parserFile.slice(offset, offset + chunk_size);
offset += chunk_size;
blob.text().then(t => {
parser.write(t);
readSlice();
});
}
function triangulate(polygon) {
var triangleVerts = [];
tessy.gluTessBeginPolygon(triangleVerts);
var exterior = polygon[0];
var normal = calculateNormal(polygon[0]);
tessy.gluTessNormal(normal[0], normal[1], normal[2]);
tessy.gluTessBeginContour();
var contour = polygon[i];
for (var j = 0; j < exterior.length; j++) {
tessy.gluTessVertex(exterior[j], exterior[j]);
}
tessy.gluTessEndContour();
for (var i = 1; i < polygon.length; i++) {
tessy.gluTessBeginContour();
var contour = polygon[i];
for (var j = 0; j < contour.length; j++) {
tessy.gluTessVertex(contour[j], contour[j]);
}
tessy.gluTessEndContour();
}
tessy.gluTessEndPolygon();
return {
vertices: triangleVerts,
normal: normal
}
}
function calculateNormal(ring) {
var coords = [0, 0, 0];
for (var i = 0; i < ring.length - 1; i++) {
var current = ring[i + 0];
var next = ring[i + 1];
coords[0] += (current[2] + next[2]) * (current[1] - next[1]);
coords[1] += (current[0] + next[0]) * (current[2] - next[2]);
coords[2] += (current[1] + next[1]) * (current[0] - next[0]);
}
if (coords[0] == 0 && coords[1] == 0 && coords[2] == 0) {
// no valid normal vector found
if (ring.length < 3) {
// no three points, return x-axis
return vec3.create([1, 0, 0]);
}
var v1 = ring[0];
var v2 = ring[1];
var v3 = ring[2];
return calculateNormalWithCross(vec3.create(v1), vec3.create(v2), vec3.create(v3));
}
var v = vec3.fromValues(coords[0], coords[1], coords[2]);
vec3.normalize(v, v);
return v;
}
function calculateNormalWithCross(v1, v2, v3) {
var dir1 = vec3.create();
vec3.sub(dir1, v2, v1);
var dir2 = vec3.create();
vec3.sub(dir2, v3, v1);
var cross = vec3.create();
vec3.cross(cross, dir1, dir2);
vec3.normalize(cross, cross);
return cross;
}
var tessy = (function initTesselator() {
// function called for each vertex of tesselator output
function vertexCallback(data, polyVertArray) {
polyVertArray[polyVertArray.length] = data[0];
polyVertArray[polyVertArray.length] = data[1];
polyVertArray[polyVertArray.length] = data[2];
}
function begincallback(type) {
}
function errorcallback(errno) {
}
// callback for when segments intersect and must be split
function combinecallback(coords, data, weight) {
return [coords[0], coords[1], coords[2]];
}
function edgeCallback(flag) {
// don't really care about the flag, but need no-strip/no-fan behavior
}
var tessy = new libtess.GluTesselator();
tessy.gluTessCallback(libtess.gluEnum.GLU_TESS_VERTEX_DATA, vertexCallback);
tessy.gluTessCallback(libtess.gluEnum.GLU_TESS_BEGIN, begincallback);
tessy.gluTessCallback(libtess.gluEnum.GLU_TESS_ERROR, errorcallback);
tessy.gluTessCallback(libtess.gluEnum.GLU_TESS_COMBINE, combinecallback);
tessy.gluTessCallback(libtess.gluEnum.GLU_TESS_EDGE_FLAG, edgeCallback);
return tessy;
})();
\ No newline at end of file
This diff is collapsed.
//TODO Projektnamen setzen:
let projektname= ""
// TODO Link zur Projektseite setzen
let projektseitenlink= ""
// TODO URL zum Projektlogo setzen
let projektlogourl = ""
// KEINE ÄNDERUNG NACH DIESER ZEILE!
let menu = document.getElementById("menu");
//link1: home
let homelink = document.createElement("a");
homelink.href="index.html"
homelink.innerHTML="Home"
menu.appendChild(homelink);
//link2: projektseite
let projectlink = document.createElement("a");
projectlink.href=projektseitenlink
projectlink.innerHTML="Projekt"
menu.appendChild(projectlink);
//link3: aktuelles
let newslink = document.createElement("a");
newslink.href="aktuelles.html"
newslink.innerHTML="Aktuelles"
menu.appendChild(newslink);
//link4: Kontakt
let contactlink = document.createElement("a");
contactlink.href="kontakt.html"
contactlink.innerHTML="Kontakt"
menu.appendChild(contactlink);
//set projectname
document.getElementById("projectname").innerHTML=projektname;
let hftlogo = document.createElement("a");
let topbar = document.getElementById("topbar");
hftlogo.href = "https://hft-stuttgart.de";
hftlogo.innerHTML="<img src='https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg'/>";
topbar.insertBefore(hftlogo,menu);
if(projektlogourl != ""){
let projectlogo = document.createElement("a");
projectlogo.href=projektseitenlink;
projectlogo.innerHTML="<img src='" + projektlogourl + "'/>";
topbar.insertBefore(projectlogo,menu);
}
//footer: add logo innovatice Hochschule
let bmbf = document.createElement('div');
bmbf.innerHTML = "<img src='https://transfer.hft-stuttgart.de/img/footer/Innovative_Hochschule_Initiative_BMBF_GWK_RGB.png' alt='Innovative Hochschule' style='height:90px'/>"
document.body.appendChild(bmbf);
body {
font-family: sans-serif;
margin: auto;
max-width: 1280px;
margin-left:2%;
margin-right:2%;
}
.navbar {
background-color: #cc3125;
border-radius: 2px;
/* max-width: 800px; */
}
.navbar a {
color: #aaa;
display: inline-block;
font-size: 15px;
padding: 10px;
text-decoration: none;
}
.navbar a:hover {
color: #ffffff;
}
#topbar img{
max-width:15%;
margin-right:20px;
}
.content{
margin-left:2%;
margin-right:2%;
}
.header{
font-weight: bold;
}
.news{
background-color: #f5f5f5;
margin-bottom: 20px;
padding-top:10px;
padding-bottom: 10px;
}
var conditions = [[true, true]];
var url;
var position;
var model;
var state = 0;
function updateHideCondition(gmlId) {
conditions.unshift(['${gml_id} === "' + gmlId + '"', false]);
}
function tryGetMap() {
var vc_map = vcs.vcm.Framework.getInstance().getActiveMap();
console.log(vc_map.getScene().canvas);
var cesiumMapLayer;
for (const map of vc_map.layerCollection) {
if (map.name === "3D-Objekt Ebene") {
cesiumMapLayer = map;
}
}
var scene = vc_map.getScene();
scene.pickTranslucentDepth = true;
vc_map.mapElement.addEventListener('click', function (e) {
console.log(e);
if (e.button === 0 && state === 0) {
const feature = scene.pick(new Cesium.Cartesian2(e.layerX, e.layerY));
if (feature) {
updateHideCondition(feature.getProperty("gml_id"));
feature.tileset.style = new Cesium.Cesium3DTileStyle({
show: {
conditions: conditions,
},
});
position = new Cesium.Cartesian2(e.layerX, e.layerY);
uploadModel(vc_map);
}
}
if (e.button === 0 && state === 1) {
state = 2;
}
if (e.button === 0 && state === 2) {
const feature = scene.pick(new Cesium.Cartesian2(e.layerX, e.layerY));
if (feature) {
console.log(feature);
if (feature === model) {
openForm();
}
}
}
vc_map.mapElement.addEventListener("mousemove", (e) => {
if (state === 1 && model !== undefined) {
position = new Cesium.Cartesian2(e.layerX, e.layerY);
var center = vc_map.getScene().pickPosition(position);
console.log("Picked position: " + center);
console.log("Converted: " + convert(center));
model.position = center;
}
});
vc_map.pointerInteractionEvent.addEventListener(function (e) {
});
});
}
function convert(pos) {
let cart = Cesium.Cartographic.fromCartesian(pos);
//console.log("long: " + cart.longitude + ", lat: " + cart.latitude);
return Cesium.Cartesian3.fromDegrees(cart.longitude, cart.latitude, 0);
}
function toDegrees(cartesian3Pos) {
let pos = Cesium.Cartographic.fromCartesian(cartesian3Pos)
return [pos.longitude / Math.PI * 180, pos.latitude / Math.PI * 180, pos.altitude]
}
// This function is called when the file is uploaded or dropped into the upload window
function uploadModel(vc_map) {
// Create an input element
var inputElement = document.createElement("input");
// Set its type to file
inputElement.type = "file";
// Set accept to the file types you want the user to select.
// Include both the file extension and the mime type
inputElement.accept = ".glb, .gltf";
// set onchange event to call callback when user has selected file
inputElement.addEventListener("change", function (e) {
var fileInput = e.target;
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var content = e.target.result;
var blob = new Blob([content], {
type: "application/octet-stream",
});
url = URL.createObjectURL(blob);
var center = vc_map.getScene().pickPosition(position);
console.log(center);
// Add the model to the viewer
model = vc_map.getEntities().add({
name: "gltf",
position: center,
model: {
uri: url,
show: true,
scale: 1.0,
},
});
state = 1;
}
reader.readAsArrayBuffer(file); // glTF files are binary, so use readAsArrayBuffer instead of readAsText
console.log(e);
});
// dispatch a click event to open the file dialog
inputElement.dispatchEvent(new MouseEvent("click"));
}
setTimeout(tryGetMap, 1000); // Retry after 0.5 seconds
window.onclick = function (event) {
let modal = document.getElementById('loginPopup');
if (event.target == modal) {
closeForm();
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment