Webgl or graphics card problem with the Seascape effect.

0 favourites
  • 12 posts
From the Asset Store
Create your own trading card game with this Fantasy TCG Card Template
  • 3 years ago Gigatron published a very interesting SeaScape effect. It didn't work on my PC properly - the water had a unnatural greenish-blue color. I thought the reason was an old Nvidea graphics card.

    Later I tried to launch the effect with the Radeon rx 560 videocard, but got the same problem:

    I'd like to know why the effect displays incorrectly, is it still a videocard problem or something else?

  • Well, it is most likely part of the effect. Seas are generally blue to green, so a seascape effect would probably do that.

    It is not, I have tried all the params and get the same result.

  • I believe it's a direct port of this shadertoy shadertoy.com/view/Ms2SD1

    So I guess take a look at that and see if you have the same issue? That's probably the place to look for a fix. The author mentions that they fixed some hardware dependent issue at somepoint, so might be that the effect is based on an older version. There's also some talk about it not working well on integrated graphics, and in some situations the browser ends up using the integrated GPU on your CPU and ignoring the discrete graphics card to "save power".

  • I have already seen the original shader, it displays normally, maybe even perfectly, it's a very beautiful shader. So it's a question of what causes the trouble. I'm not familiar with WebGL, maybe the problem happens after the effect displays incorrectly in the viewport? I have noticed that the reflection is ultra- green instead of white.

  • I have noticed that the reflection is ultra- green instead of white

    Sounds like the specular light color is green, although I don't know why that would affect only you. Is this on the demo page for the effect or when you attempt to use it in a project?

    Someone could go through the shader code and look for differences/issues. I was curious about the shader code so I grabbed it from the effect demo page, but I haven't really got the time to look through it at the moment.

    #ifdef GL_ES
    precision mediump float;
    #endif
    
    uniform mediump sampler2D samplerFront;
    varying vec2 vTex;
    
    uniform mediump float seconds;
    uniform mediump float date;
    uniform mediump float pixelWidth;
    uniform mediump float pixelHeight;
    
    vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight);
    
    uniform mediump float scale_x;
    uniform mediump float scale_y;
    uniform float xx,yy,mspeed;
    uniform float sbred,sbgreen,sbblue;
    uniform float swred,swgreen,swblue;
    
    const int NUM_STEPS = 6;// 8
    const float PI	 	= 3.1415;
    const float EPSILON	= 1e-3;
    float EPSILON_NRM	= 0.1 / iResolution.x;
    const int ITER_GEOMETRY = 3;
    const int ITER_FRAGMENT = 5;
    uniform float SEA_HEIGHT;//0.6
    uniform float SEA_CHOPPY;//4.0
    uniform float SEA_SPEED;//2.0
    uniform float SEA_FREQ;//0.16
    
    vec3 SEA_BASE = vec3(sbred,sbgreen,sbblue);
    vec3 SEA_WATER_COLOR = vec3(swred,swgreen,swblue);
    float SEA_TIME = seconds * SEA_SPEED;
    mat2 octave_m = mat2(1.6,1.2,-1.2,1.6);
    
    mat3 fromEuler(vec3 ang) {
     vec2 a1 = vec2(sin(ang.x),cos(ang.x));
     vec2 a2 = vec2(sin(ang.y),cos(ang.y));
     vec2 a3 = vec2(sin(ang.z),cos(ang.z));
     mat3 m;
     m[0] = vec3(a1.y*a3.y+a1.x*a2.x*a3.x,a1.y*a2.x*a3.x+a3.y*a1.x,-a2.y*a3.x);
     m[1] = vec3(-a2.y*a1.x,a1.y*a2.y,a2.x);
     m[2] = vec3(a3.y*a1.x*a2.x+a1.y*a3.x,a1.x*a3.x-a1.y*a3.y*a2.x,a2.y*a3.y);
     return m;
    }
    
    float hash( vec2 p ) {
     float h = dot(p,vec2(127.1,311.7));
     return fract(sin(h)*43758.5453123);
    }
    
    float noise( in vec2 p ) {
     vec2 i = floor( p ); 
     vec2 f = fract( p );
     vec2 u = f*f*(3.0-2.0*f);
     return -1.0+2.0*mix( mix( hash( i + vec2(0.0,0.0) ),
     hash( i + vec2(1.0,0.0) ), u.x),
     mix( hash( i + vec2(0.0,1.0) ),
     hash( i + vec2(1.0,1.0) ), u.x), u.y);
    }
    
    float diffuse(vec3 n,vec3 l,float p) {
     return pow(dot(n,l) * 0.4 + 0.6,p);
    }
    
    float specular(vec3 n,vec3 l,vec3 e,float s) {
     float nrm = (s + 8.0) / (3.1415 * 8.0);
     return pow(max(dot(reflect(e,n),l),0.0),s) * nrm;
    }
    
    vec3 getSkyColor(vec3 e) {
     e.y = max(e.y,0.0);
     vec3 ret;
     ret.x = pow(1.0-e.y,2.0);
     ret.y = 1.0-e.y;
     ret.z = 0.6+(1.0-e.y)*0.4;
     return ret;
    }
    
    float sea_octave(vec2 uv, float choppy) {
     uv += noise(uv);
     vec2 wv = 1.0-abs(sin(uv));
     vec2 swv = abs(cos(uv));
     wv = mix(wv,swv,wv);
     return pow(1.0-pow(wv.x * wv.y,0.65),choppy);
    }
    
    float map(vec3 p) {
     float freq = SEA_FREQ;//0.16
     float amp = SEA_HEIGHT;
     float choppy = SEA_CHOPPY;
     vec2 uv = p.xz; uv.x *= 0.75;
     float d, h = 0.0;
     for(int i = 0; i < ITER_GEOMETRY; i++) {
     d = sea_octave((uv+SEA_TIME)*freq,choppy);
     d += sea_octave((uv-SEA_TIME)*freq,choppy);
     h += d * amp;
     uv *= octave_m; freq *= 1.9; amp *= 0.22;
     choppy = mix(choppy,1.0,0.2);
     }
     return p.y - h;
    }
    
    float map_detailed(vec3 p) {
     float freq = SEA_FREQ;
     float amp = SEA_HEIGHT;
     float choppy = SEA_CHOPPY;
     vec2 uv = p.xz; uv.x *= 0.75;
     float d, h = 0.0;
     for(int i = 0; i < ITER_FRAGMENT; i++) {
     d = sea_octave((uv+SEA_TIME)*freq,choppy);
     d += sea_octave((uv-SEA_TIME)*freq,choppy);
     h += d * amp;
     uv *= octave_m; freq *= 1.9; amp *= 0.22;
     choppy = mix(choppy,1.0,0.2);
     }
     return p.y - h;
    }
    
    vec3 getSeaColor(vec3 p, vec3 n, vec3 l, vec3 eye, vec3 dist) {
     float fresnel = 1.0 - max(dot(n,-eye),0.0);
     fresnel = pow(fresnel,3.0) * 0.65;
     vec3 reflected = getSkyColor(reflect(eye,n));
     vec3 refracted = SEA_BASE + diffuse(n,l,80.0) * SEA_WATER_COLOR * 0.12;
     vec3 color = mix(refracted,reflected,fresnel);
     float atten = max(1.0 - dot(dist,dist) * 0.001, 0.0);
     color += SEA_WATER_COLOR * (p.y - SEA_HEIGHT) * 0.18 * atten;
     color += vec3(specular(n,l,eye,60.0));
     return color;
    }
    
    vec3 getNormal(vec3 p, float eps) {
     vec3 n;
     n.y = map_detailed(p);
     n.x = map_detailed(vec3(p.x+eps,p.y,p.z)) - n.y;
     n.z = map_detailed(vec3(p.x,p.y,p.z+eps)) - n.y;
     n.y = eps;
     return normalize(n);
    }
    
    float heightMapTracing(vec3 ori, vec3 dir, out vec3 p) {
     float tm = 0.0;
     float tx = 1000.0;
     float hx = map(ori + dir * tx);
     if(hx > 0.0) return tx;
     float hm = map(ori + dir * tm);
     float tmid = 0.0;
     for(int i = 0; i < NUM_STEPS; i++) {
     tmid = mix(tm,tx, hm/(hm-hx));
     p = ori + dir * tmid;
     float hmid = map(p);
     if(hmid < 0.0) {
     tx = tmid;
     hx = hmid;
     } else {
     tm = tmid;
     hm = hmid;
     }
     }
     return tmid;
    }
    
    #define AA 1
    
    void main() {
     vec2 uv = vTex;
     uv = uv * 2.0 - 1.0;
     uv.y =1.-uv.y;
     uv.x *= iResolution.x / iResolution.y;
     float time = seconds * 0.3 /*+ iMouse.x*0.01*/;
     vec3 ang = vec3(0.,yy ,xx);
     vec3 ori = vec3(mspeed,3.5,5.0);
     vec3 dir = normalize(vec3(uv.xy,2.0)); //dir.z += length(uv) * 0.15*((-.1*iMouse.y/iResolution.y));
     dir = normalize(dir) * fromEuler(ang);
     vec3 p;
     heightMapTracing(ori,dir,p);
     vec3 dist = p - ori;
     vec3 n = getNormal(p, dot(dist,dist) * EPSILON_NRM);
     vec3 light = normalize(vec3(0.0,1.0,0.8));
     vec3 color = mix(
     getSkyColor(dir),
     getSeaColor(p,n,light,dir,dist),
     pow(smoothstep(0.0,-0.05,dir.y),0.3));
     gl_FragColor = vec4(pow(color,vec3(0.75)), 1.0);
    }
  • Hi I spent 4 hours reproducing the problem ... i ve made seascape01 fx based on this fx on glslsandbox : http://glslsandbox.com/e#60739.1

    bangoo said display is ok for him; so i am waiting feedback to isolate the problem;

    Nothing changed fx : http://gigatron3k.free.fr/html5/C2/FX/sea01.zip

    Wait and see :)

  • Wow!!! You are a wizard! It works.

    The only problem is with the blue gradient that appears and bounces on the screen.

  • --- The only problem is with the blue gradient that appears and bounces on the screen.

    This is not a problem ... i have the same thing ; so

    I know the problem for you , i will take a look seascape.fx to fix the issue you have.

    Be patient ;

    Regards

  • bangoo ; is this demo working for you ?

    http://gigatron3k.free.fr/html5/C2/FX/seasc/

    After that i will publish the corrected fx ... the problem was i hope :)

    glsl Mix command .. with vec4 !

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • It's ok. All the demos work fine for me. The problem appears after I apply effect in the C2.

  • It's ok. All the demos work fine for me. The problem appears after I apply effect in the C2.

    Here is the the fx, install it and try if it's ok ..

    http://gigatron3k.free.fr/html5/C2/FX/seasc/seafx.zip

    I am waiting for your feedback ... and i go to drink coke :)

  • It finally behaves!

    I have change all the sea colors to 0.9, otherwise, the sky looks a little bit greeny.

    It also works if I replace the following line of code:

    vec4(0.,getSeaColor(p,n,light,dir,dist)),

    in vec4 color = mix( vec4(SkyBg(dir),0.), vec4(0.,getSeaColor(p,n,light,dir,dist)), pow(smoothstep(0.0,-0.05,dir.y),0.3) );

    with

    needs to be vec4(getSeaColor(p,n,light,dir,dist),0.).

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)