Member-only story
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 Working Group, along with many other 3D graphics developers.
Key Advantages
Because it is based on OpenGL and will be integrated across popular browsers, WebGL offers a number of advantages, among them:
- An API that is based on a familiar and widely accepted 3D graphics standard
- Cross-browser and cross-platform compatibility
- Tight integration with HTML content, including layered compositing, interaction with other HTML elements, and use of the standard HTML event handling mechanisms
- Hardware-accelerated 3D graphics for the browser environment
- A scripting environment that makes it easy to prototype 3D graphics — you don’t need to compile and link before you can view and debug the rendered graphics
Prerequisites
