A threejs material that helps to make use of ShaderToy shader code on meshes

Usage

npm install three-shadertoy-material

var ShaderToyMaterial = require ( ' 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

npm run start:dev

Sample implementation at https://shakthi.github.io/threejs-shadertoy/dist/

Supported uniforms

uniform vec3 iResolution; uniform float iTime; uniform float iTimeDelta; uniform int iFrame; uniform vec4 iMouse; uniform vec4 iDate; uniform vec3 iChannelResolution[ 4 ]; uniform sampler2D iChannel0.. 3 ;

How to pass texture inputs to above shader material

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

Sample shader used here is taken from https://www.shadertoy.com/view/XssBzH