Exploit shader from shadertoy

[cDelage]

• I have tried with the newest version of editly: npm i -g editly or npm i editly@latest
• I have tried ffmpeg newest stable version
• I have searched for existing issues

Hello,
I have try to use the shader from shadertoy but I don't success to understand how use it in editly.

I have try to reproduce the build like this file : https://github.com/mifi/editly/blob/master/examples/gl.json5
By using a shader : https://www.shadertoy.com/view/3scfD7
But it's not work. (but I success to use the frag rainbow color in another built)

How have you success to use a shader from shadertoy ?
(Like in this video : https://www.youtube.com/watch?v=LNeclLkxUEY&ab_channel=MikaelFinstad)

Best Regards,
Corentin.

[mifi]

hi
you can see the source code (JSON) of that youtube video here: https://github.com/mifi/editly/blob/master/examples/commonFeatures.json5

[cDelage]

Hello Mifi,
Maybe I don't understand how to export the code but when I copy the following code and paste in a frag file, then I don't succeed to run the code like in the commonFeatures.json5

I understand that the code is not compatible (editly await for a frag with a main() and not mainImage with parameters...)
but I don't know how you do the conversion ?
Is there any way to download the shaders from shadertoy that make compatible with editly ?

(PS : I succeed to use the GL with the existing rainbow-color frag file)

[mifi]

unfortunately im not a glsl expert

[cDelage]

Will it be possible to see the assets ./assets/shaders/MdXyzX.frag file please ? (or any other assets from commonFeature)

[mifi]

It’s already there. See readme

[cDelage]

Thanks for the support i found the assets source

Finaly i found how to proceed :

1 - Define the variable needed by the shader

Example :

uniform vec2 resolution;
uniform float time;

#define Mouse (vec2(0, 0))
#define iResolution (resolution)
#define Resolution (resolution)
#define Time (time)

2- add a main function to call main image

void main(void)
{
    mainImage(gl_FragColor, gl_FragCoord.xy);
}

[hddananjaya]

@cDelage can you kindly share an example file that you copied from shadertoy and edited and used with Editly.
I tried to follow the steps you mentioned. But I get this. 🤔

➜  examples git:(master) ✗ editly --fast gl.json5
ffmpeg version 4.4.2
ffprobe version 4.4.2
250x250 15fps
Failed to format compiler error: TypeError: string.split is not a function
Caught error Error
    at new GLError (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/lib/GLError.js:8:19)
    at compileShader (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/lib/shader-cache.js:63:15)
    at proto.getShaderReference (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/lib/shader-cache.js:75:21)
    at Object.getShaderReference [as shader] (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/lib/shader-cache.js:131:23)
    at proto.update (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/index.js:115:31)
    at createShader (/home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/gl-shader/index.js:255:10)
    at createGlFrameSource (file:///home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/sources/glFrameSource.js:26:18)
    at async pMap.concurrency (file:///home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/sources/frameSource.js:61:25)
    at async file:///home/caretaker/.nvm/versions/node/v18.15.0/lib/node_modules/editly/node_modules/p-map/index.js:141:20 {
  shortMessage: 'Error compiling shader:\n' +
    "ERROR: 0:4: '' : No precision specified for (float) \n" +
    "ERROR: 0:5: '' : No precision specified for (float) \n" +
    "ERROR: 0:6: '' : No precision specified for (float) \n" +
    "ERROR: 0:7: '' : No precision specified for (float) \n" +
    "ERROR: 0:9: '' : No precision specified for (float) \n" +
    "ERROR: 0:10: '' : No precision specified for (float) \n" +
    "ERROR: 0:11: '' : No precision specified for (float) \n" +
    "ERROR: 0:12: 'iChannel0' : syntax error \n",
  longMessage: '',
  rawError: "ERROR: 0:4: '' : No precision specified for (float) \n" +
    "ERROR: 0:5: '' : No precision specified for (float) \n" +
    "ERROR: 0:6: '' : No precision specified for (float) \n" +
    "ERROR: 0:7: '' : No precision specified for (float) \n" +
    "ERROR: 0:9: '' : No precision specified for (float) \n" +
    "ERROR: 0:10: '' : No precision specified for (float) \n" +
    "ERROR: 0:11: '' : No precision specified for (float) \n" +
    "ERROR: 0:12: 'iChannel0' : syntax error \n",
  message: 'gl-shader: Error compiling shader:\n' +
    "ERROR: 0:4: '' : No precision specified for (float) \n" +
    "ERROR: 0:5: '' : No precision specified for (float) \n" +
    "ERROR: 0:6: '' : No precision specified for (float) \n" +
    "ERROR: 0:7: '' : No precision specified for (float) \n" +
    "ERROR: 0:9: '' : No precision specified for (float) \n" +
    "ERROR: 0:10: '' : No precision specified for (float) \n" +
    "ERROR: 0:11: '' : No precision specified for (float) \n" +
    "ERROR: 0:12: 'iChannel0' : syntax error \n"
}