Introduction to 3D in HTML5 with WebGL and Three.js
Starting in the world of 3D programming may not be easy. There are many new concepts if you come from the 2D world: 3 axes, rotation, camera, lights, materials, rendering, … And when you are starting, a good way to learn is to quickly visualize the results of what you are doing. What happens to an object if z position is set to 3? and if set to -5? and rotating y axis by 1.5? To quickly answer these (and others) questions, and help you enter the 3D world, I’ve built a Playground. I’ll tell you why and how.
1. Introduction: about Web 3D, WebGL and Three.js
1.1 What is WebGL?
WebGL is a cross-platform, royalty-free API used to create 3D graphics in a Web browser. Based on OpenGL ES 2.0, WebGL uses the OpenGL shading language, GLSL, and offers the familiarity of the standard OpenGL API. Because it runs in the HTML5 Canvas element, WebGL has full integration with all Document Object Model (DOM) interfaces.
WebGL is a DOM API, which means that it can be used from any DOM-compatible language: JavaScript, Java, or — if you embed WebKit into an application on a Mac — Objective C.
Major browser vendors Google (Chrome), Opera (Opera), Mozilla (Firefox), and Apple (Safari) are members of the Khronos consortium’s WebGL…
