0
179
Views¿Cómo evitar la composición con un lienzo HTML?
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?
1 answers
Answer question0
Cuando crea el contexto WebGL, si no solicita explícitamente que el contexto no tenga alfa, obtiene alfa, y el compositor tendrá que examinar al menos cada píxel para determinar si necesita combinarse con la página.
De la sección 5.2.1 del estándar WebGL:
alfa
Si el valor es verdadero, el búfer de dibujo tiene un canal alfa para realizar operaciones alfa de destino de OpenGL y componer con la página. Si el valor es falso, no hay búfer alfa disponible.
Intenta crear el contexto con "alpha:false":
const gl = canvas.getContext("webgl2", { alpha: false } );