clearColor 和背景色

Question

在片段着色器中 gl_Fragcolor 的 alpha 为 null ： gl_FragColor = vec4(0.88,0.33,0.55,0.0);

当你看点的颜色时（大小 24），颜色就是画布的背景色。

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>

Answer 1

您需要启用和设置 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>