Details

Title: WebGL & Three.js basics
Duration: 16 hours (2 days)
Number of trainees: from 3 to 8
Meal: breakfast, coffee and tea included, lunch not included
Price per person: $1500 if 4 people or less, $1200 otherwise

Material

The trainee should bring:

  • a laptop with WiFi connectivity,
  • the screen resolution should be at least 1366*768 pixels,
  •  a web browser compatible with WebGL should be installed. This 3D car demo should run smoothly.

The trainer needs:

  • a paperboard/velleda board/green board with different color pens or chalks,
  • a HDMI video projector with a minimum resolution of 1366*768 pixels,
  • a wifi Internet access.

Pre-requisites

This training session is for web developers. An intermediate level in JavaScript (ES5) is required.

To gain maximum benefit from the course, it would be great to review these concepts:

  • Linear algebra: matrix multiplication and addition, multiplication matrix vector, dot product, 
  • Trigonometry: basic functions like cos, sin, tan, spherical to cartesian coordinates conversion.

Objectives

After the training session, the trainees will be able to:

  •  understand the WebGL rendering pipeline, and the principle of a hardware accelerated rendering API like WebGL.
  • create a custom shader using GLSL,
  • use matrix, vectors and quaternions to rotate and translate the camera or objects,
  • build and debug a basic THREE.js application. Avoid the major performance bottlenecks,
  • create meshes, apply textures and lighting.

Course outlines

  •  description of the WebGL rendering pipeline
  • the principle of rasterization
  • WebGL in 2D
  • writting a shader in GLSL
  • adding the third dimension: the projection and movement matrix
  • creating or importing a mesh
  • rotating and translating a mesh or the camera
  • applying a texture on a mesh
  • enlighting a mesh
  • the tricks of blending
  • debugging WebGL
  • building a 3D application using Three.js
  • writting custom shaders using Three.js
  • using quaternions to generate rotations
  • doing maths with Three.js