|
| 1 | + |
| 2 | +<p align="center"> |
| 3 | +<img src="https://github.com/chipweinberger/ShaderToyLite.js/blob/main/logo.png?raw=true" /> |
| 4 | +</p> |
| 5 | + |
| 6 | +**ShaderToyLite.js** is a full featured (but tiny) ShaderToy renderer, in ~400 lines of code. |
| 7 | + |
| 8 | +## Demo |
| 9 | + |
| 10 | +[ShaderToyLite-demo.html](https://chipweinberger.github.io/ShaderToyLite.js/ShaderToyLite-demo.html) |
| 11 | + |
| 12 | +^ This demo renders [Paint Streams](https://www.shadertoy.com/view/WtfyDj) by [Michael Moroz](https://michaelmoroz.github.io/Reintegration-Tracking/) |
| 13 | + |
| 14 | +## Features |
| 15 | +- direcly load *almost* any ShaderToy shaders |
| 16 | +- multipass shaders (i.e BufferA, BufferB, BufferC, BufferD) |
| 17 | +- shader common code (i.e. 'Common' tab in ShaderToy) |
| 18 | +- update shaders at any time |
| 19 | +- WebGL 2.0 (only) |
| 20 | + |
| 21 | +**Not Supported:** |
| 22 | +- VR, Sound, Keyboard |
| 23 | +- pre-provided textures ('Wood', 'Rock Tiles', etc) |
| 24 | + |
| 25 | +## Usage |
| 26 | + |
| 27 | +``` |
| 28 | +// initialize |
| 29 | +var toy = new ShaderToyLite('myCanvas'); |
| 30 | +
|
| 31 | +// set shaders |
| 32 | +toy.setCommon(""); |
| 33 | +toy.setBufferA({source: bufferA}); |
| 34 | +toy.setImage({source: image, iChannel0: 'A'}); |
| 35 | +
|
| 36 | +// optional callback |
| 37 | +toy.setOnDraw((){ |
| 38 | + console.log(toy.getTime()); |
| 39 | +}) |
| 40 | +
|
| 41 | +// start render loop |
| 42 | +toy.play(); |
| 43 | +
|
| 44 | +// pause render loop |
| 45 | +toy.pause(); |
| 46 | +
|
| 47 | +// currently playing? |
| 48 | +tod.getIsPlaying(); |
| 49 | +
|
| 50 | +// reset time to zero |
| 51 | +toy.rewind(); |
| 52 | +``` |
| 53 | + |
| 54 | +## Minimal Example |
| 55 | + |
| 56 | +``` |
| 57 | +<!DOCTYPE html> |
| 58 | +<html lang="en"> |
| 59 | +<head> |
| 60 | + <meta charset="UTF-8"> |
| 61 | + <title>ShaderToyLite</title> |
| 62 | +</head> |
| 63 | +<body> |
| 64 | + <canvas id="myCanvas" width="840" height="472"></canvas> |
| 65 | + <script> |
| 66 | + var a = ` |
| 67 | + void mainImage( out vec4 fragColor, in vec2 fragCoord ) { |
| 68 | + vec2 uv = fragCoord/iResolution.xy; |
| 69 | + vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4)); |
| 70 | + fragColor = vec4(col,1.0); |
| 71 | + } |
| 72 | + `; |
| 73 | + var image = ` |
| 74 | + void mainImage( out vec4 fragColor, in vec2 fragCoord ) { |
| 75 | + vec2 uv = fragCoord.xy / iResolution.xy; |
| 76 | + vec4 col = texture(iChannel0, uv); |
| 77 | + fragColor = vec4(col.rgb, 1.); |
| 78 | + } |
| 79 | + `; |
| 80 | + var toy = new ShaderToy('myCanvas'); |
| 81 | + toy.setCommon(''); |
| 82 | + toy.setBufferA({source: a, iChannel0: 'B'}); |
| 83 | + toy.setImage({source: image, iChannel0: 'A'}); |
| 84 | + toy.play(); |
| 85 | + </script> |
| 86 | +</body> |
| 87 | +</html> |
| 88 | +``` |
0 commit comments