PixiJS rendering pipeline: backends, render loop, environments
Comment PixiJS v8 rend les frames — backends WebGL/WebGPU/Canvas, boucle de rendu, render targets et reprise après perte de contexte
- Quoi
- Comment PixiJS v8 rend les frames — backends WebGL/WebGPU/Canvas, boucle de rendu, render targets et reprise après perte de contexte
- Coût
- Gratuit
- Prérequis
- un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill officiel de @pixijs pour le pipeline de rendu de PixiJS v8 : composition du renderer (systems + render pipes), sélection du backend avec `autoDetectRenderer` et l'indication `preference` (une indication, pas une garantie — toujours brancher sur `renderer.name`), la boucle de rendu du TickerPlugin avec ordre de priorité, le rendu dans des RenderTextures et RenderTargets (bind/push/pop, mipLevel, copyDepthTexture), la reprise après perte de contexte WebGL et de device WebGPU, et la couche environnement (`DOMAdapter`) qui adapte la librairie aux navigateurs, Web Workers et SSR — plus la configuration CSP stricte via `pixi.js/unsafe-eval`. Inclut un guide de décision (quelle préférence de backend, rendu manuel vs automatique, setup worker, CSP stricte) et des pièges classiques comme accéder à `app.renderer` avant la résolution de `init()`. Crédit : @pixijs. Bémols honnêtes : le graphe de scène lui-même est couvert par le skill compagnon pixijs-scene-core-concepts — celui-ci concerne le moteur de rendu sous le capot ; licence MIT. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet PixiJS v8 (paquet npm pixi.js) ; rien d'autre — le skill est un guide plus des patterns de code, aucun compte ni clé requis Installe-moi « Pipeline de rendu PixiJS : backends, boucle de rendu, environnements ». Il enseigne à un agent comment PixiJS v8 affiche les pixels : composition du renderer (systems + render pipes), sélection du backend (WebGL/WebGPU/Canvas) avec autoDetectRenderer et l'indication preference, la boucle de rendu du TickerPlugin et l'ordre de priorité, le rendu dans des RenderTextures/RenderTargets, la reprise après perte de contexte WebGL et de device WebGPU, et la couche environnement DOMAdapter pour Web Workers, SSR et CSP stricte — avec un guide de décision et des pièges classiques. Par @pixijs, licence MIT. Dépôt : https://github.com/pixijs/pixijs-skills/blob/main/skills/pixijs-core-concepts/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur, les identifiants uniquement via le coffre sécurisé, les hôtes autorisés déclarés dans le SKILL.md. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « pixijs-core-concepts ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. rien — c'est une référence du pipeline de rendu ; combinez avec pixijs-scene-core-concepts pour les concepts du graphe de scène). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.