Блог

Главная - Вопросы по программированию - Чистый цвет и цвет фона

Чистый цвет и цвет фона

#webgl

Вопрос:

В шейдере фрагментов альфа gl_FragColor равна нулю : gl_FragColor = vec4(0,88,0,33,0,55,0,0);

Когда вы смотрите на цвет точки (размер 24) , цвет-это цвет фона холста.

Где же чистый цвет ? ( гл.Чистый цвет(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>

Ответ №1:

Вам необходимо включить и настроить альфа-смешивание с помощью

     gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

Этот веб-сайт предоставляет хороший способ изучить различные уравнения и функции смешивания.

 '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>
Метки: