--
对不起，我是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>
提前感谢！
只需在每个 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} );
调整着色器的输出，如下所示：
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)。