Bonjour, je ne savais pas exactement où poster ma question donc je l'ai mise ici vue que j'utilise un script.
J'aimerai appliquer un effet de particules qui se déplacent en arrière plan. J'ai d'abord opté pour du CSS avec divers transform, le rendu était nickel mais mon processeur tournait à 80% lorsque la page était ouverte, que ce soit Mozilla ou Chrome : le PC chauffait comme un moteur.
J'ai donc abandonné l'idée et me suis tourné vers une autre méthode. N'y connaissant quasiment rien en tout ce qui est script, j'ai regardé des tutoriels sur la toile et je suis tombé sur quelqu'un qui explique et montre un exemple de comment s'y prendre pour l'effet que je désirais. Alors là, ce fût le Graal ! J'ai eu exactement ce que je cherchais, avec un meilleur rendu et avec des performances utilisées moindres mais qui ne sont toujours pas au top sur Google Chrome. Du coup, j'ai 2 questions :
1° Est-il normal que le script utilise 30% de mon processeur sur Chrome, pour seulement 5% sur Mozilla ? Si non, avez-vous un moyen d'y remédier ?
Ce qui est bien mieux que la méthode CSS mais le PC a tendance à chauffer légèrement quand je suis sur Chrome du coup, sur Mozilla c'est parfait. J'ai pourtant seulement appliqué au maximum 10 particules sur l'écran.
2° Est-il normal que lorsque j'applique à mes particules un effet de flou pour que le rendu soit plus réaliste (je cherche un effet de poussière), le script déployé demande 50% de mon processeur sur Chrome (+20%), pour 8% sur Mozilla (+3%) ? Si non, avez-vous un moyen d'y remédier ?
Les performances restent parfaites à mes yeux pour Mozilla, mais pour Chrome c'est la catastrophe toujours en ayant 10 particules.
<canvas id="canvas"></canvas>
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var mp = 10;
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W,
y: Math.random()*H,
r: Math.random()*2+1,
d: Math.random()*mp
})
}
function draw()
{
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
// ctx.filter = "blur(1px)"; /* Effet qui gonfle le CPU sur Google Chrome de 20%, mais 3% sur Mozilla
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0)
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
if(Math.sin(angle) > 0)
{
}
else
{
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}
setInterval(draw, 33);
}
Effet sans flou (pas réaliste) => 30% CPU sur Chrome et 5% sur Mozilla
Effet avec flou (très réaliste) => 50% CPU sur Chrome et 8% sur Mozilla
Performances sans que le script soit appliqué : Entre 0.5 et 1.5% sur Chrome et Mozilla
Voilà, je rame un peu. J'ai à peu près compris pourquoi le filtre blur détruisait les performances, parce que le filtre est plus long à appliquer que d'autres comme l'opacité. Mais pourquoi donc cela augmente de 20% le processeur utilisé sur Chrome, et seulement 3% sur Mozilla ?
Par contre même sans l'effet blur, Google Chrome me mange un tier du processeur, et cela reste un mystère pour moi.
Honnetement je sais pas si quelqu'un pourra t'apporter une réponse. Cependant j'ai plusieurs remarques
- Chrome et Mozilla sont des navigateurs differents, ils ont différentes optimisations, du coup c'est normal que l'un soit plus rapide que l'autre
- Tu ne devrais pas te focus sur pourquoi le rendu sur Chrome est lent, focus plutot sur ton code, regarde les tutos sur les best practices pour les canvas
- Essaye peut etre de upgrade ton Chrome, peut etre que tu n'as pas la derniere version
- J'ai testé ton code, j'ai pas une augmentation significative de mon CPU, j'avais fait un projet sur les particules aussi, et je crois qu'au dela de 150 particules ca commencais à être lent
Si vous voulez me mp, venez sur Discord (username: Stelyus#8984)
Le nombre de particules est réglé à 10, on est donc loin des 150 ahah.
Tu saurais me dire à combien tu tournes en CPU sur Chrome et Mozilla (avec ou sans le blur ?) ? Au final, c'est peut-être mon PC le soucis, il faudrait que je teste autre part mais j'en ai qu'un...
Mais justement, je me focus du rendu sur Chrome, en espérant que ça vient de mon code qui pose soucis x) mais je n'ai rien trouvé.
Bonsoir, merci pour ta réponse, j'ai essayé ta méthode mais j'ai pas trouvé mon bonheur on dirait... A priori, je l'ai bien appliquée, en essayant de regarder le lien que tu m'as filé. C'est encore pire sur Mozilla maintenant ahah
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
var mp = 10;
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W,
y: Math.random()*H,
r: Math.random()*1+1,
d: Math.random()*mp
})
}
function draw()
{
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.filter = "blur(1px)";
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
window.requestAnimationFrame(draw);
}
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0)
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
if(Math.sin(angle) > 0)
{
}
else
{
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}
// setInterval(draw, 100);
window.requestAnimationFrame(draw);
}
Bonsoir, up du sujet. J'ai réussi à atténuer le CPU à 20% max sur Chrome en augmentant le setInterval de 33ms à 100ms (et ça me flingue la fluidité et le rendu réaliste au passage). Mais c'est toujours beaucoup trop... Mozilla ça reste nickel.
Alors je me demande si ce n'est pas quelque chose dans le code qui pose soucis, j'ai essayé de m'y pencher ce week-end en trifouillant un peu partout mais j'ai rien trouvé de très convaincant.
Effectivement ce genre d'action peut utiliser pas mal de cpu sur chrome.
Personnellement je vois deux pistes d'améliorations :
- utiliser des images au lieu de points. (tu pourrais toujours faire varier la taille des points en utilisant 2 ou 3 images différentes).
- Actuellement tu calcules la prochaine position toutes les 33ms, c'est assez lourd. Pourquoi ne pas remplacer l'interval par des timeout ?
En effet au moment ou tu généres un point tu connais ça direction donc tu pourrais très bien savoir combien de temps il lui faudra pour arriver en base de l'écran, ainsi que les coordonnées en bas de l'écran. A partir de ce moment la il te resterais juste à mettre un timeout pour le moment ou il arrive en bas de l'écran pour le faire remonter en haut.
Effectivement j'ai déjà songé à importé une image de point avec l'effet blur fais sur photoshop etc.. Mais je pensais qu'une image était plus lourde à charger que de dessiner un point ? Non ? J'essaierai !
J'ai modifié le setInterval, je calcule les positions toutes les 100ms dorénavant, et je tombe à 20% sur Chrome. Je vais essayer de caler des timeout pour voir ce que ça donne du coup
Cette charger l'image est beaucoup plus lourd que dessiner un point. Mais l'image sera chargée qu'une fois là ou tu redessines le point 30 fois par seconde (et il faudrait encore le multiplier par le nombre de points).
- Edité par romain-valin 17 mars 2018 à 14:49:26
Développeur PHP / Symfony en Freelance
Effet particules mouvantes - Problème de CPU
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Développeur PHP / Symfony en Freelance
Développeur PHP / Symfony en Freelance