NB: In code snippets below, replace { by < . WordPress is unable to display code. 😦
Just as clickable image:
Copy-paste the shader URL, and build the one for the corresponding icon:
{ a href="https://www.shadertoy.com/view/SHADER_ID" >{ img src="https://www.shadertoy.com/media/shaders/SHADER_ID.jpg" /> My shader { /a >
My shader
Functional shader:
If you click the “share” button below a shader, you get the piece of code to copy-paste:
{ iframe src="https://www.shadertoy.com/embed/SHADER_ID?gui=true&t=10&paused=true&muted=false" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen" >{ /iframe >
( no example, for WordPress doesn’t accept iframes ).
… As webpage background:
- To the code above in your html, just add a css file or entry telling to map the iframe as full-window background. See the 3 tabs html, css and result in example.
Minimal version (would be better to specify a class or id name):
iframe {
position: fixed; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; z-index; -1; pointer-events: none; }
- Or : Shader Web Background
Fetching Shadertoy database via javascript:
See the API manual here.
You first need to register online your USER_KEY to be mentioned in your scripts. Then you can fetch queries to the Shadertoy data base to recover as JSON files lists of shader ids via search criterion, or shaders description and contents, to be used in you javascript. For instance, this is how I did my own shaders browser.
Note that only shaders saved as “public+API” can be managed. In particular, you can’t access unlisted private shaders.
shadertoy - unofficial 