Tutoriales

Qué es WebGL y cómo habilitarlo en cualquier navegador

Hace un par de meses, estaba trabajando en mi proyecto de Maestría en Ciencias de la Computación. Me requirió crear un wireframe en la página web. Bueno, visité un par de sitios como ShaderToy, WebGL Earth, etc. para comprender cómo funciona la representación gráfica. Pero me recibió un mensaje que decía «WebGL está deshabilitado en su navegador». Un par de búsquedas en Google hacia abajo y resulta que WebGL está deshabilitado de forma predeterminada en la mayoría de los navegadores. Entonces, así es como habilita WebGL en su navegador.

¿Qué es WebGL? ¿Por qué lo necesitas?

Antes de comenzar a habilitar WebGL, comprendamos qué es WebGL. Ahora, WebGL permite que su navegador ejecute renderizado 2-d y 3-d de forma nativa sin instalar ningún complemento adicional. También permite que el navegador utilice la GPU de hardware para realizar cálculos gráficos en lugar de su CPU. Esto significa que la representación gráfica funcionaría mejor y, lo más importante, funcionaría.

Ante todo, su navegador debe ser compatible con WebGL. Una forma precisa de comprobarlo es simplemente visitando este sitio web. Si recibe un mensaje que dice «Su navegador es compatible con WebGL», podemos continuar con su activación.

web-gl-check

Por lo tanto, si diseña gráficos en la web o escribe scripts para renderizar gráficos en su navegador, aumentaría significativamente el rendimiento. Además, eliminaría la dependencia de complementos de terceros.

Cómo habilitar WebGL en su navegador

El método para habilitar WebGL depende del navegador con el que esté trabajando. A continuación se muestra el método para habilitar WebGL en navegadores basados ​​en Chromium, Mozilla Firefox y Safari.

1. Google Chrome

Dado que Google Chrome se basa en Chromium, este método funcionará en la mayoría de los navegadores basados ​​en Chromium como Brave, Vivaldi, Opera, etc. Solo asegúrese de que está ejecutando la última versión de Google Chrome que existe. Para encontrar la versión de Chrome, haga clic en el ícono de Menú en la esquina superior derecha, haga clic en Ayuda y luego en Acerca de Google Chrome.

Suponiendo que está ejecutando la última versión de Chrome, a continuación, debemos permitir que Chrome use nuestra GPU de hardware para realizar cálculos gráficos. Para eso, dirígete a la Configuración de Chrome escribiendo «chrome: // settings» en la barra de direcciones.

configuración de cromo

En la página de Configuración, desplácese hacia abajo hasta que vea un hipervínculo «Avanzado». Tóquelo para revelar la configuración avanzada de Google Chrome.

configuración-avanzada-de-cromo

Una vez que la configuración avanzada de Chrome esté visible, navegue hasta la parte inferior de la página. Ya verás «Usar aceleración de hardware cuando este disponible» en la sección Sistema. Haga clic en el control deslizante junto a él para habilitar la aceleración de GPU de hardware. Publique eso, verá aparecer un botón «Relanzar». Haga clic en él para que Google Chrome se reinicie y aplique la configuración. Asegúrese de que no haya ningún documento descargado ni guardado en las otras pestañas de Chrome.

habilitar-aceleración-hardware

Después del relanzamiento de Chrome, diríjase a Chrome Flags para habilitar WebGL. Escribe «chrome: // flags» en la barra de direcciones.

banderas-cromadas

En el menú Banderas de Chrome, busque WebGL. Verás una bandera llamada «Computación WebGL 2.0», haga clic en el menú desplegable junto a él y seleccione Activado. Publique eso, verá una ventana emergente en la parte inferior solicitando reiniciar Google Chrome. Haga clic en el botón «Reiniciar ahora» para hacerlo.

Para Chrome Android y Chrome Mac, debe habilitar «WebGL Draft Extensions».

Chrome-flag-webgl habilitado

2. Mozilla Firefox

Si usa Mozillla Firefox, habilitar webGl es bastante sencillo y solo es un proceso de dos pasos. Dirígete al menú de preferencias escribiendo acerca de: config en la barra de direcciones.

habilitado para webgl en firefox

En el menú Preferencias, escriba «webgl.force-enabled» en la barra de búsqueda. El valor de preferencia se establece en «falso» de forma predeterminada. Haga doble clic en él para cambiar el valor a verdadero. Reinicie Firefox para que los cambios surtan efecto.

about-config-mozilla-firefox

3. Safari

Safari oculta las opciones para habilitar WebGL en Opciones de desarrollador y funciones experimentales. Entonces, para habilitar WebGL en Mac, primero debemos habilitar las opciones de desarrollador. Para eso, abra el navegador Safari y haga clic en Safari en la barra de menú superior. Desde el menú extendido, haga clic en «Preferencias».

preferencias-navegador-safari

Una vez que se abra el cuadro de diálogo Preferencias, cambie a la pestaña «Avanzado». En la parte inferior, marque la opción «Mostrar menú de desarrollo en la barra de menú». Esto habilitará el desarrollador o las funciones experimentales de Safari. Debería ver una opción «Desarrollar» en la barra de menú superior.

safari-advanced-settings

Haga clic en el menú Desarrollar, navegue hasta las «Funciones experimentales». Desde el menú extendido, haga clic en WebGL 2.0 para habilitarlo. Reinicie el navegador y WebGL se habilitará en Safari.

web-gl-enable-in-safari

Terminando

Recuerde, la mayoría de los sitios web seguirían mostrando gráficos en el navegador, ya que los complementos ya están agregados en el servidor web. Sin embargo, los gráficos serían entrecortados y consumirían mucho más tiempo. Incluso si no se ocupa del desarrollo gráfico, le recomendaría que active WebGL para obtener una mejor experiencia gráfica en la web.

Alternativamente, si por razones de privacidad, desea deshabilitar WebGL, puede usarlos para desactivarlos, usando la configuración anterior o usar la extensión ScriptSafe para bloquear las huellas digitales de WebGL.

Publicaciones relacionadas

Botón volver arriba