clearColor 和背景颜色
clearColor and background-color
在片段着色器中,gl_Fragcolor 的 alpha 为空:
gl_FragColor = vec4(0.88,0.33,0.55,0.0);
当您查看点(尺寸 24)的颜色时,该颜色是 canvas 的背景颜色。
clearColor 在哪里? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha: false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>
您需要使用
启用和设置 alpha 混合
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
This website 提供了探索各种混合方程和函数的好方法。
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha:false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>
在片段着色器中,gl_Fragcolor 的 alpha 为空: gl_FragColor = vec4(0.88,0.33,0.55,0.0);
当您查看点(尺寸 24)的颜色时,该颜色是 canvas 的背景颜色。
clearColor 在哪里? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha: false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>
您需要使用
启用和设置 alpha 混合 gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
This website 提供了探索各种混合方程和函数的好方法。
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha:false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>