heremaps / harp.gl

3D web map rendering engine written in TypeScript using three.js
Apache License 2.0
1.29k stars 197 forks source link

ConsoleChannel causing perfromance issues, lagging the harp gl map #1799

Closed ghost closed 4 years ago

ghost commented 4 years ago

is there a way to disable harp gl console warnings? or just remove the warnings from ConsoleChannel.js?

"use strict";
/*
 * Copyright (C) 2017-2020 HERE Europe B.V.
 * Licensed under Apache 2.0, see full license in LICENSE
 * SPDX-License-Identifier: Apache-2.0
 */
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConsoleChannel = void 0;
/**
 * Class for the default console channel.
 */
class ConsoleChannel {
    error(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.error(message, ...optionalParams);
    }
    debug(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.debug(message, ...optionalParams);
    }
    info(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.info(message, ...optionalParams);
    }
    log(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.log(message, ...optionalParams);
    }
    trace(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.trace(message, ...optionalParams);
    }
    warn(message, ...optionalParams) {
        // tslint:disable-next-line:no-console
        console.warn(message, ...optionalParams);
    }
}
exports.ConsoleChannel = ConsoleChannel;
//# sourceMappingURL=ConsoleChannel.js.map

these console messages are causing lag and stutter issues in the map.

ghost commented 4 years ago

Okay I just went in the code and commented all the console logs and warns, the lag still exists, try making a sphere projection

FraukeF commented 4 years ago

Hi @sirakc ,

To disable the console logs in the code you can use

LoggerManager.instance.enableAll(false);

Anyway, this does not seem to help your issue. We are aware, that on some machines, there might be some performance issues, as you are describing them, due to the amount of data being processed. We have implemented some measures to optimize the performance in these cases. Can you reproduce the issue, if running i.e. one of the examples: https://www.harp.gl/docs/master/examples/#getting-started_orbiting-view.html

If the issue persists, you might want to set some of the following options:

throttlingEnabled = true maxTilesPerFrame = 1 delayLabelsUntilMovementFinished = true

Best

Frauke

ghost commented 4 years ago

I think the lag is happening due to some missing material VM280 react_devtools_backend.js:2273 MapViewUtils: estimateMeshSize: unidentified material

can you please make an example project with react? like a boliderplate that runs with no error which can then be followed

ghost commented 4 years ago

the PC I am using is Ryzen 5 3600 with GTX 1660 Ti and 16GB of RAM with speed of 3200mhz. There is something missing and everytime it looks for it, it causes the harp to slow down for a second

ghost commented 4 years ago

@FraukeF okay I have narrowed down the problem! the error only shows up when I am zoomed in and looking at some 3D buildings, but the lag still exists even outside, even being completely zoomed out causes that lag, basically lag is everywhere, looks like everytime it tries to et some textture or mesh material it lags out ( my guess, cause of the console error)

FraukeF commented 4 years ago

@sirakc The error you describe seems to be the same issue as in the other issue you reported #1797. So I recommend to first solve the issue with the error messages and see if this maybe also solves the lagging issue.

FraukeF commented 4 years ago

Regarding the react boiler plate app, ... we are working on it and hope to release it soon.

harrycollin commented 4 years ago

@FraukeF the react app boilerplate would be really useful! I'm using react at the moment but I'd love to see an official implementation :)

ghost commented 4 years ago

yea, harp.gl is really great and I love using it, the only obstacle is the implementation and docs, other than that, everything is awesome about it

nzjony commented 4 years ago

@sirakc , is this slow down related to the react app being built and transpiled to ES5?

ghost commented 4 years ago

@nzjony I don't know, can it be? version 0.17.0 worked perfectly, I went back to it

nzjony commented 4 years ago

@sirakc , ok, strange. In that case we would need to do some sort of investigation to see what causes it. We have a ticket internally and I will link it here.

ghost commented 4 years ago

@nzjony I really think its caused by missing files or missing information, for example the way theme is set changed a bit and that can cause a problem or there are many files other than just npm install that are needed to be added manually.

Big evidence:

I saw a change in performance, when I removed castShadow and any shadow related tags from the theme and other json objects that make up the options. when I removed the cast shadow and shadow related options, the globe's performance stablized a bit but then when I zoom in into 3D level, the lag comes back, so its possible its caused by something missing in the themes.

ALSO, I didn't use the default service worker, I had to put in a decoder in the params to make the global even appear with map cause it kept giving me error message that it couldnt find the decoder ( FYI, I used npm i harp maps and all that stuff )

nzjony commented 4 years ago

ALSO, I didn't use the default service worker, I had to put in a decoder in the params to make the global even appear with map cause it kept giving me error message that it couldnt find the decoder ( FYI, I used npm i harp maps and all that stuff )

This is probably the reason for the slow performance, if you don't use webworkers, then you will get very choppy performance, because the decoding of the new tiles is done in the main thread. Try to use the workers and let me know what error you get.

ghost commented 4 years ago

@nzjony how do I do that? it requires a file that I dont have

nzjony commented 4 years ago

@sirakc , if you create a new harp.gl app using yeoman: npx -p yo -p @here/generator-harp.gl yo @here/harp.gl

Then you will get a decoder.ts and also the webpack.config.js file needed to bundle it. Does that help?

ghost commented 4 years ago

@nzjony why is that no were near documentation? and yes, that helps a lot, sets things off in the right direction, I will try this

nzjony commented 4 years ago

@sirakc , I'm in the process of updating the tutorial: https://developer.here.com/tutorials/harpgl/ to include this as the main way to create a new app, it should be updated in the next days so that others won't have to fight as you have.

Thanks for your engagement and I apologize for the frustration you are having!

ghost commented 4 years ago

@nzjony no need for apologizes, you already provide amazing stuff, just try to see docs from the eyes of a noob, who probably never knew about WebGL or Harp.gl, also my entire life is a constant fight lol

nzjony commented 4 years ago

@sirakc , thanks for your feedback, it is great to have some third person perspective to see how we can approve, it is always welcome!