Introduction to WebGL 3D with HTML5 and Babylon.js

Mod 01: 3D on the Web: Understanding the Basics[Video]

Explore 3D basics, and take a look at 3D without hardware (creating a software engine).

[05:45] - Understanding 3D Basics via a soft engine

[09:49] - Understanding the Transformation pipeline

几个词：A point in 3D world = a vertex(顶点)。Multiple vertex=vertices。Vector3(x,y,z)=a 3D position,or a direction。Triangle = face。A 3D object = a mesh。

几个空间：1.欧几里得空间(Cartesian坐标系) 2. Local/Model坐标系 3.World坐标系 4. View/Camera坐标系(Point-of-View) 5.Screen坐标系[步骤：第1步，把模型从硬盘里放到世界坐标系上(坐标转换)。第2步，模型投影到屏幕上。]

[20:26] - Its all about triangles

绘制一个立方体要几个三角形：一个立方体由8个顶点构成；每个面由三个顶点组成；一个立方体由12个面构成。

[31:42] - Moving from CPU to GPU

Full course outline:

Mod 02: WebGL Basics

Mod 03: Using Babylon.js for Beginners

Mod 04: Understanding Materials and Inputs

Mod 05: Game Pipeline Integration with Babylon.js

Mod 06: Loading Assets

Mod 07: Babylon.js: Advanced Features

Mod 08: Special Effects

参考：https://learn.microsoft.com/en-us/shows/introduction-to-webgl-3d-with-html5-and-babylonjs/01

参考：David Rousset(https://learn.microsoft.com/en-us/archive/blogs/davrous/)

参考：https://www.davrous.com/2013/06/13/tutorial-series-learning-how-to-write-a-3d-soft-engine-from-scratch-in-c-typescript-or-javascript/

参考：https://www.davrous.com/category/3d-software-engine/(软渲染)

This tutorial is part of the following series:

1 – Writing the core logic for camera, mesh & device object (this article) 
2 – Drawing lines and triangles to obtain a wireframe rendering 
3 – Loading meshes exported from Blender in a JSON format 
4 – Filling the triangle with rasterization and using a Z-Buffer 
4b – Bonus: using tips & parallelism to boost the performance 
5 – Handling light with Flat Shading & Gouraud Shading  
6 – Applying textures, back-face culling and WebGL