CODEWITHSUNDEEP
canvashtml5-canvasglslwebgl
Rowe Morehouse
Rowe Morehouse

Reputation: 4585

WebGL / GLSL: How to set background color of embedded x-shader/x-fragment?

--

Pardon, I'm new to GLSL ... I'm trying to achieve something I thought would be simple, but can't solve after a lot of reading.

I have the below x-shader/x-fragment which animates some swirling colors on a black rgb(0, 0, 0) background. I have it embedded in some html within a <canvas> element.

I just wanted to change the background to a lighter black rgb(32, 32, 32)

How do I achieve this?

(changing the CSS background color of <canvas> tag or container div had no effect.

You can see the live animation / output of the code here:

http://glslsandbox.com/e#25366.0

... and here is the code:

<script id="fragment" type="x-shader/x-fragment">
  //
  // pulsing blobs

  precision mediump float;

  uniform float time;
  uniform vec2 resolution;


  //.h
  vec3 sim(vec3 p,float s);
  vec2 rot(vec2 p,float r);
  vec2 rotsim(vec2 p,float s);
  vec2 zoom(vec2 p,float f);

  vec2 makeSymmetry(vec2 p){
     vec2 ret=p;
     ret=rotsim(ret,sin(time*0.9)*2.0+3.0);


     ret.x=abs(ret.x);
     return ret;
  }

  float makePoint(float x,float y,float fx,float fy,float sx,float sy,float t){
     float xx=x+tan(t*fx)*sy;
     float yy=y-tan(t*fy)*sy;
     float a=0.5/sqrt(abs(abs(x*xx)+abs(yy*y)));
     float b=0.5/sqrt(abs(x*xx+yy*y));
     return a*b;
  }

  // utility functions
  const float PI=3.14159265;

  vec3 sim(vec3 p,float s){
     vec3 ret=p;
     ret=p+s/2.0;
     ret=fract(ret/s)*s-s/4.0;
     return ret;
  }

  vec2 rot(vec2 p,float r){
     vec2 ret;
     ret.x=p.x*sin(r)*cos(r)-p.y*cos(r);
     ret.y=p.x*cos(r)+p.y*sin(r);
  return p;
     return ret;
  }

  vec2 rotsim(vec2 p,float s){
     vec2 ret=p;
     ret=rot(p,-PI/(s*2.0));
     ret=rot(p,floor(atan(ret.x,ret.y)/PI*s)*(PI/s));
     return ret;
  }

  vec2 zoom(vec2 p,float f){
      return vec2(p.x*f,p.y*f);
  }
  // utility stuff end


  void main( void ) {

     vec2 p = gl_FragCoord.xy/resolution.y-vec2((resolution.x/resolution.y)/2.0,0.5);

     p=rot(p,sin(time+length(p))*1.0);
     p=zoom(p,sin(time*2.0)*0.5+0.8);

     p=p*2.0;

     float x=p.x;
     float y=p.y;

     float t=time*0.5;

     float a=
         makePoint(x,y,3.3,2.9,0.3,0.3,t);
     a=a+makePoint(x,y,1.9,2.0,0.4,0.4,t);
     a=a+makePoint(x,y,0.8,0.7,0.4,0.5,t);
     a=a+makePoint(x,y,2.3,0.1,0.6,0.3,t);
     a=a+makePoint(x,y,0.8,1.7,0.5,0.4,t);
     a=a+makePoint(x,y,0.3,1.0,0.4,0.4,t);
     a=a+makePoint(x,y,1.4,1.7,0.4,0.5,t);
     a=a+makePoint(x,y,1.3,2.1,0.6,0.3,t);
     a=a+makePoint(x,y,1.8,1.7,0.5,0.4,t);

     float b=
         makePoint(x,y,1.2,1.9,0.3,0.3,t);
     b=b+makePoint(x,y,0.7,2.7,0.4,0.4,t);
     b=b+makePoint(x,y,1.4,0.6,0.4,0.5,t);
     b=b+makePoint(x,y,2.6,0.4,0.6,0.3,t);
     b=b+makePoint(x,y,0.7,1.4,0.5,0.4,t);
     b=b+makePoint(x,y,0.7,1.7,0.4,0.4,t);
     b=b+makePoint(x,y,0.8,0.5,0.4,0.5,t);
     b=b+makePoint(x,y,1.4,0.9,0.6,0.3,t);
     b=b+makePoint(x,y,0.7,1.3,0.5,0.4,t);

     float c=
         makePoint(x,y,3.7,0.3,0.3,0.3,t);
     c=c+makePoint(x,y,1.9,1.3,0.4,0.4,t);
     c=c+makePoint(x,y,0.8,0.9,0.4,0.5,t);
     c=c+makePoint(x,y,1.2,1.7,0.6,0.3,t);
     c=c+makePoint(x,y,0.3,0.6,0.5,0.4,t);
     c=c+makePoint(x,y,0.3,0.3,0.4,0.4,t);
     c=c+makePoint(x,y,1.4,0.8,0.4,0.5,t);
     c=c+makePoint(x,y,0.2,0.6,0.6,0.3,t);
     c=c+makePoint(x,y,1.3,0.5,0.5,0.4,t);

     vec3 d=vec3(a,b,c)/31.0;

     gl_FragColor = vec4(d.x,d.y,d.z,1.0);
  }
</script>

thanks in advance!

Upvotes: 2

Views: 9550

Answers (2)

LJᛃ
LJᛃ

Reputation: 8123

Adjust the output of your shader like:

vec3 d=max(vec3(a,b,c)/31.0,vec3(1./255.)*32.);
gl_FragColor = vec4(d,1.0);

max acts component wise and returns the larger value of given argument components effectively clamping your darkest color to 0.125 (1/255*32).

Upvotes: 1

CrSe
CrSe

Reputation: 338

Just put clearColor in your render() function after every gl.clear:

gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
gl.clearColor(0, 0, 0, 0.3);

Also be carefull how you create the gl context from canvas. For the moment you have this;

gl = canvas.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } );

Change to something like this to ensure that alpha from browser is enabled

gl = canvas.getContext( 'experimental-webgl', { preserveDrawingBuffer: true, premultipliedAlpha:true} );

Upvotes: 2

Related Questions