Привет форумчане!
Сначала посмотрите сам проект:
http://test3.stdmed.ru
Пилю проект по картам (mapbox GL JS)
Прикрутил сверху слой с визуализацией (Three.js)
Получается вроде норм, но вот все медленнее и медленнее все ворочается в браузере. Боюсь что когда я допилю функционал, приложение совсем помрет
Подскажите, если кто знает как мне поднять производительность?
Если что вот код app2.js (правда он большой, хоть я и удалил из него половину а то не влазиет):
$.getJSON('geo.json', function(info){
data = info;
for (var j = 0; j<data.length; j++) {
type[j] = data[j].json_geometry.type;
if (type[j] == "MultiPolygon") {
j++;
};
latlon[j] = data[j].json_geometry.coordinates[0];
}
document.getElementById("log").innerHTML += "> Json data loaded successfully. Objects loaded = " + data.length + "<br>";
buildMap();
});
function buildMap() {
map.on('load', function () {
document.getElementById("log").innerHTML += "> Map Loaded successfully<br>";
initGL();
function initGL() {
document.getElementById("log").innerHTML += "> function initGL() started<br>";
var mapDiv = document.getElementById("map").firstChild;
renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.shadowMap.enabled;
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.domElement.id = 'webGL';
//renderer.setClearColor( 0xff0000, 0.2 );
mapDiv.appendChild( renderer.domElement );
renderer.domElement.style.position = "absolute";
renderer.domElement.style.top = "0px";
renderer.domElement.style.left = "0px";
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 5000 );
//camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1000 );
camera.position.z = 4;
controls = new THREE.TrackballControls( camera, container );
controls.rotateSpeed = 2;
controls.zoomSpeed = 7;
// controls.panSpeed = 3;
controls.noZoom = false;
// controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.maxPolarAngle = Math.PI/2.0;
// LIGHTS
var light;
light = new THREE.AmbientLight( 0xdddddd );
scene.add( light );
// STATS
stats = new Stats();
// remember these initial values
var tanFOV = Math.tan( ( ( Math.PI / 180 ) * camera.fov / 2 ) );
var windowHeight = window.innerHeight;
$("#map").append( stats.dom );
plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry( 2000, 2000, 8, 8 ),
new THREE.MeshBasicMaterial( { visible: false, color: 0xff0000, transparent: true, opacity: 0.4 } )
);
scene.add( plane );
EventsControls2 = new EventsControls( camera, renderer.domElement );
EventsControls2.attach( plane );
EventsControls2.attachEvent( 'mouseOver', function () {
controls.target0.copy( controls.target );
controls.enabled = true;
});
EventsControls2.attachEvent( 'mouseOut', function () {
controls.reset();
controls.target.copy( controls.target0 );
controls.object.position.copy( controls.position0 );
controls.update();
controls.enabled = true;
});
EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.map = plane;
EventsControls.offsetUse = true;
EventsControls.attachEvent( 'mouseOver', function () {
this.container.style.cursor = 'pointer';
mouseOveredObject = this.mouseOveredChild;
prevOpacity = mouseOveredObject.material.opacity;
});
EventsControls.attachEvent( 'mouseOut', function () {
this.container.style.cursor = 'auto';
mouseOveredObject = undefined;
this.mouseOveredChild.material.opacity = prevOpacity;
});
EventsControls.attachEvent( 'dragAndDrop', function () {
this.container.style.cursor = 'move';
});
EventsControls.attachEvent( 'onclick', function () {
controls.enabled = false;
});
EventsControls.attachEvent( 'mouseUp', function () {
this.container.style.cursor = 'auto';
});
THREE.Triangulation.setLibrary('earcut');
/*
function onWindowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.left = -window.innerWidth / 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = -window.innerHeight / 2;
camera.updateProjectionMatrix();
}
*/
function animate() {
requestAnimationFrame( animate );
render();
rotDegree = -1*(map.transform._pitch* 180 / Math.PI);
camera.position.y = Math.sin(THREE.Math.degToRad( rotDegree )) * 4;
camera.position.z = Math.cos(THREE.Math.degToRad( rotDegree )) * 4;
camera.lookAt( scene.position );
stats.update();
if ( !mouseOveredObject ) { } else { mouseOveredObject.material.opacity += 0.02 }
//console.log(map.dragPan._inertia);
//map.dragPan._inertia = [];
/*
if ((flag == 1) && (zGrow < 2)) {
zGrow += 0.01;
group.scale.set(1,1,zGrow)
}
*/
}
function render() {
renderer.render( scene, camera );
}
setTimeout(function(){latlonToWorld()}, 0);
animate();
}
function latlonToPx() {
for (var j = 0; j<data.length; j++) {
intersectsF[j] = [];
for (var i = 0; i<data[j].json_geometry.coordinates[0].length; i++) {
p[j] = [];
p[j][i] = map.project(new mapboxgl.LngLat( latlon[j][i][1],latlon[j][i][1] ));
op.x = ( p[j][i].x / window.innerWidth ) * 2 - 1;
op.y = - ( p[j][i].y / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera( op, camera );
intersects = raycaster.intersectObjects( objarray );
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
intersectsF[j][i][0] = intersects[0].point.x;
intersectsF[j][i][1] = intersects[0].point.y;
}
} else {
INTERSECTED = null;
}
}
}
}
function latlonToWorld() {
mapWidth = window.innerWidth;
mapHeight = window.innerHeight;
mapLonLeft = map.getBounds()._sw.lng;
mapLonRight = map.getBounds()._ne.lng;
mapLonDelta = mapLonRight - mapLonLeft;
mapLatBottom = map.getBounds()._sw.lat;
mapLatBottomDegree = mapLatBottom * Math.PI / 180;
for (var i = 0; i < data.length; i++) {
geometryF[i] = new THREE.Geometry();
coords[i] = data[i].json_geometry.coordinates;
type[i] = data[i].json_geometry.type
for (var j = 0; j < coords[i][0].length; j++) {
//2D coordinates
latitude = coords[i][0][j][1];
longitude = coords[i][0][j][0];
var x = (longitude - mapLonLeft) * (mapWidth / mapLonDelta);
latitude = latitude * Math.PI / 180;
var worldMapWidth = ((mapWidth / mapLonDelta) * 360) / (2 * Math.PI);
var mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(mapLatBottomDegree)) / (1 - Math.sin(mapLatBottomDegree))));
var y = mapHeight - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitude)) / (1 - Math.sin(latitude)))) - mapOffsetY);
var point3D = new THREE.Vector3( ( x / window.innerWidth ) * 2 - 1, -( y / window.innerHeight ) * 2 + 1, 0.5 );
var vertice3D = point3D.unproject(camera);
geometryF[i].vertices.push( vertice3D );
}
}
setTimeout(function(){buildMesh()}, 0);
}
function buildMesh() {
group = new THREE.Object3D();
for (var j = 0; j < geometryF.length; j++) {
var vertices = geometryF[j].vertices;
var holes = [];
var triangles, mesh;
var geometry = new THREE.Geometry();
var material = new THREE.MeshPhongMaterial( { color: 0x33D8DE, specular: 0x825AB6, shininess: 70, shading: THREE.FlatShading, transparent:true, opacity: Math.random()*0.2+0.2} )
//material.color.setHex( Math.random() * 0xffffff );
material.side = THREE.DoubleSide;
geometry.vertices = vertices;
if (type[j] == "MultiPolygon") {
var multitriangles = earcut(vertices, holes);
};
triangles = THREE.ShapeUtils.triangulateShape( vertices, holes );
for( var i = 0; i < triangles.length; i++ ){
geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));
}
mesh = new THREE.Mesh( geometry, material );
objects.push( mesh );
group.add( mesh );
scene.add(group);
EventsControls.attach( group );
}
}
});
