Cannot import from ShaderToy via loader

[hyperknot]

I wanted to read/understand the code of this ShaderToy shader (https://www.shadertoy.com/view/4s2SRt), suggested by the book, but I couldn't do it.

1. Copy and pasting the code to editor, it gave an error:

x'' : No precision specified for (float)

2. I've inserted the medium precision snippet at the top, and now it tells me:

'iTime' : undeclared identifier

Isn't there some kind of automatic detection for ShaderToy's variables? Or it is only in glslViewer?

3. I tried installing glslViewer and use the loader on OS X via brew. Installed fine, but needed requests. OK, I install requests into a virtualenv and launch from there.

glslLoader 4s2SRt
https://www.shadertoy.com/api/v1/shaders/4s2SRt?key=rt8tWH
Traceback (most recent call last):
  File "/usr/local/bin/glslLoader", line 30, in <module>
    if len(data['Shader']['renderpass']) == 1:
KeyError: 'Shader'

Which might make sense, as the above link actually returns "Error": "Shader not found". Is it a bug in ShaderToy?

4. Anyway, I finally save the shader's code into a .frag file and try to launch glslViewer test.frag, it I get the same error as on editor.

ERROR: 0:132: Use of undeclared identifier 'iTime'
ERROR: 0:133: Use of undeclared identifier 'p'

Can you help me how to import ShaderToy shaders into glslViewer or editor? Should I manually search and replace variables, etc.? Any idea why is the API not working?

[brucelane]

I think you have to add:

#ifdef GL_ES
precision mediump float;
#endif 

[brucelane]

iTime has to be renamed:

uniform float u_time;

[hyperknot]

OK, I did the following manually:

• Added float: medium
• replaced all iTime to u_time
• added u_time global
• replaced all iResolution to u_resolution
• added u_resolution global

No errors now, but all I see is 100% whiteness.

http://thebookofshaders.com/edit.php?log=171214193921

[brucelane]

replace with

void main(  )
{
    vec3 finalColor; 
    vec2 uv = gl_FragCoord.xy;
    //center of the image
    vec2 c = u_resolution.xy/2.0;
    finalColor = vec3( 0.3*_cross(uv, c, 240.0) );
    finalColor += ( circle(uv, c, 100.0, 1.0)
                  + circle(uv, c, 165.0, 1.0) ) * blue1;
    finalColor += (circle(uv, c, 240.0, 2.0) );//+ dots(uv,c,240.0)) * blue4;
    finalColor += circle3(uv, c, 313.0, 4.0) * blue1;
    finalColor += triangles(uv, c, 315.0 + 30.0*sin(u_time)) * blue2;
    finalColor += movingLine(uv, c, 240.0) * blue3;
    finalColor += circle(uv, c, 10.0, 1.0) * blue3;
    finalColor += 0.7 * circle2(uv, c, 262.0, 1.0, 0.5+0.2*cos(u_time)) * blue3;
    if( length(uv-c) < 240.0 )
    {
        //animate some bips with random movements
        vec2 p = 130.0*MOV(1.3,1.0,1.0,1.4,3.0+0.1*u_time);
        finalColor += bip1(uv, c+p) * vec3(1,1,1);
        p = 130.0*MOV(0.9,-1.1,1.7,0.8,-2.0+sin(0.1*u_time)+0.15*u_time);
        finalColor += bip1(uv, c+p) * vec3(1,1,1);
        p = 50.0*MOV(1.54,1.7,1.37,1.8,sin(0.1*u_time+7.0)+0.2*u_time);
        finalColor += bip2(uv,c+p) * red;
    }

    gl_FragColor = vec4( finalColor, 1.0 );
}

[hyperknot]

Cool, it works, thanks!

So it was in addition:

• fragCoord -> gl_FragCoord
• fragColor -> gl_FragColor
• void mainImage( out vec4 fragColor, in vec2 fragCoord ) -> void main()

?

[brucelane]

exactly!

[hyperknot]

Cool, I might submit a PR to glslLoader so it could convert files from disk at least.

Any idea why does editor display only a cropped view, while glslViewer displays more of the extents?

[patriciogonzalezvivo]

Are you in a retina laptop? If that's the case glslViewer will make use of that

[patriciogonzalezvivo]

ShaderToy have a custom scheme they use to wrap shaders and allow things like doing WebVR. Is not fragCoord, fragColor and mainImage() are not part of GLSL language.

[hyperknot]

Yes, I have retina. But isn't the view always 0,0->1,1? How can one view display totally different parts then the other (in the same aspect ratio)?

[patriciogonzalezvivo]

Related #101

[patriciogonzalezvivo]

I believe is not about the aspect ration but about the pixel density. Because the scene is constructed from the center (.5,.5) with the double of the pixels things looks scaled at the half of the size.

Obviously this is not ideal. Needs to be fixed.

thanks for the patience