WebGL / GLSL：如何设置嵌入式X-Shader / X片段的背景颜色？

Question

--

对不起，我是 GLSL 的新手...我正在尝试实现一些我认为很简单但经过大量阅读后无法解决的问题。

我有下面的x-shader/x-fragment，它在黑色rgb(0, 0, 0) 背景上动画了一些旋转的颜色。我将它嵌入到 <canvas> 元素中的一些 html 中。

我只是想改变背景为浅黑色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)。