Render GPU-accelerated 2D shapes with Babylon.js and WebGPU.
npx skills add https://github.com/AvneeshSarwate/avTools --skill power2d
Please help me install this Agent Skill. Skill: power2d Source: https://github.com/AvneeshSarwate/avTools/tree/main/skills/power2d Command: npx skills add https://github.com/AvneeshSarwate/avTools --skill power2d
GPU-accelerated 2D rendering for web apps, enabling complex visuals with thousands of shapes using Babylon.js and WebGPU. It provides a pixel-space pipeline with shader-based coordinate transforms and supports code-generated materials for body and stroke rendering.
Install and import the power2d library, initialize a 2D scene with createPower2DScene, create a StyledShape using CirclePts or RectPts, assign a generated material, and animate by updating transform properties (x, y, rotation) each frame.
High-intent search queries and answers about installing and using this skill.
To render thousands of 2D shapes in real-time using Babylon.js, utilize thin instancing and code-generated shader materials to minimize draw calls and maximize GPU throughput for high scene counts.
Babylon.js supports WebGPU for GPU-accelerated 2D rendering by using code-generated materials that function across both WebGPU and WebGL backends to process pixel-space coordinate transforms efficiently.
Creating interactive 2D dashboards with WebGPU is best achieved using a pixel-space rendering pipeline with shader-based coordinate transforms, allowing styled shapes to be animated and updated efficiently each frame.
You can add stroke outlines to 2D shapes in a WebGPU scene by assigning code-generated materials that explicitly support both body and stroke rendering, allowing optional outlines without sacrificing GPU performance.
You can use pixel-space coordinates for 2D UI overlays in Babylon.js by applying a pixelToNDC shader transform that converts pixel values to normalized device coordinates, enabling accurate composition within 2D scenes.
fyunusaInitialize and manage Babylon.js 3D rendering environments with scene and mesh generation.
HuskyDannyGenerate interactive and generative visual art with p5.js.
tanepiperImplement UnrealBloomPass bloom effects in Three.js scenes with React Three Fiber.
marktantongcoExtract GLSL/TSL shaders and WebGL/Canvas effect code from websites.
