https://github.com/metaory/shadertoy2webgl
Convert ShaderToy shaders to WebGL2 - CLI and library
https://github.com/metaory/shadertoy2webgl
shadertoy webgl
Last synced: about 1 month ago
JSON representation
Convert ShaderToy shaders to WebGL2 - CLI and library
- Host: GitHub
- URL: https://github.com/metaory/shadertoy2webgl
- Owner: metaory
- License: mit
- Created: 2025-03-24T13:17:59.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2025-03-26T07:51:16.000Z (3 months ago)
- Last Synced: 2025-04-25T11:26:54.820Z (2 months ago)
- Topics: shadertoy, webgl
- Language: JavaScript
- Homepage: https://npmjs.com/package/shadertoy2webgl
- Size: 11.6 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ShaderToy ❯❯ WebGL2
## Installation
```bash
# Install globally
npm install -g shadertoy2webgl
# Or use npx (no installation needed)
npx shadertoy2webgl [...]
# Or install as a project dependency
npm install shadertoy2webgl
```
## CLI Usage
```bash
# Using global installation
shadertoy2webgl [...]
# or
st2webgl [...]
# Using npx (no installation needed)
npx shadertoy2webgl [...]
# Example with multiple shaders
shadertoy2webgl MdX3Rr wdyczG DdcfzH
# Force overwrite existing directories
shadertoy2webgl --force [...]
```
## Library Usage
```javascript
import { shadertoy2webgl } from 'shadertoy2webgl';
// Convert a shader and get paths to generated files
const { html, js } = await shadertoy2webgl('shader-id');
console.log(html, js);
// Example with error handling
try {
const { html, js } = await shadertoy2webgl('MdX3Rr');
console.log('Generated files:', { html, js });
} catch (error) {
console.error('Failed to process shader:', error.message);
}
```
## Features
- Converts ShaderToy shaders to WebGL2
- Handles ShaderToy-specific uniforms (iResolution, iTime, iFrame, iMouse)
- Generates web-compatible HTML and JavaScript
- Zero dependencies
- Modern WebGL2 support
- ESM module support
- Works with Node.js >= 18
## Demos
We provide two sample demos showcasing different shader effects:
st2webgl wdyczG
demo/wdyczG/index.html
shadertoy.com/view/wdyczG
st2webgl DdcfzH
demo/DdcfzH/index.html
shadertoy.com/view/DdcfzH
## Output
The tool generates files in a directory named after the shader ID:
- `index.html`: A standalone HTML file with the shader
- `shader.js`: The WebGL2 shader code
- `shader.json`: Shader metadata and code
If any directory already exists, the tool will refuse to overwrite it unless the `--force` flag is used:
```bash
# Overwrite existing directories
shadertoy2webgl --force [...]
```
## Testing
```bash
# Run tests
npm test
# Run tests with coverage (requires Node.js >= 20)
node --test --coverage test/
```
The test suite verifies:
- Shader fetching and conversion
- File generation
- Error handling
- Output validation
- Uniform handling
## License
[MIT](LICENSE)