My website has a webgl background that experiences lag in Chrome for Mac. All other browsers, including Chrome for Windows, load the website correctly. I have noticed that setting the force color profile to sRGB on Chrome fixes the issue on my personal computer, but the problem persists for other visitors. Is there a solution to this? Here is a JSFiddle link: https://jsfiddle.net/ovmy52uc/ Here is the code snippet:
var SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;
var container;
var camera, scene, renderer;
var particles, particle, count = 0;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
// Initialization function
function init() {
container = $('.webgl .background');
camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
particles = new Array();
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial( {
color: 0xffffff,
program: function ( context ) {
context.beginPath();
context.arc( 0, 0, 0.5, 0, PI2, true );
context.fill();
}
} );
// Additional code for particle generation and rendering
renderer = new THREE.CanvasRenderer();
$(container).append( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false
);
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
// Function to handle window resize
function onWindowResize() {
// Code for resizing
}
// More functions for mouse and touch input handling
// Main animation loop
function animate() {
requestAnimationFrame( animate );
render();
}
// Rendering function with particle movement logic
When loading the page outside of the JSFiddle, it becomes even slower on Chrome for Mac. Any help would be appreciated. Thank you.