Module 1: Introduction to WebGL
Objective: To introduce students to the basics of WebGL and graphics programming in a browser.
Topics:
- What is WebGL and what can it do?
- How WebGL differs from Canvas and other graphics technologies;
- The structure of a WebGL application: scene, camera, renderer;
- Setting up the environment: browser, code editor, DevTools.
Practical work:
- Creating a basic HTML template for WebGL;
- Initializing the WebGL context;
- Displaying a simple rectangle or triangle.
Module 2: Graphics basics
Objective: to master basic graphic elements and working with coordinates.
Topics:
- Coordinate systems in WebGL;
- Color, transparency, and textures;
- Drawing primitives: points, lines, polygons;
- Transformation matrices: scale, rotation, translation.
Practice:
- Drawing multiple primitives on the scene;
- Applying basic transformations;
- Changing the color and transparency of objects.
Module 3: Working with Shaders
Objective: Teach students how to create visual effects using shaders.
Topics:
- What are vertex and fragment shaders;
- GLSL for WebGL: syntax and basic functions;
- Passing data to shaders;
- Color effects and gradients.
Practice:
- Writing a simple vertex and fragment shader;
- Changing the color of objects depending on their position;
- Creating a simple gradient or color animation.
Module 4: Textures and materials
Objective: to add realism and visual appeal to objects.
Topics:
- Loading and applying textures;
- Configuring materials for objects;
- Using transparent and animated textures;
- Working with UV coordinates.
Practice:
- Applying textures to 2D and 3D objects;
- Creating a sprite with a texture;
- Animating textured objects.
Module 5: Animating objects
Objective: to implement movement and interactivity of objects.
Topics:
- Game loop: rendering and updating the scene;
- Moving objects and cameras;
- Rotating and scaling objects;
- Animating sprites and models.
Practice:
- Animated moving object;
- Rotating a cube or sphere;
- Simple animation of a character or enemy.
Module 6: User interaction
Objective: Add interactivity and object control.
Topics:
- Keyboard and mouse event handling;
- Camera navigation and object movement;
- Clicks and interaction with scene objects;
- UI basics for WebGL games.
Practice:
- Moving an object around the scene using keys;
- Clicking on an object to trigger an action;
- Mini-interface with points or menu.
Module 7: 3D models and scenes
Objective: to teach students how to work with 3D objects and complex scenes.
Topics:
- Importing 3D models into WebGL (OBJ, glTF);
- Building a scene with multiple objects;
- Camera, lighting, and shadows;
- Basics of scene optimization.
Practice:
- Importing a simple 3D model and displaying it on the scene;
- Creating a scene with multiple objects;
- Adjusting lighting and shadows.
Module 8: Sounds and effects
Goal: Add atmosphere and realism to the game.
Topics:
- Inserting sound effects and music into WebGL;
- Events for playing sounds;
- Visual effects (particle systems, glow);
- Setting up triggers for effects.
Practice:
- Sounds for collisions and player actions;
- Particles when interacting with objects;
- Lighting and flash effects.
Module 9: Optimization and publishing
Goal: Prepare the game for launch in a browser and distribution.
Topics:
- Performance optimization (number of objects, textures);
- Using requestAnimationFrame for smooth animation;
- Minification and preparation for publication;
- Publishing on GitHub Pages or web portals.
Practice:
- Optimizing a scene with multiple objects;
- Publishing a WebGL game in a browser;
- Testing on different devices.
Module 10: Final project
Goal: to create a full-fledged WebGL game.
Tasks:
- Choosing a game concept: 2D or 3D, genre, mechanics;
- Creating scenes, objects, animations, and interface;
- Adding sounds and visual effects;
- Testing, optimization, and publishing.
Practice:
- Fully completed game on WebGL;
- Interactive elements, animations, and sounds;
- Access to the final project for demonstration.