Code informatique

Souris = souffle · B = burst · F = filaire · WebGL2, fond noir, sans dépendances

Particles WebGL2 — cours en 10 étapes (présentation) 1) Structure HTML minimale Une page fond noir avec un unique <canvas> plein écran : c’est la surface de rendu. Copier le code <style> html,body{margin:0;height:100%;background:#000;overflow:hidden} canvas{position:fixed;inset:0;width:100%;height:100%;display:block} </style> <canvas id="gl"></canvas> 2) Canvas + DPR (haute résolution) On utilise le devicePixelRatio (DPR) pour un rendu net et on ajuste le viewport au resize. Copier le code const canvas = document.getElementById('gl'); const gl = canvas.getContext('webgl2', {alpha:false}); let DPR=1, W=0, H=0; function resize(){ DPR = Math.max(1, Math.min(3, window.devicePixelRatio||1)); W = Math.floor(innerWidth * DPR); H = Math.floor(innerHeight * DPR); canvas.width = W; canvas.height = H; gl.viewport(0,0,W,H); } addEventListener('res...