Estoy desarrollando una aplicación utilizando un lienzo WebGL y me doy cuenta a través de la evaluación comparativa de que se dedica una cantidad significativa de tiempo a "componer capas".

Pero no creo que esto deba estar ocurriendo, porque toda mi página HTML solo tiene un único elemento (el lienzo).

Lo que creo que está sucediendo es que está mezclando el color de fondo de la página HTML con los contenidos que se dibujan en el lienzo. Este parece ser el caso, ya que cuando cambio el color de fondo de mi página HTML, los elementos de mi escena dibujados en el lienzo aparecen más claros o más oscuros.

¿Hay alguna manera de deshabilitar esta composición? No quiero mezclar el color de fondo de mi página con lo que se dibuja en el lienzo. Al hacerlo, espero que no solo se elimine toda la operación de "composición" (y se guarde el rendimiento), sino que el contenido de mi lienzo ya no se mezcle con el fondo de mi página.

 const canvas = document.querySelector("canvas"); const gl = canvas.getContext("webgl2"); gl.clearColor(0.25, 0.25, 0.25, 1); function render() { gl.clear(gl.COLOR_BUFFER_BIT); requestAnimationFrame(render); } requestAnimationFrame(render);

 <canvas></canvas>

Aquí hay un ejemplo arriba. Si ejecuta este código y lo perfila, notará una sección significativa de "Capas compuestas" en los resultados:

Pero no deseo componer con el fondo. En lugar de mezclarlo, quiero que simplemente se pegue encima. ¿Hay alguna forma de eliminar este costoso proceso?