The Web Shader Extractor helps users extract WebGL and Canvas shader effects from web pages. It is designed for developers looking to replicate and simplify graphical effects safely and efficiently.
$ npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractorThe Web Shader Extractor captures WebGL, Canvas, and shader code directly from live web pages using Chrome DevTools interception. It intercepts shader compilation, framebuffer operations, uniform values, and draw calls to reconstruct the complete rendering pipeline. The tool then deobfuscates and ports extracted effects as independent vanilla JavaScript or framework-based projects. Developers use it to replicate visual effects, recover proprietary shader implementations, and understand complex rendering techniques from existing websites.
Use `npx skills add` to install and start extracting.
Extract WebGL effects from a webpage
Convert Canvas effects into standalone projects
Automate shader extraction for development projects
$ npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractorgit clone https://github.com/lixiaolin94/skillsCopy the install command above and run it in your terminal.
Launch Claude Code, Cursor, or your preferred AI coding agent.
Use the prompt template or examples below to test the skill.
Adapt the skill to your specific use case and workflow.
Extract the WebGL and Canvas shader effects from this webpage: [WEBSITE_URL]. Provide the GLSL/HLSL code for the shaders, along with any associated uniforms, attributes, and JavaScript code that initializes or uses the shaders. If the page uses a framework like Three.js or PixiJS, note that in your response. Focus on extracting only the shader-related code and its dependencies.
### Extracted Vertex Shader (GLSL)
```glsl
attribute vec3 position;
attribute vec2 uv;
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
```
### Extracted Fragment Shader (GLSL)
```glsl
precision highp float;
uniform float time;
uniform sampler2D texture;
varying vec2 vUv;
void main() {
vec2 uv = vUv;
uv.y += sin(uv.x * 10.0 + time) * 0.1;
gl_FragColor = texture2D(texture, uv);
}
```
### Associated JavaScript Code
```javascript
const vertexShader = document.getElementById('vertex-shader').textContent;
const fragmentShader = document.getElementById('fragment-shader').textContent;
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
texture: { value: new THREE.TextureLoader().load('image.png') }
},
vertexShader: vertexShader,
fragmentShader: fragmentShader
});
```
**Framework Used:** Three.js
**Notes:** The shaders are part of a post-processing effect applied to a 3D scene.Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan