web-shader-extractor

Extract WebGL, Canvas, and Shader effects from live websites for porting.

Updated Jul 9, 2026
One-click install
npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill web-shader-extractor-ashesoftheundead
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/AshesOfTheUndead/rezurxlib/tree/main/skills/web-shader-extractor
Command: npx skills add https://github.com/AshesOfTheUndead/rezurxlib --skill web-shader-extractor-ashesoftheundead

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node, playwright, npm, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill solves the difficulty of reverse-engineering complex WebGL, Canvas, and Shader visual effects from websites, allowing developers to extract and port them into independent, native projects.

Core Features & Use Cases

  • Automated Extraction: Uses Playwright and curl to capture rendered DOM, network assets, and shader source code from any URL.
  • Technical Analysis: Identifies underlying frameworks like Three.js, Babylon.js, or raw WebGL and provides specific porting strategies.
  • Use Case: If you want to replicate a unique background animation or interactive canvas effect from a competitor's site, this Skill automates the discovery of the shader logic, configuration parameters, and rendering pipeline.

Quick Start

Use the web-shader-extractor skill to analyze the website at https://example.com and extract its canvas shader effects.

Frequently Asked Questions about web-shader-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract WebGL shader source code from a live website?

To extract WebGL shader source code from a live website, use automated Playwright and curl scripts to capture rendered DOM, network assets, and shader source directly from the target URL.

Can I reverse engineer Three.js canvas effects into standalone JavaScript?

Yes, you can reverse engineer Three.js canvas effects into standalone JavaScript by identifying the underlying framework and generating specific porting strategies for the extracted shader logic and configuration parameters.

How does shader deobfuscation work for complex web animations?

Shader deobfuscation for complex web animations works by retrieving the original shader source code and reconstructing the multi-pass rendering pipeline to facilitate porting into independent native projects.

Do I need Node and Playwright to scrape canvas visual effects?

Yes, you need Node and Playwright to scrape canvas visual effects, as these dependencies provide the automated environment setup and browser automation required to capture network assets and render DOM.

What is the best way to port a website's background animation to a native project?

The best way to port a website background animation to a native project is to perform technical analysis on the multi-pass rendering pipeline, extracting configuration parameters and shader logic for reconstruction.

Does this support extracting rendering pipelines from Babylon.js?

Yes, this supports extracting rendering pipelines from Babylon.js by identifying the specific rendering engine and providing tailored porting strategies for the extracted visual effects.