WebGL - GLSL a lo macho alfa lomo plateado

🌟 WebGL - GLSL a lo Macho al Lomo Plateado: Conceptos Esenciales de WebGL sin Librerías ni Frameworks, Utilizando Solo JavaScript 🎓

#Actualización 07/2023

• Corrección de Compatibilidad: Se han corregido los archivos de código fuente para asegurar la funcionalidad en Firefox. ✅

#Contenido del Curso

Este curso está diseñado para llevarte por la mano a través de los conceptos fundamentales y las técnicas necesarias para dominar WebGL con GLSL utilizando solo JavaScript. Aquí te presentamos el itinerario que te convertirá en un experto:

1. Introducción a WebGL 2.0: Aprenderás cómo integrar WebGL 2.0 con GLSL en tus aplicaciones JavaScript para la creación de aplicaciones tanto 2D como 3D. 🎮

2. Comparativo con OpenGL ES 3.0: Entenderás que los conceptos que aprenderás en este curso son transferibles a otros lenguajes como Java, C# o C++, ya que WebGL 2.0 es equivalente a OpenGL ES 3.0. 🔄

3. Estructuras de Datos en WebGL: Profundizarás en el uso de VBO (Vertex Buffer Object) y VAO (Array Buffer Object), y cómo estos se complementan con GLSL para la creación de gráficos dinámicos. 📊

4. Comprender matrices y transformaciones: Te familiarizarás con las operaciones de matrices 3x3 y 4x4, esenciales para manipular y visualizar escenas en 3D. 🧮

5. Efectos Post-Procesamiento: Implementarás efectos visually atractivos como el Pixel Effect y Inverse Color utilizando un FBO (Frame Buffer Object). 🖼️

6. Trabajo con modelos 3D: Descubrirás cómo cargar y visualizar modelos 3D mediante el formato Obj (WaveFront), compatible con herramientas de edición 3D populares como Blender, 3D Max Studio, Maya, etc. 🏗️

7. Desarrollo Sin Dependencias Externas: El enfoque principal de este curso es enseñarte a trabajar con WebGL puro y JavaScript, sin la necesidad de librerías o frameworks adicionales. 🚀

:::IMPORTANTE:::

• Rápido Desarrollo de Aplicaciones 3D: Si tu objetivo es crear aplicaciones 3D rápidamente, te recomendamos explorar frameworks como Three.js, Babylon.js, o motores avanzados como Unity o Unreal. Estos herramientas están diseñadas para facilitar el desarrollo de aplicaciones 3D con WebGL.

• Objetivo del Curso: Este curso está pensado para personas que desean conocer el funcionamiento de bajo nivel de la tarjeta gráfica y tienen experiencia en al menos un lenguaje de programación. Con esta formación, podrás desarrollar tus propios motores gráficos o entender cómo funcionan los que ya existen. 🛠️

Al final de este curso, estarás equipado con un amplio conocimiento del proceso de dibujado en pantalla, desde la creación de buffers hasta el uso de shaders y operaciones matemáticas avanzadas, listo para llevar tus habilidades a un nivel profesional. 🎓✨

Course Overview and Rating

The global course rating for this WebGL course is 4.25 out of 5, with all recent reviews being positive. The course has been praised for its comprehensive explanation of WebGL as an aspect of computer graphics, its approach to teaching fundamentals in Spanish, and its focus on the WebGL API for those looking to program OpenGL with JavaScript.

Pros of the Course

• In-depth Explanation: The course provides a detailed understanding of how a graphics card works and how to interact with it, which is a strong foundation for students new to computer graphics.
• Spanish Language Support: It's one of the few materials available that explains the fundamentals of shaders in Spanish.
• Focused on WebGL API: The course is highly focused on the WebGL API, making it an excellent choice for those specifically interested in this area.
• Practical Approach: The course is constructed in a step-by-step manner with practical examples, and is well-structured and highly didactic.
• Theoretical and Practical Balance: It starts with basic concepts and gradually builds up to more complex ideas, ensuring that students can grasp the material at their own pace.
• No External Libraries Required: The course works natively without the need for external libraries, which is beneficial for understanding core principles.
• Clear Explanations: Initially, explanations are given at a level appropriate for beginners, which is helpful for understanding complex topics.

Key Takeaways:

• Suitable for those with prior experience in OpenGL and DirectX who want to transition to WebGL.
• A solid introduction to shaders with a practical theoretical approach.
• The course could benefit from additional study recommendations for advanced subjects like matrix algebra for shaders.

Cons of the Course

• Theoretical Shortcomings: Some reviewers felt that the course lacked depth in certain theoretical areas and sometimes got tangled in explanations or omitted parts of what was being discussed.
• Limited Browser Compatibility: There are concerns about the course's functionality on browsers other than Chrome, with some users experiencing issues on Safari and Firefox.
• Mobile Functionality: The course could be improved by demonstrating its use in mobile applications.
• Code Copy-Paste Mentality: Some learners felt that while the course provides code examples, it doesn't always encourage or guide students to understand why certain codes work, but rather encourages copying and pasting without a deeper understanding.
• Autonomy After Completion: At least one reviewer mentioned that after completing the course, they did not feel fully autonomous in their knowledge of WebGL. Some depth in specific areas could enhance comprehension.

Key Concerns:

• The course might require supplemental materials for a more comprehensive understanding of certain topics like matrices for shaders.
• The lack of profundity in some theoretical parts may leave learners with gaps in their knowledge.
• While the course is practical and well-structured, it may not be suitable for complete beginners to computer graphics as it assumes some prior knowledge.

Final Verdict

This WebGL course is an excellent resource for those looking to understand and program WebGL with JavaScript, especially if you're already familiar with OpenGL and DirectX. It provides a solid theoretical foundation and practical examples that are well-structured and didactic. However, it may not be the only resource you need; for a deeper understanding of some topics like matrix algebra for shaders, additional study is recommended. The course also has some limitations in terms of browser compatibility and could benefit from more emphasis on independent learning and understanding the 'why' behind the code. Overall, it is a decently rated course that can be very beneficial for your WebGL learning journey if used in conjunction with other resources as needed.