README.md

Codelab « First steps with WebGL and Three.js »

A few WebGL and Three.js code experiments, inspired by the « Intro to WebGL with Three.js » slides of David Scott Lyons.

Experiments

1. Setting up renderer, camera, scene and ambient light (required for textures)
2. Box and sphere meshes
3. Dashed lines WebGL engine is a rasterizer – it supports drawing dots and lines, not only triangles
4. Mixing HTML with WebGL canvas: transparent overlay composition works quite fast!
5. Animating the scene, every 15ms
6. Camera orbit controls loading as an ES6 module was a bit tricky
7. Correctly setting aspect ratio and canvas dimension with CSS
   (using .clientWidth/Height CSS properties – see WebGL Anti-patterns #2)
8. Texturing the sphere with a color map (the earth)
9. Using PRPL HTTP2 server to serve assets (script, libraries and textures)
10. Importing libraries as ES6 modules

Usage

Run the HTTP local server:

cd codelabs/intro-to-webgl
npm start

and then open your browser at localhost:8080.

Setup

Assuming you have Git and Node installed:

Clone the repository

git clone [email protected]:olange/learning-webgl.git
cd learning-webgl

Download the project dependencies

cd codelabs/intro-to-webgl
npm install