WebGL ¿Qué es? ¿Cómo funciona? | Road to SOTD #6
En este vídeo entenderás el concepto de WebGL, para poder aplicarlo en tus webs.
CODEPEN:
⏱ Timeline del vídeo:
00:00 - Inicio
00:19 - Ejemplos
01:27 - ¡WebGL!
01:59 - Lo que haremos
02:38 - ¿GPU y CPU?
04:47 - ¿Shaders?
06:39 - ¿Qué es WebGL?
08:55 - Empezamos el código
09:26 - HTML
10:57 - CSS
13:24 - JS de la escena WebGL
19:20 - JS de los planos WebGL
23:52 - Resumen del JS hasta ahora
25:06 - Vertex Shader
32:55 - Fragment Shader
34:38 - Otro efecto extra
34:48 - ¡Otro recurso más en tu cartera!
35:26 - Final
36:09 - El diseñador...
Hola maquetador, maquetadora...
Hoy toca un Road to site of the Day!
En este vídeo verás un recurso con mucho potencial y una opción muy recomendable a usar para crear una web digna del premio SOTD.
Si no sabes lo que es un Site of the Day, en este vídeo te lo explico:
En este vídeo, entenderás perfectamente qué es eso de WebGL, diferencia entre GPU y CPU y que es eso de shaders.
Usaremos una librería que nos ayude a gestionar la escena WebGL.
Hay varias librerías que nos pueden ayudar a hacerlo.
ThreeJS:
OGL:
Curtainsjs:
Como verás, no es un concepto para usar a la ligera, ya que implica cierto nivel de esfuerzo y aprendizaje previo, debes ser consciente de lo que implica añadirlo.
Si controlas este efecto, ¡podrás crear una experiencia increíble!
¿Sabes por qué este vídeo es digno de estar en la serie Road to SOTD?
Porque las webs que he mostrado como ejemplos de escenas WebGL, están sacadas de 3 webs diferentes ganadoras del SOTD.
Mira, son las siguientes:
Increíbles ¿verdad?
¡Recuerda este concepto para la próxima web que hagas!
Si utilizas este recurso en algún sitio, pon en los comentarios el link para que los demás podamos visitar la web y ver cómo lo has aplicado.
Aspect ratio en CSS:
CURSO BEMIT CSS
-------
Soy Ricardo, desarrollador web front end.
Website:
Discord:
Patreon:
Instagram:
LinkedIn:
Udemy (curso) - BEM CSS + ITCSS = Metodología BEMIT:
Codepen:
-------
Song: Zack Merci - BOUNCE! (feat. Nieko)
Music provided by NoCopyrightSounds
Free Download/Stream:
Watch:
Watch video WebGL ¿Qué es? ¿Cómo funciona? | Road to SOTD #6 online without registration, duration 36 minute 46 second in high hd quality. This video was added by user AnimatiCSS 16 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 2 thousand once and liked it 7 people.