https://github.com/halvves/shaderpen

Shadertoy like functionality as a portable js library.
https://github.com/halvves/shaderpen

3d canvas glsl shadertoy webgl

Last synced: about 1 month ago
JSON representation

Shadertoy like functionality as a portable js library.

• Host: GitHub
• URL: https://github.com/halvves/shaderpen
• Owner: halvves
• License: mit
• Created: 2017-07-23T15:09:59.000Z (over 7 years ago)
• Default Branch: main
• Last Pushed: 2023-01-03T16:18:08.000Z (almost 2 years ago)
• Last Synced: 2024-11-09T19:21:22.968Z (about 2 months ago)
• Topics: 3d, canvas, glsl, shadertoy, webgl
• Language: JavaScript
• Size: 565 KB
• Stars: 28
• Watchers: 3
• Forks: 6
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Shaderpen

[![Latest NPM release][npm-badge]][npm-badge-url]

[![License][license-badge]][license-badge-url]

_Note: While I still try to support this library and am open to extending it, my focus has turned more towards its spiritual successor: [shader-doodle](https://github.com/halvves/shader-doodle). Please consider giving it a try and directing any issues/ideas/pull requests there._

## About

Shaderpen is a simple library that mimics a lot of the same functionality seen in Shadertoy. It sets up the WebGL context, adds a canvas to the DOM that auto-resizes to fit the window, sets up a flat vertex shader that covers the entire canvas, and exposes several attributes relating to time, mouse position, etc. This allows you to get started tinkering with WebGL quickly by writing fragment shaders.

## Usage

### npm/Import

`npm install shaderpen`

```javascript

import ShaderPen from 'shaderpen';

new ShaderPen(`

  WRITE YOUR SHADER HERE

`);

```

### Script Include

Include the script: `https://unpkg.com/shaderpen`

```javascript

new ShaderPen(`

  WRITE YOUR SHADER HERE

`);

```

## Reason

[Codepen](https://codepen.io/) is where I make/keep 99% of my sketches/ideas, so I wanted a way to do quick shader sketches there as well. Creating shaderpen was also a great opportunity for me to dive more into learning how to interface directly with the WebGL context. With that said, any and all input on how to improve upon this is welcome.

## Future

I've tested this library a good bit with various examples from Shadertoy that don't use some of the deeper features (channels, etc...), and 95% of them work correctly. I would like to reach full parity with Shadertoy's base feature set (no audio channels or other custom inputs), but then deviate Shadertoy's "Channels" by creating a means for people to extend the Shaderpen object, adding their own custom uniforms and event listeners. This will allow people to create any custom input imaginable (WebAudio context, WebSockets, even things like the Battery Status API, etc...).

## TODO

* Add iDate from Shadertoy

* Begin exploring ways of extending

## See Also

[Shadertoy](https://www.shadertoy.com/) - The awesome site that inspired this library!

[npm-badge]: https://img.shields.io/npm/v/shaderpen.svg

[npm-badge-url]: https://www.npmjs.com/package/shaderpen

[license-badge]: https://img.shields.io/npm/l/shaderpen.svg

[license-badge-url]: ./LICENSE