Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shakthi/three-shadertoy-material
A threejs material that helps to make use of ShaderToy shader code on meshes
https://github.com/shakthi/three-shadertoy-material
material shadertoy three-js
Last synced: 3 months ago
JSON representation
A threejs material that helps to make use of ShaderToy shader code on meshes
- Host: GitHub
- URL: https://github.com/shakthi/three-shadertoy-material
- Owner: Shakthi
- Created: 2018-07-24T17:19:23.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T12:21:39.000Z (about 2 years ago)
- Last Synced: 2024-03-24T14:01:11.360Z (10 months ago)
- Topics: material, shadertoy, three-js
- Language: JavaScript
- Size: 1.06 MB
- Stars: 39
- Watchers: 5
- Forks: 11
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# three-shadertoy-material
A threejs material that helps to make use of ShaderToy shader code on meshes
Usage
------
```shell
npm install three-shadertoy-material
```
```javascript
var ShaderToyMaterial = require('three-shadertoy-material') // import ShaderToyMaterial from 'three-shadertoy-material'
geometry = new THREE.PlaneBufferGeometry(1500, 750);
var shadercode = `void mainImage( out vec4 O, vec2 U ){
U = 2.* sin (25.*U/iResolution.x);
O = .5 + .5* sin( U.x+U.y + vec4(0,2.4,-2.4,0) +iTime);
}`;
material = new ShaderToyMaterial(shadercode);
mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
```
Local testing
-------
```shell
npm run start:dev
```
Sample implementation at https://shakthi.github.io/threejs-shadertoy/dist/
Supported uniforms
---------
```glsl
uniform vec3 iResolution; //viewport resolution (in pixels)
uniform float iTime; //shader playback time (in seconds)
uniform float iTimeDelta; //render time (in seconds)
uniform int iFrame; //shader playback frame
uniform vec4 iMouse; // mouse pixel coords. Faked: Hardcoded center point of the iResolution
uniform vec4 iDate; //(year, month, day, time in seconds)
uniform vec3 iChannelResolution[4]; // channel resolution (in pixels) - Not fully optimised
uniform sampler2D iChannel0..3; // input channel texture2d only
```
How to pass texture inputs to above shader material
----
```javascript
new ShaderToyMaterial(`shader code`,{map:texture});
```
This texture is available via iChannel0, multiple texture can be passed as an array (which are avaible via iChannel0..3)
TODO
-----
- Support for video/cube textures
- Multpass (Buffers)
Credits
-----
- All product and company names are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
- Shadertoy (https://www.shadertoy.com) a cross-browser online community and tool for creating and sharing shaders through WebGL.
- Three.js (https://threejs.org/) is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser.
- Sample shader used here is taken from https://www.shadertoy.com/view/XssBzH