CURSOS GRATIS PROGRAMACIÓN Y BIG DATA BUSINESS INTELLIGENCE DATA ANALYTS - 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: https://codepen.io/animaticss/pen/QWZaxWL ⏱ 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: https://www.youtube.com/watch?v=zmHcUdguHCA 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: https://threejs.org/ OGL: https://github.com/oframe/ogl Curtainsjs: https://www.curtainsjs.com/ 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: https://innovations.vareximaging.com/ https://www.magische-spiegelungen.de/ https://www.hape.io/ 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: https://www.youtube.com/watch?v=tTd01KDYypA CURSO BEMIT CSS 👉 https://www.udemy.com/course/bem-css-itcss-metodologia-bemit-diseno-web-avanzado/?referralCode=428854CE5BB65C9B3D9C ------- Soy Ricardo, desarrollador web front end. Website: https://animaticss.com/ Discord: https://discord.gg/7w5sVbWxda Patreon: https://www.patreon.com/animaticss Instagram: https://www.instagram.com/animaticss/ LinkedIn: https://www.linkedin.com/in/ricardo-garcia-llanos/ Udemy (curso) - BEM CSS + ITCSS = Metodología BEMIT: https://www.udemy.com/course/bem-css-itcss-metodologia-bemit-diseno-web-avanzado/?referralCode=428854CE5BB65C9B3D9C Codepen: https://codepen.io/animaticss/ ------- Song: Zack Merci - BOUNCE! (feat. Nieko) Music provided by NoCopyrightSounds Free Download/Stream: http://NCS.io/BOUNCE Watch: http://youtu.be/