Currently, I have a rotating animated globe with randomly changing colored dots. While it functions properly, leaving it running in the background significantly slows down my laptop. Are there any optimizations I can implement to reduce its memory usage?
Upon checking the task manager in Chrome, I noticed that it consumes 12% CPU and 128MB of GPU memory when the tab is active. Is this normal for three.js, or should I consider modifying the code?
ngAfterViewInit() {
if(this.enabled) {
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.rotateSpeed = 0.5;
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.5;
this.controls.rotationSpeed = 0.3;
this.controls.enableZoom = false;
this.controls.autoRotate = true;
this.controls.autoRotateSpeed = -1;
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
this.animate();
const timerId = setInterval(() => this.updateColor(), 650);
}
}
private get enabled(): boolean {
if(this._enabled!==undefined) {
return this._enabled;
}
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
this._enabled = gl && gl instanceof WebGLRenderingContext;
return this._enabled;
}
private initGlobe(): void {
// Original initialization code here
}
animate() {
// Original animation code here
}
nextAnimation() {
// Original next animation code here
}
updateColor() {
// Original color update code here
I have looked into suggestions about merging meshes from other questions, but I am unsure if that would be effective in this case. Thank you!