TalkAugust 29, 2014The Graphical Web, Winchester
Getting started with WebGL and three.js
Abstract
WebGL is a JavaScript API that lets developers implement hardware-accelerated 3D graphics in the browser, both at interactive and non-interactive framerates. WebGL is based onthe HTML <canvas> element and on OpenGL ES 2.0, which means that it is possible to run WebGL on many different devices, such as desktop computers, mobile phones and TVs.
Today, WebGL is fairly widely supported on most platforms and browsers: Firefox, Chrome, Safari, Opera and even Internet Explorer; on Windows, OSX, Linux and Android.
Learn how to build a project to put 3D content on a browser from scratch. In an almost-live coding session you will learn:
- how to set up a project and understand the struture of a WebGL project
- add a renderer and know what it does and how three.js abstracts that idea
- add a scene, a camera and an object with a default material
- create an animation loop and modify the geometry using JavaScript
- change default materials to shaders and create your own custom shaders
- how to add postprocessing to polish the render result