glsl - 为什么这个 Shaderoy 在 glsl 中无法正确显示?

标签 glsl webgl shader

我正在努力将此着色器从shadertoy 移植到基于GPUImage 的iOS 平台的glsl 中。

https://www.shadertoy.com/view/4s2yW1

从技术上讲,它在设备上有效运行。但是,它只显示背景,而不显示圆圈,这才是重点。

我想知道是否有人可以给我一些关于为什么它没有正确显示的线索。无论出于何种原因,我在使用 Shaderfrog 时都得到了相同的结果。

这是 Shaderfrog 链接: http://shaderfrog.com/app/view/1463

以及代码本身:

#define PI 3.14159265359

NSString *const kGPUImageBokehFragmentShaderString = SHADER_STRING
(
 precision highp float;
 varying highp vec2 textureCoordinate;
 uniform sampler2D inputImageTexture;
 uniform highp float time;


 void Rotate( vec2 p, float a )
{
    p = cos( a ) * p + sin( a ) * vec2( p.y, -p.x );
}

 float Circle( vec2 p, float r )
{
    return ( length( p / r ) - 1.0 ) * r;
}

 float Rand( vec2 c )
{
    return fract( sin( dot( c.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );
}

 float saturate( float x )
{
    return clamp( x, 0.0, 1.0 );
}

 void BokehLayer(vec3 color, vec2 p, vec3 c )
{
    float wrap = 450.0;
    if ( mod( floor( p.y / wrap + 0.5 ), 2.0 ) == 0.0 )
    {
        p.x += wrap * 0.5;
    }

    vec2 p2 = mod( p + 0.5 * wrap, wrap ) - 0.5 * wrap;
    vec2 cell = floor( p / wrap + 0.5 );
    float cellR = Rand( cell );

    c *= fract( cellR * 3.33 + 3.33 );
    float radius = mix( 30.0, 70.0, fract( cellR * 7.77 + 7.77 ) );
    p2.x *= mix( 0.9, 1.1, fract( cellR * 11.13 + 11.13 ) );
    p2.y *= mix( 0.9, 1.1, fract( cellR * 17.17 + 17.17 ) );

    float sdf = Circle( p2, radius );
    float circle = 1.0 - smoothstep( 0.0, 1.0, sdf * 0.04 );
    float glow   = exp( -sdf * 0.025 ) * 0.3 * ( 1.0 - circle );
    color += c * ( circle + glow );
}

 void main()
{
    vec2 iResolution = vec2(1., 1.);
    vec2 uv = textureCoordinate.xy/iResolution.xy;
    vec2 p = ( 2.0 * textureCoordinate - iResolution.xy) / iResolution.x * 1000.0;

    // background
    vec3 color = mix( vec3( 0.3, 0.1, 0.3 ), vec3( 0.1, 0.4, 0.5 ), dot( uv, vec2( 0.2, 0.7 ) ) );

    float timeElapsed = time - 15.0;

    Rotate( p, 0.2 + timeElapsed * 0.03 );
    BokehLayer( color, p + vec2( -50.0 * timeElapsed +  0.0, 0.0  ), 3.0 * vec3( 0.4, 0.1, 0.2 ) );
    Rotate( p, 0.3 - timeElapsed * 0.05 );
    BokehLayer( color, p + vec2( -70.0 * timeElapsed + 33.0, -33.0 ), 3.5 * vec3( 0.6, 0.4, 0.2 ) );
    Rotate( p, 0.5 + timeElapsed * 0.07 );
    BokehLayer( color, p + vec2( -60.0 * timeElapsed + 55.0, 55.0 ), 3.0 * vec3( 0.4, 0.3, 0.2 ) );
    Rotate( p, 0.9 - timeElapsed * 0.03 );
    BokehLayer( color, p + vec2( -25.0 * timeElapsed + 77.0, 77.0 ), 3.0 * vec3( 0.4, 0.2, 0.1 ) );
    Rotate( p, 0.0 + timeElapsed * 0.05 );
    BokehLayer( color, p + vec2( -15.0 * timeElapsed + 99.0, 99.0 ), 3.0 * vec3( 0.2, 0.0, 0.4 ) );

    vec4 bokehColor = vec4( color, 1.0 );
    gl_FragColor = bokehColor;
} );

如果您能告诉我有关此事的任何信息,我将不胜感激。谢谢!

最佳答案

问题是您没有将颜色标记为inout

void BokehLayer(vec3 color, vec2 p, vec3 c )   // bad

void BokehLayer(inout vec3 color, vec2 p, vec3 c )   // good

BokehLayer 想要修改 color 但没有 inout 关键字,它只是函数的参数。对于inout,它是一个引用原始变量。

关于glsl - 为什么这个 Shaderoy 在 glsl 中无法正确显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43768100/

相关文章:

glsl - gl_FragColor 和 glReadPixels

c++ - 视差映射 - GLSL- OpenGL

opengl - 如何处理离散光线追踪的错误索引计算?

javascript - 为什么我的游戏在 Firefox 中那么慢?

three.js - webGL的WebGL单帧 "screenshot"

c++ - 在 OpenGL 中将纹理传递给着色器

shader - Qt3d 如何/在哪里为着色器制服分配默认值?

opengl - glsl 更新 2D 纹理的特定行

java - opengl : loading array types to uniform buffer objects

javascript - WebGL - 连续应用多个程序