Webgl For Beginners: A Hands-On Guide

Learn WebGL 2024: From Simple Triangles to Advanced Spheres

What you'll learn

Drawing basic shapes (triangles, rectangles)

Creating and transforming 3D objects (cubes, octagons, spheres)

Applying colors and textures

Implementing user interaction with buttons and keyboard

Efficiently organizing your WebGL code

Requirements

Understanding of basic programming is required, but I will guide you through out the way.

Description

Welcome to "WebGL for Beginners: A Hands-On Guide." This course is perfect for students and professionals looking to dive into the world of WebGL and interactive 3D graphics.As a student, I understand the challenges of learning new technologies and have made this course to be as accessible and engaging as possible. Your suggestions and encouragement are very important to us as we develop this course.Technologies Used:Visual Studio Code: For coding and developmentJavaScript: Core programming languageHTML & CSS: For structuring and styling your projects.Why this course?Even though it was recorded using basic equipment, the content is highly useful and useful. Every topic will be covered practically so you can apply what you learn to real-world projects.Your suggestions and encouragement are very important to us as we develop this course.Join now to start your WebGL journey.Course Focus:Our approach in this course is hands-on from start to finish. While we won't be going through into the theoretical aspects of WebGL, I will provide supplementary materials for those who are interested in understanding the basic concepts.I understand that as a student, you're looking to gain practical skills that you can apply directly. That's why this course is focused on giving you the hands-on experience you need to start building interactive 3D graphics for the web.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 SETUP ENVIRONMENT

Lecture 3 RED TRIANGLE

Lecture 4 TRIANGLE WITH EXTERNAL COLORS

Lecture 5 MULTI-COLORED TRIANGLE

Lecture 6 Translating Triangle

Lecture 7 Derivation of the trigonometric function rotations.

Section 2: Supplementary resources

Lecture 8 Websites you can learn theory from

Section 3: Section 2: Make a Rectangle

Lecture 9 Red Rectangle with two triangles

Lecture 10 Rectangle with triangle_FAN

Lecture 11 Multi-colored rectangle

Section 4: Separate vertexCode and fragmentCode

Lecture 12 Separate VertexCode

Lecture 13 Separate FragmentCode

Section 5: Transformations using gl-Matrix library

Lecture 14 gl-Matrix library file

Lecture 15 Proofs of matrics

Lecture 16 Rotate Triangle with gl-matrix

Section 6: Render Octagon

Lecture 17 Construct coordinates of Octagon

Lecture 18 Code Red Octagon

Lecture 19 Code Octagon with colors

Lecture 20 Rotate Octagon

Section 7: Cube

Lecture 21 How to get coordinates of cube

Lecture 22 Demo of Contruction of cube coordinates

Lecture 23 Rotate a cube with Different colours using gl-matrix

Section 8: Interact with user

Lecture 24 Create buttons to rotate in all directions(x,y,z)

Lecture 25 Code cube with buttons(x,y,z)

Lecture 26 Use arrow keys to apply transformations

Lecture 27 Code cube controlling it with arrow keys

Section 9: Texture

Lecture 28 how to come up with texture coordinates

Lecture 29 Rectangle with texture

Lecture 30 Last part of previous video

Lecture 31 Apply all we have learnt in cube with texture

Section 10: Sphere

Lecture 32 How to construct coordinates of the sphere

Lecture 33 Code sphere with all the transformations.

Beginner's in WebGL,For everyone who is interested in computer graphics