skills.rest
marktantongco
marktantongcoCOMMUNITY
Explore all skills by this author →
GitHub

web-shader-extractor

Extract GLSL/TSL shaders and WebGL/Canvas effect code from websites.

2|Updated Mar 31, 2026
Search Tags:#playwright#extraction#glsl#webgl#threejs#shader#porting
One-click install
npx skills add https://github.com/marktantongco/promptc-os --skill web-shader-extractor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-shader-extractor
Source: https://github.com/marktantongco/promptc-os/tree/main/skills/web-shader-extractor
Command: npx skills add https://github.com/marktantongco/promptc-os --skill web-shader-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

It automates the complete extraction, deobfuscation, and migration of WebGL/Canvas/Shader visual effects from live websites into independent, runnable JavaScript projects so designers and engineers can reproduce or reuse complex visual effects without manual reverse-engineering.

Core Features & Use Cases

  • Rendered capture & asset harvesting: Uses a headless browser to capture the rendered DOM, canvas metadata, screenshots, and runtime network bundles for accurate reconstruction.
  • Engine detection & decoding: Identifies Three.js, PixiJS, Babylon, raw WebGL, TSL-based systems (e.g., shaders.com) and decodes encoded definitions (Base64/XOR) or mapping tables when present.
  • Shader extraction & deobfuscation: Finds GLSL/TSL sources inside bundles, extracts shader strings and related JS render logic, infers minified symbol meanings, and reconstructs readable shader and renderer code.
  • Porting & scaffolding: Generates a runnable project (native WebGL2 or Three.js importmap) with multi-pass FBO pipelines, proper color-space handling, and an optional extraction report documenting decisions and differences.
  • Robust fallbacks: Auto-installs and validates tooling, falls back to static-bundle analysis if headless browser rendering is unavailable, and proposes simplification only after verification.

Quick Start

Use the web-shader-extractor skill to extract shaders from https://example.com and generate a standalone WebGL2 or Three.js project with extracted shaders, assets, and an optional extraction report.

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 shaders from a live Three.js website?▼

You can extract GLSL shaders from a live website by using a headless browser to capture the rendered DOM, download network bundles, detect the Three.js engine, decode obfuscated definitions, and reconstruct the shader source code automatically.

What is the best way to deobfuscate GLSL shader code from an existing web bundle?▼

The best way to deobfuscate GLSL shader code from a web bundle is to scan the downloaded network bundles for shader strings, decode Base64 or XOR encoded definitions, infer minified symbol meanings, and reconstruct readable shader and renderer logic.

Can I port a raw WebGL visual effect to a standalone Three.js project?▼

Yes, you can port a raw WebGL visual effect to a standalone Three.js project by extracting the original shaders and render logic, then scaffolding a new project with an importmap, multi-pass FBO pipelines, and proper color-space handling.

Does the shader extraction process work with PixiJS and Babylon.js sites?▼

Yes, the shader extraction process works with PixiJS and Babylon.js sites by detecting engine signatures during the rendered DOM capture, decoding any encoded definitions, and extracting the underlying GLSL shader sources for migration.

Do I need Playwright installed to extract and port shaders from a website?▼

You need Playwright for rendered DOM capture and asset harvesting, but the tool auto-installs and validates tooling, and it can fall back to static-bundle analysis if headless browser rendering is unavailable.

What happens if my headless browser rendering fails during WebGL asset harvesting?▼

If headless browser rendering fails during WebGL asset harvesting, the tool falls back to static-bundle analysis to scan network bundles and extract shader sources, proposing simplification only after verification.

Related Skills

Explore More Software Engineering Skills→
atro2829-hubatro2829-hub

web-shader-extractor

Extract WebGL, shader, and Canvas effects into standalone JavaScript implementations.

Community
Advanced
ClinscottClinscott

threejs-postprocessing

Enhances Three.js scenes with real-time post-processing effects via EffectComposer.

Community
Advanced
RobpayotRobpayot
31

TSL conversion

Convert Three.js GLSL shader code into TSL node materials.

Community
Intermediate
felipesantiago-coderfelipesantiago-coder

web-shader-extractor

Extract WebGL and Canvas visual effects from websites into standalone JS projects.

Community
Advanced