Question

-

请原谅，我是GLSL的新手......我正在努力实现一些我认为很简单的东西，但经过大量的阅读后无法解决。

我有以下x-shader/x-fragment，可以在黑色rgb(0, 0, 0)背景上激活一些旋转的颜色。我已将其嵌入html元素中的某些<canvas>中。

我只是想将背景更改为浅黑色rgb(32, 32, 32)

我如何实现这一目标？

（更改<canvas>标记或容器div的CSS背景颜色无效。

您可以在此处查看代码的实时动画/输出：

http://glslsandbox.com/e#25366.0

......这是代码：

<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>

提前感谢！

Answer 1

在每个gl.clear：

之后，将clearColor放在render（）函数中

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

另外要小心如何从画布创建gl上下文。目前你有这个;

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

更改为类似内容以确保启用浏览器中的alpha

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

Answer 2

调整着色器的输出，如：

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

max以组件方式执行，并返回给定参数组件的较大值，有效地将最暗颜色钳制到0.125（1/255 * 32）。

WebGL / GLSL：如何设置嵌入式x-shader / x-fragment的背景颜色？

2 个答案: