cables DocumentationHow To UseWorking with filesKeyboard ShortcutsUser Interface WalkthroughBeginner TutorialBeginner 1: Drawing A CircleBeginner 2: TransformationsBeginner 3: ColorMore TransformationsintermediateImage CompositionsPost-Processing 3D Scenescommunicationcables APICommunication with an Arduino via SerialCommunicating with Arduino over MQTTExporting And EmbeddingHow to serve files externally and fix CORS headersEmbedding PatchesExternal triggers / functionsEmbedding PatchesPreviewing / uploading exported cables patchescoding opsCreating AttachmentsGeneral op/Port CallbacksPortsDynamic PortsArray PortsBoolean portsInteger Number PortsObject PortsString portsTrigger PortsFloating Point Number PortsGUI/UI attributesHello Op - Part 1LibrariesDeveloping OpsGuidelinesObject PortsWriting ShadersWeb Audio Op DevelopmentHTML and CSS in cablesLightingLightsShadowsWorking with audioBasic Audio SetupWorking with EffectsReal-Time Audio Analyzation & Audio VisualizationOffline Audio Visualization & AnalyzationFAQEmbeddingHow to integrate my cables patch into my CMS (webflow/wix/squarespace/...)?How to remove grey rectangles on touch (mobile)?Why doesn't the DownloadTexture op work on iOS?How to disable page scrolling on mobile?Mobile tippsTransparent CanvasFeatures and SupportWill there be support for (animated) GIFs?Hot to report a bug in cablesGeneral questionsLicences and paymentWhat licence do i need to use cables?Will I have to pay for it in the future?How is my work licenced when using cables?Does cables support midi and OSC?ShadertoyTechnical questionsUI / EditorGuide to VR in cablesWebGL1 and WebGL2
Shadertoy
Go to this example page to see a basic setup of shadertoy in cables.
Youtube tutorial porting shadertoy to cables part 01
Porting shaders from shadertoy isn't that difficult once you know the basics.
The main ops that you'll need are:
standard glsl in shadertoy and the equivalent in cables is:
fragCoord.xy //pixel coordinates in shadertoy
gl_FragCoord.xy //pixel coordinates in cables
vec2 uv = fragCoord/iResolution.xy; // normalized pixel co-ordinates from 0-1 on shadertoy
IN vec2 texcoord // normalized pixel co-ordinates from 0-1 in cables,already created
The uniforms on shadertoy and their equivalent in cables are as follows:
uniform vec3 iResolution; // viewport resolution (in pixels)
UNI vec3 iResolution; // get width and height output from mainloop,canvasinfo for aspect ratio/z
uniform float iTime; // shader playback time (in seconds)
UNI float iTime; // Use the output of the timer op
uniform float iTimeDelta; // render time (in seconds)
UNI float iTimeDelta; // use the output of the TimeDelta op
uniform int iFrame; // shader playback frame
UNI int iFrame; // connect trigger counter to mainloop output
uniform float iChannelTime[4]; // channel playback time (in seconds)
UNI float iChannelTime0; // get the current playtime from the relevant media op
uniform vec3 iChannelResolution[4]; // channel resolution (in pixels)
UNI vec3 iChannelResolution0..3; // channel resolution (in pixels)
uniform samplerXX iChannel0..3; // input channel. XX = 2D/Cube
UNI sampler2D iChannel0..3; // Creates a texture input which can be used
uniform vec4 iDate; // (year, month, day, time in seconds)
UNI vec4 iDate; // (year, month, day, time in seconds)
uniform float iSampleRate; // sound sample rate (i.e., 44100)
UNI float iSampleRate; // Use the audiobuffer op to access this
uniform vec4 iMouse; // mouse pixel coords. xy: current (if MLB down), zw: click
UNI vec4 iMouse // use mouse op. see example patch for in depth explanation.
help cables get better and edit this file on github